网站建设与管理 ppt模板,前端静态网站开发,电子商务网站的建设与规划书,网站建设全部教程个人主页→VON 收录专栏→鸿蒙开发小型案例总结 基础语法部分会发布于github 和 gitee上面#xff08;暂未发布#xff09; 前言 在鸿蒙#xff08;HarmonyOS#xff09;开发中#xff0c;Flex布局是一种非常有用的布局方式#xff0c;它允许开发者创建灵活且响… 个人主页→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)}}}
}
