《移动应用开发技术与实战（ArkTS）》课件 项目6-常用UI布局

项目6常用UI布局教材配套精品课·录屏版PPT更大字号、更少文字、更突出运行效果图，适合直接录制教学视频。6个知识模块2个项目实训按视频节奏设计Row/Column·Stack·Flex·RelativeContainer·Grid·List01UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.2录课结构与建议时长按一节一个视频组织总览6.1线性布局Row/Column基础排列、主轴交叉轴、登录页案例约10分钟6.2层叠布局Stack组件堆叠、九宫格对齐、z-index约10分钟6.3弹性布局Flex自适应、方向、换行、搜索框案例约10分钟6.4相对布局RelativeContainer锚点定位、兄弟参照、轮播案例约10分钟6.5栅格布局GridRow/GridCol断点、span、计算器案例约8—10分钟6.6列表布局List列表项、循环渲染、用户列表约8—10分钟实训个人中心与天气预报界面任务拆解、布局设计、效果展示每个3—5分钟说明：每页只保留讲解关键词，详细解释放在录屏口头讲解中。02UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/Column最基础的水平与垂直排列约10分钟6.1线性布局Row/Column最基础的水平与垂直排列概念代码效果案例1Column负责垂直排列，适合页面整体结构。2Row负责水平排列，适合同一行控件。3轴线主轴决定排列方向，交叉轴决定对齐。4自适应Blank与百分比让布局适配屏幕。本页用于建立本节知识框架，建议讲解30—40秒。03UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/ColumnColumn与Row的基本关系约60秒Row与Column都是线性容器先看排列方向1Column从上到下排，适合表单和页面框架。2Row从左到右排，适合菜单、输入行和按钮行。3组合使用Column套Row，是页面开发中最常见结构。04UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/ColumnColumn示例约70秒space控制垂直方向的子组件间距Column({space:20}){Row().width('90%').height(100).backgroundColor('#ffaacc')Row().width('90%').height(100).backgroundColor('#ffaacc')}.width('100%').height('100%')Column运行效果05UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/ColumnRow示例约70秒Row的主轴是水平方向Row({space:20}){Row().width('20%').height(200).backgroundColor('#006699')Row().width('20%').height(200).backgroundColor('#006699')Row().width('20%').height(200).backgroundColor('#006699')}Row运行效果06UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/Column主轴与交叉轴常用控制约90秒justifyContent控制子组件在主轴方向的排列。alignItems控制子组件在交叉轴方向的统一对齐。alignSelf单独控制某个子组件的交叉轴对齐。Start/Center/End分别表示起点、居中、终点对齐。SpaceBetween首尾贴边，中间间隔平均。Blank自动填充主轴剩余空间。属性页只讲“解决什么布局问题”，不用逐字解释。07UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/ColumnBlank自适应拉伸约70秒添加Blank后，开关自动靠右Blank解决什么问题？1填充空白自动占用Row中剩余空间。2界面整齐让文本靠左，开关靠右。3适配屏幕横竖屏宽度变化时仍保持美观。08UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.1线性布局Row/Column登录页面案例约90秒登录界面运行效果案例拆解1外层Column让账号行、密码行、按钮纵向排列。2内部Row让提示文字和输入框横向排列。3属性设置用width、height、margin优化控件尺寸。09UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.2掌握层叠布局Stack用层级关系组织界面元素约10分钟6.2掌握层叠布局Stack用层级关系组织界面元素概念对齐叠放z-index1层叠机制后添加组件覆盖先添加组件。2对齐方式alignContent提供九种位置控制。3典型场景背景图、弹窗、悬浮按钮。4层级控制z-index控制组件前后顺序。本页用于建立本节知识框架，建议讲解30—40秒。10UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.2掌握层叠布局Stack层叠布局概述约60秒Stack中组件可相互覆盖Stack的本质1堆叠显示多个子组件按照顺序叠放。2后者在上后添加的组件会覆盖前面的组件。3适合叠层背景、遮罩、弹窗等场景都常用。11UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.2掌握层叠布局StackalignContent对齐方式约90秒常见对齐效果示意九种位置理解1顶部Top、TopStart、TopEnd。2底部Bottom、BottomStart、BottomEnd。3中间Start、End、Center。12UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.2掌握层叠布局StackStack基本代码约70秒alignContent控制整体叠放位置Stack({alignContent:Alignment.Center}){Text('item1').width('90%').height('100%')Text('item2').width('70%').height('80%')Text('item3').width('50%').height('60%')}.width('100%').height(150)Stack对齐运行效果13UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.2掌握层叠布局Stack层叠登录页案例约90秒背景图+白色登录面板页面结构1背景层Image作为底层背景铺满页面。2表单层Column表单放在Stack中间。3层级效果通过叠放形成更有层次的界面。14UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.2掌握层叠布局Stackz-index属性约60秒值越大视觉层级越靠前。重叠时生效多个组件重叠时决定遮挡关系。尺寸仍重要如果被完全覆盖，也可能看不见。合理使用避免过多重叠造成界面混乱。常见用途弹窗、遮罩、悬浮按钮。调试建议先确认尺寸，再检查zIndex。属性页只讲“解决什么布局问题”，不用逐字解释。15UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.3掌握弹性布局Flex面向不同屏幕的灵活排布约10分钟6.3掌握弹性布局Flex面向不同屏幕的灵活排布方向对齐换行拉伸1自适应元素可随屏幕尺寸调整。2方向控制direction决定主轴方向。3换行能力wrap决定是否多行排列。4伸缩控制flexGrow、flexShrink调节空间分配。本页用于建立本节知识框架，建议讲解30—40秒。16UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.3掌握弹性布局FlexFlex基本概念约60秒主轴为水平方向的Flex容器为什么用Flex？1更灵活适合复杂水平、垂直和多行排列。2更适配面对不同屏幕宽度更容易保持结构稳定。3常见场景搜索栏、导航栏、卡片列表。17UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.3掌握弹性布局Flex方向与对齐约80秒direction:Row子元素从左到右排列。RowReverse子元素从右到左排列。Column子元素从上到下排列。ColumnReverse子元素从下到上排列。justifyContent设置主轴对齐方式。alignItems设置单行交叉轴对齐方式。属性页只讲“解决什么布局问题”，不用逐字解释。18UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.3掌握弹性布局Flexwrap换行效果约90秒NoWrapWrapWrapReverse1NoWrap默认不换行，空间不足时可能压缩子元素。2Wrap允许换行，超出主轴尺寸后进入下一行。3WrapReverse允许换行，但新行按反方向排列。19UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.3掌握弹性布局Flex自适应伸缩属性约60秒flexBasis设置子元素在主轴上的初始尺寸。flexGrow父容器有剩余空间时，控制拉伸比例。flexShrink父容器空间不足时，控制压缩比例。width/height也可直接控制子组件尺寸。margin控制组件之间的外部间距。padding控制内容与边框之间的内部间距。属性页只讲“解决什么布局问题”，不用逐字解释。20UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.3掌握弹性布局Flex搜索框案例约90秒Flex让输入框与按钮水平排列并按比例分配Flex({alignItems:ItemAlign.Center}){Search({value:this.searchInput,placeholder:'请输入搜索内容'}).height(40).width('80%')Text('搜索').width('20%').height(40).textAlign(TextAlign.Center)}搜索框运行效果21UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.4掌握相对布局RelativeContainer基于锚点的精准定位约10分钟6.4掌握相对布局RelativeContainer基于锚点的精准定位锚点父容器兄弟组件案例1减少嵌套复杂界面不必层层套容器。2锚点定位组件可参照父容器或兄弟组件。3alignRules定义水平和垂直方向的对齐规则。4必须设置ID可被参照的组件要有id。本页用于建立本节知识框架，建议讲解30—40秒。22UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.4掌握相对布局RelativeContainer锚点定位思想约60秒相对父容器定位示意相对布局看什么？1看参照物先确定锚点是谁。2看方向left、right、top、bottom控制相对关系。3看规则alignRules让位置关系可读、可维护。23UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.4掌握相对布局RelativeContainer参照父容器定位约70秒__container__表示父容器锚点RelativeContainer(){Text('元素1').alignRules({top:{anchor:'__container__',align:VerticalAlign.Top},left:{anchor:'__container__',align:HorizontalAlign.Start}}).id('item01')Text('元素2').alignRules({top:{anchor:'__container__',align:VerticalAlign.Top},right:{anchor:'__container__',align:HorizontalAlign.End}}).id('item02')}参照父容器定位效果24UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.4掌握相对布局RelativeContainer参照兄弟组件定位约70秒row2参照row1的底部和右侧定位Row(){Text('元素1')}.alignRules({top:{anchor:'__container__',align:VerticalAlign.Top},left:{anchor:'__container__',align:HorizontalAlign.Start}}).id('row1')Row(){Text('row2')}.alignRules({top:{anchor:'row1',align:VerticalAlign.Bottom},left:{anchor:'row1',align:HorizontalAlign.End}}).id('row2')参照兄弟组件运行效果25UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.4掌握相对布局RelativeContainer图片轮播案例约90秒轮播界面运行效果页面拆解1背景图Image作为整体背景。2主图片参照父容器水平、垂直居中。3左右按钮参照主图片的底部与左右边界定位。26UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.4掌握相对布局RelativeContainer相对布局常用属性约60秒alignRules核心定位规则。id作为锚点前必须设置。anchor指定参照对象。left/right控制水平方向关系。top/bottom控制垂直方向关系。margin/padding微调组件间距和内部空间。属性页只讲“解决什么布局问题”，不用逐字解释。27UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.5掌握栅格布局GridRow/GridCol用网格解决多尺寸适配约8—10分钟6.5掌握栅格布局GridRow/GridCol用网格解决多尺寸适配GridRowGridCol断点span1规律排版将界面划分为统一列。2适配设备通过断点处理不同宽度。3span控制每个GridCol占据若干列。4典型案例计算器、相册、仪表盘。本页用于建立本节知识框架，建议讲解30—40秒。28UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.5掌握栅格布局GridRow/GridCol应用场景约60秒栅格布局适合“多元素、规律性、可适配”的界面：计算器、日历、内容卡片、功能入口、图片列表等。29UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.5掌握栅格布局GridRow/GridCol核心概念约70秒GridRow栅格容器，负责整体行列系统。GridCol栅格子组件，负责承载内容。columns设置总列数。gutter设置行列间距。breakpoints根据屏幕宽度选择不同布局。direction控制排列方向。属性页只讲“解决什么布局问题”，不用逐字解释。30UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.5掌握栅格布局GridRow/GridCol计算器案例约90秒span=12独占一行；span=3表示一行四列GridRow(){GridCol({span:12}){Button('C').width('100%').height(80)}GridCol({span:3}){Button('7')}GridCol({span:3}){Button('8')}GridCol({span:3}){Button('9')}GridCol({span:3}){Button('÷')}}计算器运行效果31UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.5掌握栅格布局GridRow/GridCol常用属性约60秒width/height设置行或列的宽高。flex控制伸缩比例。gap/gutter控制行列间距。alignItems设置交叉轴对齐。justifyContent设置主轴对齐。span设置列占比。属性页只讲“解决什么布局问题”，不用逐字解释。32UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.6掌握列表布局List展示同类数据的滚动容器约8—10分钟6.6掌握列表布局List展示同类数据的滚动容器ListListItem循环渲染滚动1结构化数据适合通讯录、新闻、菜单等列表。2可滚动内容超过屏幕后自动滚动。3可扩展支持动态添加、删除、更新。4常与ForEach结合快速渲染多条数据。本页用于建立本节知识框架，建议讲解30—40秒。33UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.6掌握列表布局List实际应用场景约60秒列表布局适合呈现同类信息：新闻列表、课程列表、联系人列表、菜单列表等。34UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.6掌握列表布局ListList的组成约60秒List最外层列表容器。ListItem单个列表项。ListItemGroup分组列表容器。space设置列表项之间的距离。Scroller手动控制列表滚动。ForEach根据数组循环生成列表项。属性页只讲“解决什么布局问题”，不用逐字解释。35UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.6掌握列表布局List用户列表案例约90秒数据数组+ForEach+ListItem形成列表界面ForEach(this.listData,(item)=>{ListItem(){Row(){Image(item.avatar).width(50).height(50).borderRadius(25)Column(){Text(item.title)Text(item.description)}}.width('100%').padding(16)}})用户列表运行效果36UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.26.6掌握列表布局List列表方向与常用属性约60秒Axis.Vertical纵向排列，支持上下滚动。Axis.Horizontal横向排列，支持左右滚动。width/height控制列表区域尺寸。layoutWeight让列表占据剩余空间。padding优化每个列表项内部空间。margin控制列表项外部间距。属性页只讲“解决什么布局问题”，不用逐字解释。37UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.2实训6.1设计个人中心页面综合使用Column、Row、List与Flex3—5分钟实训6.1设计个人中心页面综合使用Column、Row、List与Flex头像信息功能菜单底部导航1顶部区域显示头像、昵称和简介。2菜单区域List展示课程、收藏、设置和帮助。3底部导航Row实现首页和个人中心入口。4适配思路Column组织页面纵向结构。本页用于建立本节知识框架，建议讲解30—40秒。38UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.2实训6.1设计个人中心页面页面结构拆解约60秒个人中心运行效果三块结构1顶部Column中放头像、昵称、简介。2中部List循环展示功能菜单。3底部Row水平排列导航项。39UI项目66.1线性布局6.2层叠布局6.3弹性布局6.4相对布局6.5栅格布局6.6列表布局实训6.1实训6.2实训6.1设计个人中心页面代码关键点约90秒外层Column负责整体，List负责菜单，Row负责导航Column(){Column(){Image($r('app.media.a_my_avatar'))Text('AI教练')Text('一名爱好乒乓的牧羊人')}List({space:10}){ForEach(this.menuList,(menu)=>{