OpenHarmony/HarmonyOS中Stack，Flex布局的使用
OpenHarmony/HarmonyOS中Stack，Flex布局的使用
OpenHarmony/HarmonyOS中Stack，Flex布局的使用
“作者：坚果 团队：坚果派 公众号：“大前端之旅” 润开鸿技术专家，华为HDE，InfoQ签约作者，OpenHarmony布道师，擅长HarmonyOS应用开发、熟悉服务卡片开发，在“战码先锋”活动中作为大队长，累计培养三个小队长，带领100+队员完成Pr的提交合入。欢迎通过主页或者私信联系我，加入坚果派，一起学习OpenHarmony/HarmonyO应用开发。 ”
本示例为构建了简单页面展示食物坚果的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。
适用
语言：ArkTS
版本：API9
OpenHarmony：3.2Release
HarmonyOS：3.1
食用办法
大家新建一个page，然后复制下面的代码就可以。
image-20230614103151907
运行效果
image-20230614095805500
完整代码
@Component
struct NustImageDisplay {
build() {
Stack({ alignContent: Alignment.BottomStart }) {
Image($r('app.media.nust'))
.objectFit(ImageFit.Cover)
Text('大坚果')
.fontSize(26)
.fontWeight(500)
.margin({ left: 26, bottom: 17.4 })
}
.backgroundColor('#FFedf2f5')
.height(357)
}
}
@Component
struct ContentTable {
@Builder IngredientItem(title:string, name?: string, value?: string) {
Flex() {
Text(title)
.fontSize(17.4)
.fontWeight(FontWeight.Bold)
.layoutWeight(1)
Flex({ alignItems: ItemAlign.Center }) {
Text(name)
.fontSize(17.4)
.flexGrow(1)
Text(value)
.fontSize(17.4)
}
.layoutWeight(2)
}
}
build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
this.IngredientItem('卡路里', '17kcal',"卡路里")
this.IngredientItem('营养', '蛋白质', '0.9g')
this.IngredientItem(' ', '油脂', '0.2g')
this.IngredientItem(' ', '碳水化合物', '3.9g')
this.IngredientItem(' ', '维生素C', '17.8mg')
}
.padding({ top: 20, right: 20, left: 20 })
.height(250)
}
}
@Entry
@Component
struct FoodDetail {
build() {
Column() {
NustImageDisplay()
ContentTable()
}
.alignItems(HorizontalAlign.Center)
}
}
接下来就来带大家拆解一下。用到的几个组件。
Flex
以弹性方式布局子组件的容器组件。
Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
标准Flex布局容器。
- direction：子组件在Flex容器上排列的方向，即主轴的方向。
- wrap：Flex容器是单行/列还是多行/列排列。说明： 在多行布局时，通过交叉轴方向，确认新行堆叠方向。
- justifyContent：所有子组件在Flex容器主轴上的对齐格式。
- alignItems：所有子组件在Flex容器交叉轴上的对齐格式。
- alignContent：交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。
Stack
堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
Stack(value?: { alignContent?: Alignment })
- alignContent：设置子组件在容器内的对齐方式。默认值：Alignment.Center
Column
横向布局元素间距
Space：纵向布局元素垂直方向间距。
- alignItems：设置子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center
- justifyContent：设置子组件在垂直方向上的对齐格式。
Row
沿水平方向布局容器。
Space：沿垂直方向布局的容器。
- alignItems：设置子组件在垂直方向上的对齐格式。默认值：VerticalAlign.Center
- justifyContent：设置子组件在水平方向上的对齐格式。FlexAlign.Start
以上就是用到的几个组件和介绍。大家可以自己复制代码到本地，然后打开预览器，或者真机测试。