鸿蒙学记-003

Text Text大小默认单位为fp，字符串设置字体大小需要显示指定‘24fp’，UI组件基本都是如此，只不过其他的vp单位。 fontWeight默认大小为400 Text设置颜色，可通过Color枚举，number数据设置十六进制要写成0xabcdef，字符串设置十六进制写成‘#abcdef’

容器组件

Row和Column的都包含两个轴，主轴和交叉轴，这两个轴始终相互垂直 对齐方式： Row和Column都有两个关于对齐方式的属性 justifyContent：设置子组件在主轴方向上的对齐格式 alignItems：设置子组件在交叉轴方向上的对齐格式 SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐

Grid组件

参数：scroller控制器，可以控制Grid的滚动 子组件 包含子组件GridItem Grid组件属性 columnsTemplate：当前网格布局列的数量 单位fr rowsTemplate：当前网格布局行的数量 单位fr columnsGap：列间距 单位vp rowsGap：行间距 单位vp

Tabs组件

参数1：barPosition设置Tabs的页签位置 参数2：index设置初始页签的索引 参数3：controller设置Tabs控制器，用于控制Tabs组件进行页签切换 Tabs组件属性 vertical：设置Tabs是否为纵向，默认为false barMode：TabBar布局模式 barWidth：TabBar的宽度 barHeight：TabBar的高度 Tabs组成主要包括3部分： TabsController TabContent tabBar 自定义一个TabsController+TabBarBuilder(TabBar)

@State currentIndex: number = 0  
// 标签页需要TabsController,嵌在Tabs中  
private tabsController: TabsController = new TabsController()  
// 构建自定义的Item  
@Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {  
  Column() {  
    Image(this.currentIndex === index ? selectedImg : normalImg)  
      .width(25)  
      .height(25)  
    Text(title)  
      .margin({top:4})  
      .fontSize(10)  
      .fontColor(this.currentIndex === index? '#1698CE' : '#6B6B6B')  
  }  .justifyContent(FlexAlign.Center)  
  .height(56)  
  .width('100%')  
  .onClick(() => {  
    this.currentIndex = index  
    this.tabsController.changeIndex(this.currentIndex)  
  })  
}

Tabs嵌入TabContent、TabsController和TabContent

Tabs({  
  barPosition: BarPosition.End,  
  controller: this.tabsController  
}) {  
  TabContent() {  
    Home()  
  }  .padding({left: 12, right: 12})  
  .backgroundColor('#F1F3F5')  
  .tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))  
  
  TabContent() {  
    Mine()  
  }  .padding({left: 12, right: 12})  
  .backgroundColor('#F1F3F5')  
  .tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))  
}  
.width('100%')  
.backgroundColor(Color.White)  
.barHeight(56)  
.barMode(BarMode.Fixed)  
.onChange((index: number) => {  
  this.currentIndex = index  
})