【鸿蒙开发】详解HarmonyOS中的容器组件

前言

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

获取完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）

今天也是写鸿蒙的一天,跟大家聊聊鸿蒙当中的容器组件

Column 和 Row

Column 垂直布局 Row水平，主轴默认是Start，交叉轴默认是Center

Column({ space: 10 }) {
  Column() {
    Text('文本1').bordStyle()
    Text('文本2').bordStyle()
    Text('文本3').bordStyle()
    Text('文本3').bordStyle()
  }
  .bordStyle()
  .width(200)
  .height(200)
  // 主轴方向 默认是Start
  // FlexAlign.Center 中间，
  // FlexAlign.Start 开始的位置，
  // FlexAlign.End 结束的位置，
  // FlexAlign.SpaceBetween 上下贴边，其他平分
  // FlexAlign.SpaceAround 上下剩余，是其他剩余的一半
  // FlexAlign.SpaceEvenly 全部平分
  .justifyContent(FlexAlign.SpaceEvenly)
  // 交叉轴方向 默认是Center，End，Center
  .alignItems(HorizontalAlign.End)

Stack

堆叠容器,类似于FramLayout，默认是Center

// 参数 alignContent默认是Center，其他是8个方向加一个Center
Stack({ alignContent: Alignment.TopStart }) {
  Text('文本').margin({left:100,top:100})
  // 也可以用通用属性zIndex ，来控制再Z轴的方向
  Button('点我').zIndex(1)
}.bordStyle().width(200).height(200)