布局

思路

  1. 将每个组件看作盒子
  2. 可以通过DevEco Previewer的TT查看，也可以自己设置.borderWidth查看盒子

主轴与交叉轴概述

两个轴相互垂直，不同容器中主轴方向不一样。如Column主轴为竖、交叉轴为横，而Row则相反。

  • 设置主轴：.justyfyContent(FlexAlign.)
  • 设置交叉轴：.alignItems(HorizontalAlign/VerticalAlign.)

Column


Row

Row({space:})
    .width()
    .height()
    .alignItems(VerticalAlign)
    .justifyContent(FlexAlign or FlexDirection or FlexWarp)

Stack

前面写的组件在下，后面写的在上

Stack({alignContent:Alignment.Center}){
}

RelativeContainer

RelativeContainer() {}
    .alignRules({
        middle: {
            anchor: "__container__",
            align: HorizontalAlign.Center
         },
        center: {
            anchor: "__container__",
            align: VerticalAlign.Center
        }
    })
    .layoutWeight
    .id('xxxx')

Grid

Grid() {
  GridItem() {
  Text(key)
    ...
    }
    //列从哪里开始到哪里结束
    .columnStart(1)
    .columnEnd(2)
    //行从哪里开始到哪里结束
    .rowStart(5)
    .rowEnd(6)
}
//fr的个数即为网格布局的行或列数。数字表示该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')
//主轴方向，以及主轴最多有几个
.maxCount(3)
.layoutDirection(GridDirection.Row)
//间隔
.columnsGap(10)
.rowsGap(15)

Flex

吃性能

Flex({
    justifyContent:FlexAlign.SpaceAround,
    direction:FlexDirection.Row,
    wrap:FlexWrap.Wrap,
    alignContent:FlexAlign.SpaceAround
})

Tabs

一般用法：

Tabs(){
    TabContent(){}
    .tabBar(this.newTab())
}
.barPosition(BarPosition.End)
.scrollable(false)
.onChange(()=>{
	})
@Builder
newTab(){}

自定义tabBar：不使用自定义导航栏时，系统默认的Tabs会实现切换逻辑。在使用了自定义导航栏后，切换页签的逻辑需要手动实现。即用户点击对应页签时，屏幕需要显示相应的内容页。

//创建controller
tabsController : TabsController = new TabsController()
@State currentIndex:number = 0;
//将controller赋予Tabs容器
Tabs(this.tabsController)
//在自定义tabBar中实现切换逻辑
@Builder TabBuilder(title: string, targetIndex: number) {
  Column() {
  ...
  .onClick(() => {
    this.currentIndex = targetIndex;
    this.tabsController.changeIndex(this.currentIndex);
  })
}