注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下
如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识
专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html
文章所属类目（HarmonyOS 语言-ArkTS）
目录
1. 布局
1.1 基础线性布局
参考地址
1.1.1 基本介绍
Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列
Row：沿水平方向布局容器
Column：沿垂直方向布局的容器
1.1.2 语法
Row(value?:{space?: string | number })
参数名 |
类型 |
必填 |
说明 |
value |
{space?: string | number } |
否 |
横向布局元素间距。 |
Column(value?: {space?: string | number})
参数名 |
类型 |
必填 |
说明 |
value |
{space?: string | number} |
否 |
纵向布局元素垂直方向间距。 |
1.1.3 属性
Row
横向布局-采用Row
- alignItems 设置子元素在交叉轴方向的对齐格式
语法 alignItems(value: VerticalAlign)
VerticalAlign参数枚举
- justifyContent 设置子组件在水平方向上的对齐格式
语法 justifyContent(value: FlexAlign)
FlexAlign参数枚举
Column
纵向布局-采用column
- alignItems 设置子组件在水平方向上的对齐格式
语法：alignItems(value: HorizontalAlign)
参数HorizontalAlign：子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center
- justifyContent 设置子组件在垂直方向上的对齐格式
语法：justifyContent(value: FlexAlign)
参数FlexAlign：子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start
总结：属性justifyContent 设置子元素在主轴方向的对其格式 参数是 FlexAlign枚举
属性alignItems 设置子元素在交叉轴（垂直主轴方向的轴）方向的对齐格式 Row 容器使用VerticalAlign枚举 Column容器使用HorizontalAlign枚举
1.1.4 用法
- 横向布局
@Entry
@Component
struct Index {
build() {
Column() {
Row({space:15}){
Text('第一个').width(100).height(100).backgroundColor(Color.Blue)
Text('第二个').width(100).height(100).backgroundColor(Color.Yellow)
Text('第三个').width(100).height(100).backgroundColor(Color.Pink)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
}.width('100%').height('100%')
}
}- 纵向布局
@Entry
@Component
struct Index {
build() {
Column() {
Column({space:15}){
Text('第一个').width(100).height(100).backgroundColor(Color.Blue)
Text('第二个').width(100).height(100).backgroundColor(Color.Yellow)
Text('第三个').width(100).height(100).backgroundColor(Color.Pink)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}.width('100%').height('100%')
}
}1.1.5 总结
Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列
- 线性布局中永远不会产生换行
- 均不支持出现滚动条
- 横向排列的垂直居中，总行排列的水平居中
- 主轴-排列方向的轴
- 侧轴-排列方向垂直的轴
1.2 线性布局小案例-练习题
@Entry
@Component
struct Exercise {
build() {
Row({ space: 10 }) {
Row({ space: 2 }) {
Text('500')
.fontWeight(FontWeight.Bold)
Text('总访问量')
}
Row({ space: 2 }) {
Text('120')
.fontWeight(FontWeight.Bold)
Text('原创')
}
Row({ space: 2 }) {
Text('200')
.fontWeight(FontWeight.Bold)
Text('排名')
}
Row({ space: 2 }) {
Text('100')
.fontWeight(FontWeight.Bold)
Text('粉丝')
}
}.justifyContent(FlexAlign.SpaceEvenly)
.width('100%')
.height(60)
}
}1.3 线性布局小案例-百度首页
@Entry
@Component
struct Baidu {
build() {
Column() {
Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
.width(160)
Row() {
TextInput()
.layoutWeight(2)
.borderRadius({
topLeft: 6,
bottomLeft: 6
})
.backgroundColor('#fff')
.border({ width: 2, color: '#ccc' })
.height(40)
Button('百度一下')
.layoutWeight(1)
.type(ButtonType.Normal)
.borderRadius({
topRight: 6,
bottomRight: 6
})
.backgroundColor('#3274f6')
}
.padding(20)
}
.width('100%')
.height('100%')
}
}1.4 堆叠布局
参考地址
1.4.1 基本介绍
层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
1.4.2 语法
Stack(value?: { alignContent?: Alignment })
1.4.3 用法
@Entry
@Component
struct StackDemo {
build() {
Column() {
Stack({alignContent:Alignment.TopEnd}){
Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
.width(160)
Text('鸿蒙版')
.translate({
y: 20
})
}
Row() {
TextInput()
.layoutWeight(2)
.borderRadius({
topLeft: 6,
bottomLeft: 6
})
.backgroundColor('#fff')
.border({ width: 2, color: '#ccc' })
.height(40)
Button('百度一下')
.layoutWeight(1)
.type(ButtonType.Normal)
.borderRadius({
topRight: 6,
bottomRight: 6
})
.backgroundColor('#3274f6')
}
.padding(20)
}
.width('100%')
.height('100%')
}
}Stack的参数 可以设置子组件的排列方式-alignContent
- Top(顶部)
- TopStart（左上角）
- TopEnd（右上角）
- Start（左侧）
- End（右侧）
- Center（中间）
- Bottom（底部）
- BottomStart（左下角）
- BottomEnd(右下角)