一直會(huì)分享，雖然鴻蒙目前來(lái)沒(méi)有多大發(fā)展，但不可否然以后發(fā)展，華為的技術(shù)是一大突破，存在即合理
可以現(xiàn)在沒(méi)有多大發(fā)展。但不可否定未來(lái)的發(fā)展。

關(guān)注’猿來(lái)編碼‘，微信訂閱號(hào)，回復(fù) ’組件‘，獲取

介紹一下鴻蒙開(kāi)發(fā)常用4種布局

1、線性布局
2、層疊布局
3、網(wǎng)格布局
4、列表布局

?1. 線性布局（Column/Row）

線性布局（LinearLayout）是開(kāi)發(fā)中最常用的布局，通過(guò)線性容器Row（行）和Column（列）構(gòu)建，它是其他布局的基礎(chǔ)，其子元素在線性方向上（水平或垂直）依次排列，基本形式如下：
Column（列）
子元素在排列方向上的間距，可以通過(guò)組件參數(shù)space參數(shù)進(jìn)行控制

@Entry
@Component
struct Index {

  build() {
    Column({space:20}) {
      //一行
      Row() {

      }.width('80%').height(50).backgroundColor(Color.Green)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Orange)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Yellow)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Blue)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Red)

    }.width('100%').alignItems(HorizontalAlign.Center)
  }
}

效果：

Row（行）

@Entry
@Component
struct Index {

  build() {
    Row({space:20}) {
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Red);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Orange);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Red);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Blue);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Pink);

    }.width('100%').padding(20).backgroundColor('#ccc')
  }
}

子元素排列與對(duì)齊
● 主軸：線性布局容器在布局方向上的軸線，Row容器主軸為橫向，Column容器主軸為縱向。
● 交叉軸：垂直于主軸方向的軸線。Row容器交叉軸為縱向，Column容器交叉軸為橫向。
子元素沿主軸方向的排列方式
可以通過(guò)justifyContent 屬性進(jìn)行控制，可選值如下：

@Entry
@Component
struct Index {

  build() {
    Column({space:20}) {
      //一行
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Green)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Red)

    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

.justifyContent(FlexAlign.Center)

.justifyContent(FlexAlign.Start)

.justifyContent(FlexAlign.End)

.justifyContent(FlexAlign.SpaceBetween)

.justifyContent(FlexAlign.SpaceAround)

.justifyContent(FlexAlign.SpaceEvenly)

子元素沿交叉軸方向的對(duì)齊方式
可以通過(guò)alignItems 屬性進(jìn)行控制，可選值如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {

      }.width('80%').height(50).backgroundColor(Color.Red)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Orange)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Yellow)
    }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
  }
}

.alignItems(HorizontalAlign.Start)

.alignItems(HorizontalAlign.Center)

.alignItems(HorizontalAlign.End)

**

2、層疊布局（Stack）

Stack布局是一種常用的布局方式，它允許將子元素沿垂直于屏幕的方向堆疊在一起，類似于圖層的疊加。子元素可以按照其添加順序依次疊加在一起，后添加的子元素會(huì)覆蓋之前添加的子元素，層疊布局具有較強(qiáng)的頁(yè)面層疊、位置定位能力，其使用場(chǎng)景有廣告、卡片層疊效果等。
Stack容器中的子組件可通過(guò)zIndex屬性設(shè)置其所在的層級(jí)，zIndex值越大，層級(jí)越高，即zIndex值大的組件會(huì)覆蓋在zIndex值小的組件上方
Stack 布局通常會(huì)和 position絕對(duì)定位配合使用，設(shè)置元素左上角相對(duì)于父容器左上角偏移位置配合使用，position語(yǔ)法示例：.position({ x: 180, y: 130 })

@Entry
@Component
struct StackAlign {
  @State alignment: Alignment = Alignment.Center;

  build() {
    Column() {
      Stack() {
        Row() {
          Text('1')
        }
        .width(300).height(300).backgroundColor(Color.Yellow)

        Row() {
          Text('2')
        }
        .width(150).height(150).backgroundColor(Color.Red)

        Row() {
          Text('3')
        }
        .width(75).height(75).backgroundColor(Color.Green)

      }
    }
    .width('100%')
  }
}

.alignContent(Alignment.TopStart)

@Entry
@Component
struct StackAlign {
  @State alignment: Alignment = Alignment.Center;

  build() {
    Column() {
      Stack() {
        Row() {
          Text('1')
        }
        .width(300).height(300).backgroundColor(Color.Blue)

        Row() {
          Text('2')
        }
        .width(150).height(150).backgroundColor(Color.Red)

        Row() {
          Text('3')
        }
        .width(75).height(75).backgroundColor(Color.Yellow)
      }
      .width('100%').backgroundColor('#ccc').alignContent(Alignment.TopStart)    }
    .width('100%')
  }
}

