OpenHarmony——ArkTS声明式开发与应用 课件 项目2-任务3-2 使用弹性布局和层叠布局开发场景设置页.pptxVIP

任务3使用弹性布局与层叠布局开发场景设置页项目2走近ArkTS声明式开发

完成任务达成的技能目标01任务描述02技能目标本任务讲解Flex弹性布局、Stack层叠布局的使用，实现场景设置页的开发。能依据场景选择Flex弹性布局容器1能依据场景选择Stack层叠布局容器2能正确设置Flex和Stack布局容器的各项参数和属性3能完成场景设置页的设计与开发4

任务实施步骤STEPS整理工程资源1用Flex和Stack布局设计场景UI2用Flex和Stack布局设计“起床”子场景3

整理工程资源01任务实施

整理工程资源将任务需要的图片资源拷贝到media目录下。代码演示

用Flex和Stack布局设计场景UI02任务实施

用Flex和Stack布局设计场景UI场景设置页最外层使用一个垂直方向的Flex弹性布局，内部嵌套两个Text组件和三个Stack层叠布局。组件树代码演示

用Flex和Stack布局设计“起床”子场景03任务实施

用Flex和Stack布局设计“起床”子场景“起床”子场景设置页面，最外层是个垂直方向的Flex布局，内部嵌套Stack层叠布局和Text组件。组件树代码演示

任务小结本任务使用Flex弹性布局和Stack层叠布局，实现了场景页面的设计和开发。Flex可以弹性设置成Row与Column方向，与Row与Column在属性方法中设置的写法不同，Flex