注意：博主有個鴻蒙專欄，里面從上到下有關于鴻蒙next的教學文檔，大家感興趣可以學習下
如果大家覺得博主文章寫的好的話，可以點下關注，博主會一直更新鴻蒙next相關知識
專欄地址: https://blog.csdn.net/qq_56760790/category_12794123.html
文章所屬類目（HarmonyOS 語言-ArkTS）
目錄
1. 布局
1.1 基礎線性布局
1.1.1 基本介紹
1.1.2 語法
1.1.3 屬性
Row
Column
1.1.4 用法
1.1.5 總結
1.2 線性布局小案例-練習題
1.3 線性布局小案例-百度首頁
1.4 堆疊布局
1.4.1 基本介紹
1.4.2 語法
1.4.3 用法
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@Componentstruct 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@Componentstruct 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@Componentstruct 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@Componentstruct 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@Componentstruct 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(右下角)
