HarmonyOS Next星河版笔记--界面开发（4）

布局

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
1. 布局背景：backgroundImage
2. 布局容器：整体从上往下 —— Column
3. 顶部：左右布局——Row、SpaceBetween
4. logo：Image图片
输入框和登录区域
1. 国家地址：点按区域（Row→Text、Text、Image）
2. 手机号：输入框TextInput
3. 同意许可：复选框checkbox，文本Text→Span
4. 登录按钮、用户注册
底部模块区域
1. 整体Column列
2. 标题Text
3. 三方登录图标：Row、Image、spacearound
4. 底部居底：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)}}

运行效果