39.HarmonyOS鸿蒙系统 App(ArkUI)线性布局结合弹性布局

弹性布局(Flex)

弹性布局(Flex)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴,子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸,在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多,比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。

图1主轴为水平方向的Flex容器示意图

基本概念

  • 主轴:Flex组件布局方向的轴线,子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点,结束位置称为主轴结束点。
  • 交叉轴:垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点,结束位置称为交叉轴结束点。

布局方向

在弹性布局中,容器的子元素可以按照任意方向排列。通过设置参数direction,可以决定主轴的方向,从而控制子组件的排列方向。

图2弹性布局方向图

index.ets

复制代码
import FaultLogger from '@ohos.faultLogger'
import promt2 from '@ohos.prompt'
import promt_action from '@ohos.promptAction'
@Entry
@Component
struct Index {
  private arr_value:string[] = ['AP1','AP2','AP3','AP4','AP5','AP6','AP7','AP8'];
  @State message: string = '调试'
  @State message2: string = '测试'
  @State message3: string = 'demo by txwtech'
  @State handlePopup2:boolean = false

 //堆叠布局示范,堆叠布局放两个弹性布局
  build() {
   // Stack({}){
   //   Column(){}.width('80%').height('70%').backgroundColor(Color.Blue)//线性布局在底层
   //   Text('堆叠布局').width('99%').height(100).margin({top:5}).backgroundColor(Color.Yellow) //text在中层
   //   Button('按钮').width('80%').height(100).margin({top:50})//按钮在最上层
   // }
    //线性布局结合弹性布局
    //使用弹性布局,可以实现子组件沿水平方向排列,两端对齐,子组件间距平分,竖直方向上子组件居中的效果
    Column(){
      Column({space:5}){
        Text('').height(30)
        Text('线性布局结合弹性布局').backgroundColor(Color.Green).fontColor(Color.White).fontSize(30).width('100%').textAlign(TextAlign.Center)
        Text('').height(30)
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Text('文本1').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本2').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本3').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Text('文本4').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本5').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本6').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Text('文本7').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本8').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Text('文本9').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Text('').height(30)
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Button('按钮1').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮2').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮3').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }
        Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
          Button('按钮4').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮5').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)
          Button('按钮6').width('30%').height(50).backgroundColor(Color.Blue).fontColor(Color.White)

        }



      }
    }





  }
}
相关推荐
王佳斌13 小时前
tp报错解决
harmonyos
coooliang13 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
江拥羡橙15 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
爱笑的眼睛1115 小时前
HarmonyOS应用开发:深入ArkUI声明式开发范式与最佳实践
华为·harmonyos
云水木石15 小时前
开源鸿蒙+龙芯CPU,能擦出怎样的火花?
华为·开源·harmonyos
特立独行的猫a16 小时前
开源OpenHarmony润开鸿HH-SCDAYU800A开发板开箱体验
开源·harmonyos·openharmony·hh-scdayu800a
祥睿夫子18 小时前
鸿蒙 ArkTS 函数全解析:从基础定义到高级应用,新手也能轻松掌握
harmonyos
江拥羡橙21 小时前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
爱笑的眼睛111 天前
HarmonyOS Stage 模型深度解析:构建现代化、高性能应用
华为·harmonyos
安卓开发者1 天前
鸿蒙NEXT自定义能力详解:从基础使用到高级技巧
华为·harmonyos