鸿蒙应用开发

第二章 简单的布局（容器组件）

Column容器（垂直方向布局）
主轴：垂直 交叉轴：水平
属性：
space设置间距
justifyContent：设置子组件在主轴方向的对齐格式
对于的参数类型FlexAlign
Start：子组件在主轴方向首端对齐
Center：子组件在主轴方向中心对齐
End：~末端对齐
SpaceBetween：第一个元素与行首对齐，最后一个元素和行尾对齐
SpaceAround：第一个元素到行首的举例和最后一个元素到行尾的距离是相邻元素的一半

SpaceEvenly：元素等间距布局

alignItem：设置子组件在交叉轴方向上的对齐
对应的参数类型：HorizontalAlign（水平对齐）
start：子组件在交叉轴方向首端对齐（左对齐）
center：子组件在交叉轴方向居中对齐
end：子组件在交叉轴方向末端对齐（右对齐）

Row容器（水平方向布局）
主轴：水平，交叉轴：垂直

alignItem：设置子组件在交叉轴方向上的对齐
对应的参数类型：VerticaAlign（垂直对齐）
Top：子组件在交叉轴方向顶部对齐
center：子组件在交叉轴方向居中对齐
Bottom：子组件在交叉轴方向底部对齐

List组件

list组件一般和子组件Listitem一起使用，按照垂直或水平方向线性排列，

参数：List（value？{space:number,string:initaiindex?:number,scorller?Scorller}）

space:设置列表间距
initiaiindex：设置初始时显示的item
scorller：scroller控制器控制滚动

属性

属性名称	意义
listDirection	设置组件的排列方向
divider	设置分割线

foreach循环渲染
含义：通过foreach从数组中获取数据，并为每个数据创建对应的组件，可减少重复代码

ForEach（
arr：any[]，
itemGenerator：（item：any，index？：number）=>void，
keyGeneratoy：（item:any,index?:number => string)

参数1：arr为需要的数组
参数2：为子组件的生成函数
参数3：为数组项唯一键值生成函数

使用步骤：
1：定义列表数据对象（用于封装列表项数据）
2：创建数据数组（为列表创建数据源）
3：创建item内容（构建列表组件）
4：使用foreach构建列表（遍历数据源渲染列表）

Grid组件

grid组件为网格容器，是一种网格列表，由行和列分割的单元格组成，通过指定item所在的单元格做出各种各样的布局，一般与子组件griditem一起使用

@Entry
@Component
struct GridExample{
  private arr: string [] = new Array(16).fill("").map((_,index) => 'item ${index}');
  build(){
    Column(){
      Grid(){
        ForEach(this.arr,(item:String) => {
          GridItem(){
            // @ts-ignore
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(Color.Blue)
              .width(100%)
              .height(100%)
              .textAlign(TextAlign.Center)
          }
        },item => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(300)
    }
    .width(100%)
    .padding(12)
    .backgroundColor(Color.Gray)
  }

}

Tabs组件的使用

主要是用来做页面切换使用的场景，例如常见的我的和首页页面
一般和子组件TabContent组合使用，每一个页面对应一个内容视图即tabContent

@Entry
@Component
struct TabExample{
  private controller: TabsController = new TabsController()
  build(){
    Column(){
      Tabs({barPosition:BarPosition.Start,controller:this.controller}){
        TabContent(){
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }
        .tabBar("green")
        TabContent(){
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }
        .tabBar("blue")
      }
      .barWidth('100%')
    }
  }
}