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)
  }
相关推荐
As977_8 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
ajsbxi11 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking12 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
dsywws34 分钟前
Linux学习笔记之时间日期和查找和解压缩指令
linux·笔记·学习
道法自然040235 分钟前
Ethernet 系列(8)-- 基础学习::ARP
网络·学习·智能路由器
爱吃生蚝的于勒41 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
SuperHeroWu71 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
cuisidong19972 小时前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
南宫理的日知录2 小时前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
数据与后端架构提升之路3 小时前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习