布局
1.1.线性布局
线性布局通过线性容器column和row创建
- column容器:子元素垂直方向排列
- row容器:子元素水平方向排列
1.1.1.排布主方向上的对齐方式(主轴)
属性:.justifyContent(枚举FlexAlign)(Row组件的justifyContent属性效果相似)
居顶
.justifyContent(FlexAlign.Start)
居中
.justifyContent(FlexAlign.Center)
居底
.justifyContent(FlexAlign.End)
其他
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text().width(200).height(100).backgroundColor(Color.Pink).border({width : 2})Text().width(200).height(100).backgroundColor(Color.Pink).border({width : 2}).margin(20)Text().width(200).height(100).backgroundColor(Color.Pink).border({width : 2})}.width('100%').height('100%')//设置排布主方向的对齐方式(主轴)//justifyContent(枚举FlexAlign) ctrl+p cmd+p//1、Start (排布主方向) 主轴起始位置对齐//2、Center 主轴居中对齐//3、End 主轴结束位置对齐//4、SpaceBetween 贴边显示,中间的元素均匀分布间隙//5、SpaceAround 间隙环绕 0.5 1 1 1 0.5的间隙分布,靠边只有一半的间隙//6、SpaceEvenly 间隙均匀环绕,靠边也是完整的一份间隙.justifyContent(FlexAlign.SpaceEvenly)}
}
1.1.2.交叉轴对齐方式
属性:alignItems()
参数:枚举类型
- 交叉轴在水平方向:HorizontalAlign
- 交叉轴在垂直方向:VerticalAlign
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {//Column 交叉轴的对齐方式(水平往右)//alignItems(HorizontalAlign.Start) Center End//.alignItems(VerticalAlign.Top) Center Bottom//Column() {Row(){Text().width(50).height(100).backgroundColor(Color.Pink).border({width : 2})Text().width(50).height(100).backgroundColor(Color.Pink).border({width : 2}).margin({// top:20,// bottom:20left:20,right:20})Text().width(50).height(100).backgroundColor(Color.Pink).border({width : 2})}.width('100%').height('100%')
.alignItems(VerticalAlign.Bottom)}
}
1.2.弹性布局
弹性容器组件:Flex()
基本使用
Flex(参数对象){子组件1子组件2子组件3子组件N}
wrap属性:Flex是单行布局还是多行布局
1、FlexWrap.NoWrap(单行布局)
2、FlexWrap.Wrap(多行布局)
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {//flex默认主轴水平往右,交叉轴垂直往下 → row/column//2、主轴对齐方式//3、交叉轴对齐方式//单行或单列的情况,优先还是使用线性布局//Flex布局:伸缩布局。当子盒子的总和溢出父盒子,默认进行压缩显示。//4、换行 wrapFlex({// direction:FlexDirection.Row,// justifyContent:FlexAlign.SpaceAround,// alignItems:ItemAlign.Center
wrap:FlexWrap.Wrap}){Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})Text().width(80).height(80).backgroundColor(Color.Pink).border({width:1,color:Color.Green})}.width(300).height(600).backgroundColor(Color.Blue)}
}
案例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
Column(){Text('阶段选择').fontSize(36).fontWeight(700).width('100%').padding(15)Flex({wrap:FlexWrap.Wrap}){Text('ArkUI').padding(15)Text('ArkTS').padding(15)Text('界面开发').padding(15)Text('系统能力').padding(15)Text('权限控制').padding(15)Text('元服务').padding(15)}
}}}
运行效果
1.3.综合案例(列表项)
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row({space:8}){Column(){Text("玩一玩").fontSize(FontWeight.Bolder)Text('签到有礼|超多tomato 超好吃').fontColor(Color.Gray)}.alignItems(HorizontalAlign.Start)Column(){Image($r('app.media.tomato')).width(40).backgroundColor('#efefef').borderRadius(5)}.alignItems(HorizontalAlign.Center)}.width('90%').height(80).backgroundColor('#fff').borderRadius(10).justifyContent(FlexAlign.SpaceBetween).padding({left:15,right:15}).margin({top:20})}.width("100%").height("100%").backgroundColor(Color.Yellow)}}
1.4.自适应伸缩
设置layoutWeight属性的子元素与兄弟元素,会按照权重进行分配主轴的空间
语法:.layoutWeight(数字)
作用:左边自适应;右边固定
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row() {Text('左边').layoutWeight(1).height(50).backgroundColor(Color.Pink)Text('右边').width(70).height(50).backgroundColor(Color.Orange)}}.width("100%").height("100%").backgroundColor(Color.Yellow)}}
效果
1.5.综合案例(卡片)
案例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column(){
Image($r('app.media.xinlan')).width('100%').borderRadius({topRight:10,topLeft:10})Text('今晚必看 | 每日艺术分享NO.1').fontSize(15).fontWeight(30).padding({left:5,right:5}).lineHeight(22).height(60)//底部Row(){//头像、昵称Row({space:5}){Image($r('app.media.potato')).width(25).borderRadius(100)Text('7373').fontSize(10).fontColor('#999')}.layoutWeight(1)//点赞图标点赞数Row({space:5}){Image($r('app.media.thumbgood')).width(13).fillColor('#999')Text('2.3W').fontSize(13).fontColor('#666')}}.padding({left:15,right:15})}.width(200)//.height(400)//先定死一个高,后续内容撑开.padding({bottom:15}).backgroundColor(Color.White).borderRadius({topLeft:10,topRight:10})}.padding(10).width('100%').height('100%').backgroundColor('#ccc')}
}
1.6.阶段性综合案例
京东页面登录案例
分析:
- 布局容器 + 顶部 +logo
- 布局背景:backgroundImage
- 布局容器:整体从上往下 —— Column
- 顶部:左右布局——Row、SpaceBetween
- logo:Image图片
- 输入框和登录区域
- 国家地址:点按区域(Row→Text、Text、Image)
- 手机号:输入框TextInput
- 同意许可:复选框checkbox,文本Text→Span
- 登录按钮、用户注册
- 底部模块区域
- 整体Column列
- 标题Text
- 三方登录图标:Row、Image、spacearound
- 底部居底:Blank()填充组件
1.7.绝对定位和层级zIndex
1.7.1.绝对定位
作用:控制组件位置,可实现层叠效果
特点:
- 参照父组件左上角 进行偏移
- 绝对定位后的组件 不占用自身原有位置
语法:.position(位置对象)
参数:{ x : 水平偏移位置 , y : 垂直偏移位置 }
Text('文字内容')
.position({x : 50 ,y : 50 })
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {//position绝对定位:可以控制组件位置,可以实现层叠效果//语法:// .position({// x:150,// y:50// })//特点://1、相对应父组件左顶点进行偏移(调整位置)//2、原本的位置不占了,且可以任意调整位置,不影响其他元素//后面的组件明显层级更高,会盖住前面的组件//需求:不动结构的情况下,调整组件的层级 .zIndex(数字)Column(){Text('大儿子').width(80).height(80).backgroundColor(Color.Gray)Text('二儿子定位').width(80).height(80).backgroundColor(Color.Yellow).position({x:150,y:50}).zIndex(1)Text('三儿子').width(80).height(80).backgroundColor(Color.Green).zIndex(2)}.width(300).height(300).backgroundColor(Color.Pink)}
1.8.层叠布局
层叠布局具有较强的组件层叠能力。场景:卡片层叠效果等
特点层叠操作更简洁,代码效率更高(绝对定位的优势是灵活)
Stack 容器内的子元素的顺序为Item1 -> Item2 -> Item3
Stack(){Item1()Item2()Item3()
}
语法
Stack({alignContent:Alignment.Top}){Item1()Item2()Item3()
}
案例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
//层叠布局Stack({alignContent:Alignment.TopStart}){Text('大儿子').width(250).height(250).backgroundColor(Color.Green)Text('二儿子').width(150).height(150).backgroundColor(Color.Orange)Text('三儿子').width(50).height(50).backgroundColor(Color.Yellow)}.width(300).height(600).backgroundColor(Color.Pink)}}
运行效果