鸿蒙开发01页面布局

---

前言

鸿蒙的页面编写时，首先要考虑的就是页面布局，布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。布局主要分为线性布局、层叠布局、弹性布局、相对布局、栅格布局。

---

一、线性布局

线性布局主要包含Column（纵向布局）和Row（横向布局）。

1.1 纵向布局

纵向布局是从上至下进行组件放置。默认子组件水平居中。

Column({space: 20}){
  Row().width('100%').height(200).backgroundColor(Color.Pink)
  Row().width('100%').height(200).backgroundColor(Color.Blue)
  Row().width('100%').height(200).backgroundColor(Color.Yellow)
}.width('100%')
.height('100%')

1.2 横向布局

纵向布局是从左到右进行组件放置。默认子组件内容垂直方向居中，内容超出不会换行。

Row({space: 20}){
  Column().height('100%').width(100).backgroundColor(Color.Pink)
  Column().height('100%').width(100).backgroundColor(Color.Blue)
  Column().height('100%').width(100).backgroundColor(Color.Yellow)
}.width('100%')
.height('100%')

column和row搭配使用即可完成整体布局。

二、层叠布局

层叠布局就是组件会按照栈的方式（先进后出，后进先出）进行布局，因此最先的组件是在最下面，最后的组件是在最上面，在同一位置进行堆叠。

Stack({alignContent: Alignment.TopEnd}){
 Text('我是一个测试文本').backgroundColor(Color.Pink).width(300).height('100%')
  Text('我是一个测试文本').backgroundColor(Color.Blue).width(250).height('100%')
  Text('我是一个测试文本').backgroundColor(Color.Yellow).width(200).height('100%')
}.width('100%').height('100%')
.backgroundColor(Color.Green)

Stack布局可以使用alignContent属性进行子组件的位置设置。

三、弹性布局

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。

Flex({wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween}){
  Row()
    .width(100)
    .height(200)
    .backgroundColor(Color.Orange)

  Row()
    .width(100)
    .height(200)
    .backgroundColor(Color.Pink)

  Row()
    .width(100)
    .height(200)
    .backgroundColor(Color.Green)

  Row()
    .width(100)
    .height(200)
    .backgroundColor(Color.Blue)
}

其中Flex布局中的wrap属性控制是否换行，justifyContent属性设置子元素在主轴方向的对齐方式。

四、网格布局

Grid布局就是向网格一样，能分成几行几列。Grid组件下只能放置GridItem组件。

Grid(){
 GridItem(){
   Column().height(200).width('100%').backgroundColor(Color.Blue)
 }
 GridItem(){
   Column().height(200).width('100%').backgroundColor(Color.Blue)
 }
 GridItem(){
   Column().height(200).width('100%').backgroundColor(Color.Blue)
 }
 GridItem(){
   Column().height(200).width('100%').backgroundColor(Color.Blue)
 }
}
.columnsTemplate("1fr 2fr").columnsGap(10).rowsGap(10).padding(10)

columnsTemplate属性是设置横向的分配，columnsGap和rowsGap设置行和列的间距。

五、相对布局

相对布局就是相对某组件的位置排列。

RelativeContainer() {
	RelativeContainer(){
	  Row(){}
	  .width('33%')
	  .aspectRatio(1)
	  .alignRules({
	    top: {anchor: '__container__', align: VerticalAlign.Top},
	    middle: {anchor: '__container__', align: HorizontalAlign.Center}
	  })
	  .backgroundColor(Color.Red)
	
	  Row(){}
	  .width('33%')
	  .aspectRatio(1)
	  .alignRules({
	    bottom: {anchor: '__container__', align: VerticalAlign.Bottom},
	    middle: {anchor: '__container__', align: HorizontalAlign.Center}
	  })
	  .backgroundColor(Color.Blue)
	
	  Row(){}
	  .width('33%')
	  .aspectRatio(1)
	  .alignRules({
	    center: {anchor: '__container__', align: VerticalAlign.Center},
	    right: {anchor: '__container__', align: HorizontalAlign.End}
	  })
	  .backgroundColor(Color.Green)
	
	  Row(){}
	  .width('33%')
	  .aspectRatio(1)
	  .alignRules({
	    center: {anchor: '__container__', align: VerticalAlign.Center},
	    left: {anchor: '__container__', align: HorizontalAlign.Start}
	  })
	  .backgroundColor(Color.Yellow)
	}.width('60%')
	.aspectRatio(1)
	.backgroundColor(Color.Pink)
	.alignRules({
	  center: {anchor: '__container__', align: VerticalAlign.Center},
	  middle: {anchor: '__container__', align: HorizontalAlign.Center}
	})
	}
	.height('100%')
	.width('100%')
	.backgroundColor(Color.Gray)
}

alignRules属性设置对齐规则，其中top/left对应该要素的上和左，其余同理。anchor是设置锚点根据要素的id,默认是__container__,align是对应要素的位置。