Harmony学习(二)------ArkUI(2)

1.主轴对齐方式.justifyContent

复制代码
  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin(10)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)  
  }
}

2.交叉轴对齐方式.alignItems()

交叉轴水平方向:HorizontalAlign

交叉轴垂直方向:VerticalAlign

复制代码
build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
        .margin({top:10,bottom:10})
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(HorizontalAlign.End)
  }

3.自适应伸缩.layoutWeight()

按照份数权重,分配剩余空间

复制代码
build() {
    Row(){
      Text('老大')
        .backgroundColor(Color.Blue)
        .layoutWeight(1)  //占剩余空间权重
      Text('老二')
        .backgroundColor(Color.Yellow)
        .layoutWeight(2)
      Text('老三')
        .backgroundColor(Color.Red)
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }

4.Blank() 填充空白区域,像弹簧

5.Checkbox()复选框

6.Text(){Span('1')Span('2')}

7.弹性布局Flex

复制代码
build() {
    Flex({
      direction:FlexDirection.Row,      //主轴方向
      justifyContent:FlexAlign.SpaceBetween,   //主轴方式
      alignItems:ItemAlign.Center    //交叉轴方式
    }){
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(100).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
    }
    .width('100%').height('90%')
    .backgroundColor(Color.Green)
  }

弹性布局Flex 多行

复制代码
Column(){
      Flex({
        wrap:FlexWrap.Wrap    //设置多行
      }){
        Text('我是他').backgroundColor(Color.Gray).margin({right:5,bottom:5}).padding(4)
        Text('他不是我').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('我到底是谁').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('你是?').backgroundColor(Color.Gray).margin({right:5}).padding(4)
        Text('到底是什么').backgroundColor(Color.Gray).margin({right:5}).padding(4)
      }
    }
    .width('100%')
    .height('100%')
  }

8.绝对定位:控制组件位置,实现层叠效果

复制代码
  build() {
    Column(){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Yellow)
        .border({
          width:2
        })
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Blue)
        .border({
          width:2
        })
        //绝对定位 控制位置,层叠效果
        .position({
          x:0,
          y:0
        })
        //zindex设置层级
        .zIndex(-1)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Red)
        .border({
          width:2
        })
    }
    .width('100%').height('100%')
  }

9.层叠布局Stack(){}

复制代码
build() {
    //层叠方位
    Stack({alignContent:Alignment.TopEnd}){
      Text('黄药师').width(250).height(500).backgroundColor(Color.Yellow)
      Text('黄蓉').width(200).height(400).backgroundColor(Color.Red)
      Text('郭襄').width(150).height(300).backgroundColor(Color.Blue)
    }
    .width(300).height(600)
    .backgroundColor(Color.Pink)
  }
相关推荐
The 旺10 分钟前
《HarmonyOS Next开发进阶:打造功能完备的Todo应用华章》
华为·harmonyos
杉之27 分钟前
Java中的不可变集合
java·笔记·学习
viperrrrrrrrrr72 小时前
大数据学习(95)-谓词下推
大数据·sql·学习
唔662 小时前
flutter 曲线学习 使用第三方插件实现左右滑动
javascript·学习·flutter
haoly19893 小时前
离散数学问题集--问题4.40
学习
cwtlw3 小时前
java基础知识面试题总结
java·开发语言·学习·面试
鸿蒙布道师4 小时前
鸿蒙NEXT开发随机工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
Caramel_biscuit4 小时前
STM32 CAN学习
stm32·嵌入式硬件·学习
DayDayUp..5 小时前
[算法学习笔记] 《Hello算法》第10章 搜索
笔记·学习