【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)}}}
}