OpenHarmony/HarmonyOS中Stack,Flex布局的使用“作者:坚果
团队:坚果派
公众号:“大前端之旅”
润开鸿技术专家,华为HDE,InfoQ签约作者,OpenHarmony布道师,擅长HarmonyOS应用开发、熟悉服务卡片开发,在“战码先锋”活动中作为大队长,累计培养三个小队长,带领100+队员完成Pr的提交合入。欢迎通过主页或者私信联系我,加入坚果派,一起学习OpenHarmony/HarmonyO应用开发。 ” 本示例为构建了简单页面展示食物坚果的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。 适用语言:ArkTS 版本:API9 OpenHarmony:3.2Release HarmonyOS:3.1 食用办法大家新建一个page,然后复制下面的代码就可以。 运行效果完整代码@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
以上就是用到的几个组件和介绍。大家可以自己复制代码到本地,然后打开预览器,或者真机测试。
|