【HarmonyOS NEXT星河版开发学习】小型测试案例07-弹性布局小练习

个人主页→VON

收录专栏→鸿蒙开发小型案例总结​​​​​

基础语法部分会发布于github 和 gitee上面（暂未发布）

前言

在鸿蒙（HarmonyOS）开发中，Flex布局是一种非常有用的布局方式，它允许开发者创建灵活且响应式的用户界面。Flex布局基于弹性盒子模型，使得UI组件能够根据屏幕尺寸或其他条件动态调整大小和位置。

知识点概述

Flex容器属性

• direction：定义主轴的方向，即子组件的排列方向。
  • FlexDirection.Row：子组件沿水平方向从左至右排列。
  • FlexDirection.RowReverse：子组件沿水平方向从右至左排列。
  • FlexDirection.Column：子组件沿垂直方向从上至下排列。
  • FlexDirection.ColumnReverse：子组件沿垂直方向从下至上排列。
• wrap：定义当子组件无法全部显示在同一行或列时是否换行。
  • FlexWrap.NoWrap：不允许换行。
  • FlexWrap.Wrap：允许换行。
  • FlexWrap.WrapReverse：允许换行并反转换行的方向。

Flex子项属性

• flex：定义子组件在主轴上的伸缩能力。
• alignSelf：定义子组件在交叉轴上的对齐方式。
• basis：定义子组件的初始大小。

Flax示例

@Entry
@Component
struct Index {
  build() {
    // Flex默认主轴水平向右，交叉轴垂直往下
    // 1.主轴方向：direction
    //  direction:FlexDirection.Row / Column
    // 2.主轴对齐方式：justifyContent
    //  justifyContent:FlexAlign.SpaceAround
    // 3.交叉轴对齐方式：alignItems
    //  alignItems:ItemAlign.Stretch / Start / Center / End
    //  单行或者单列的情况，优先还是使用线性布局（本质基于Flex设计的，且还做了性能优化）
    // 4.布局换行：wrap
    //  FlexWrap.Wrap 换行
    //  FlexWrap.NoWrap 不换行
    // Flex布局：伸缩布局。当子盒子的总和溢出父盒子，默认进行压缩显示
    Flex(){
      Text()
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        .border({width:1,color:Color.Blue})
      Text()
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        .border({width:1,color:Color.Blue})
      Text()
        .width(80)
        .height(80)
        .backgroundColor(Color.Pink)
        .border({width:1,color:Color.Blue})
    }
    .width(300)
    .height(300)
    .backgroundColor('#5f9a5c')
  }
}

界面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('阶段练习')
        .fontSize(30)
        .fontWeight(700)
        .padding(15)
      Flex({
        wrap:FlexWrap.Wrap
      }){
        Text('ArkUI').padding(10).backgroundColor('#f1f1f1').margin(5)
        Text('ArkTS').padding(10).backgroundColor('#f1f1f1').margin(5)
        Text('界面开发').padding(10).backgroundColor('#f1f1f1').margin(5)
        Text('系统能力').padding(10).backgroundColor('#f1f1f1').margin(5)
        Text('权限控制').padding(10).backgroundColor('#f1f1f1').margin(5)
        Text('元服务').padding(10).backgroundColor('#f1f1f1').margin(5)
      }
    }
  }
}