.alignContent(Alignment.TopEnd）

.alignContent(Alignment.Top）

.alignContent(Alignment.Start）

.alignContent(Alignment.Center）

.alignContent(Alignment.End）

.alignContent(Alignment.BottomStart）

.alignContent(Alignment.BottomEnd）

.alignContent(Alignment.Bottom）

**

3、網(wǎng)格布局（Grid）

**
網(wǎng)格布局（Grid）是一種強(qiáng)大的頁(yè)面排版方式，通過(guò)將頁(yè)面劃分為行和列組成的網(wǎng)格，使得子組件可以在這個(gè)二維網(wǎng)格中自由定位。網(wǎng)格布局的容器組件為Grid，子組件為GridItem，如下圖所示。
用1fr來(lái)表示占1個(gè)’單位‘

@Entry
@Component
struct Index {
  build() {

    Grid(){
      GridItem(){}.backgroundColor(Color.Red)
      GridItem(){}.backgroundColor(Color.Green)
      GridItem(){}.backgroundColor(Color.Yellow)
      GridItem(){}.backgroundColor(Color.Brown)
      GridItem(){}.backgroundColor(Color.Orange)
      GridItem(){}.backgroundColor(Color.Black)
      GridItem(){}.backgroundColor(Color.Orange)
      GridItem(){}.backgroundColor(Color.Gray)
      GridItem(){}.backgroundColor(Color.Pink)
    }.width('100%').height(400).rowsTemplate('1fr 2fr 1fr').columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10)
  }
}

.rowsTemplate(‘1fr 2fr 1fr’)

.columnsTemplate(‘1fr 2fr 1fr’)

.rowStart(1).rowEnd(2)

.rowsGap(10).columnsGap(30)

當(dāng)顯示內(nèi)容超出顯示區(qū)域時(shí)，有滾動(dòng)效果

4、列表布局（List）

列表（List）是一種復(fù)雜的容器組件，使用列表可以輕松高效地顯示結(jié)構(gòu)化、可滾動(dòng)的列表信息。列表布局的容器組件為L(zhǎng)ist，子組件為L(zhǎng)istItem或者ListItemGroup，其中，ListItem表示單個(gè)列表項(xiàng)，ListItemGroup用于列表數(shù)據(jù)的分組展示，其子組件也是ListItem，如下圖所示
.listDirection(Axis.Vertical)

@Entry
@Component
struct Index {
  build() {
    List({space:10}) {
      ListItem() {
        Text('list1')
      }.width('100%').backgroundColor(Color.Red)

      ListItemGroup() {
        ListItem() {
          Text('list2')
        }.width('100%')

        ListItem() {
          Text('list3')
        }.width('100%')

      }.width('100%').backgroundColor(Color.Yellow)
    }.width('100%').listDirection(Axis.Vertical)
  }
}

.listDirection(Axis.Horizontal)

.alignListItem(ListItemAlign.End)

.alignListItem(ListItemAlign.Start)

.alignListItem(ListItemAlign.Center)

scrollBar屬性可控制滾動(dòng)條樣式

@Entry
@Component
struct Index {
  @State contactsGroups: object[] = [
    {
      title: 'A',
      contacts: [
        '趙云',
        '李白',
        '王思'
      ],
    },
    {
      title: 'B',
      contacts: [
        '白葉',
        '伯樂(lè)'
      ],
    },
    {
      title: 'C',
      contacts: [
        '王大',
        '張三'
      ],
    },
    {
      title: 'D',
      contacts: [
        '白龍',
        '小明'
      ],
    },
    {
      title: 'E',
      contacts: [
        '蓋倫',
        '石頭',
        '光輝'
      ],
    }
  ]

  @Builder Header(item){
    Text(item.title).fontSize(30).backgroundColor('#ccc').width('100%')
  }

  build() {

    List(){
      ForEach(this.contactsGroups,(item)=>{
        ListItemGroup({header:this.Header(item)}){
          ForEach(item.contacts,(user)=>{
            ListItem(){
              Text(user)
            }.width('100%').height(50)
          })
        }
      },item=>JSON.stringify(item));
    }.width('100%').height(300).scrollBar(BarState.On)
  }
}

以上就是常用布局

關(guān)注’猿來(lái)編碼‘，微信訂閱號(hào)，回復(fù) ’布局‘，獲取文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-851098.html

到了這里，關(guān)于HarmonyOS鴻蒙開(kāi)發(fā)常用4種布局詳細(xì)說(shuō)明的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！