鸿蒙：ContentTable、Stack、Flex等组件和布局实现图像、文本显示界面

已于 2023-11-26 22:09:06 修改
阅读量1.5k 收藏 8
点赞数 4
分类专栏： HarmonyOS 文章标签： 华为 harmonyos
于 2023-11-19 21:56:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geyichongchujianghu/article/details/134491958
版权
本文介绍了如何使用HarmonyOS开发一个包含Stack和Flex布局的食物详情页，通过实例展示了如何使用容器组件、图片、文本以及自定义组件构建图文并茂的内容。
摘要由CSDN通过智能技术生成

效果展示

38d92b82951c466c9eea6d47f2e94dd3.png

一.概述

跟随官网继续HarmonyOS学习

本篇博文实现一个食物详情页的开发Demo

通过这个开发过程学习如何使用容器组件Stack、Flex和基本组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍

二.构建Stack布局

1.食物名称

创建Stack组件，Text子组件

Stack组件为堆叠组件，可以包含一个或多个子组件，其特点是后一个子组件覆盖前一个子组件。

@Entry
@Component
struct MyComponent {
  build() {
    Stack() {
        Text('Tomato')
            .fontSize(26)
            .fontWeight(500)
            .fontColor(Color.White)
    }
  }
}

Previewer效果： 

34e2f012a9084c7f92a12bcabc48097f.png

2.食物图片

创建Image组件，指定Image组件的url

Text组件要在Image组件上方显示，所以先声明Image组件。

图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用$rawfile('filename')的形式，filename为 rawfile 目录下的文件相对路径。

当前$rawfile仅支持Image控件引用图片资源

@Entry
@Component
struct MyComponent {
  build() {
    Stack() {
        Image($rawfile('Tomato.png'))
        Text('Tomato')
            .fontSize(26)
            .fontWeight(500)
    }
  }
}

Previewer效果： 

5feee84032c84f249fee04095d06f75c.png

3.通过资源访问图片

除指定图片路径外，也可以使用引用 媒体资源符$r 引用资源，需要遵循resources文件夹的资源限定词的规则。

右键resources文件夹，点击New>Resource Directory，选择Resource Type为Media（图片资源）

注：新建的Resource Directory目录只能在base目录下，但是base目录默认是有media文件的

直接把Tomato.png放入media文件夹内，就可以通过$r('app.type.name')的形式引用应用资源了

Tomato.png即为 $r('app.media.Tomato')。

代码：

@Entry
@Component
struct MyComponent {
  build() {
    Stack() {
      Image($r('app.media.Tomato'))
        .objectFit(ImageFit.Contain)
        .height(357)
      //Image($rawfile('Tomato.png'))

      Text('Tomato')
        .fontSize(26)
        .fontWeight(500)
    }
  }
}

Previewer: 

e3297d18775a46dcae3c8fba449f2caa.png

4.Image组件objectFit属性

示例中image的objectFit属性设置为ImageFit.Contain，
即保持图片长宽比的情况下，使图片完整地显示在边界内。

Image的objectFit默认属性是ImageFit.Cover，
即在保持长宽比的情况下放大或缩小，使其填满整个显示边界。

如果要想Image填满了整个屏幕，原因如下：
    1.Image没有设置宽高。
    2.objectFit属性使用默认值ImageFit.Cover

5.设置Stack布局属性

Stack默认为居中对齐，本示例中修改为底部起始端对齐，
设置Stack构造参数alignContent为Alignment.BottomStart

Alignment和FontWeight一样，都是框架提供的内置枚举类型

代码：

@Entry
@Component
struct MyComponent {
  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image($r('app.media.Tomato'))
        .objectFit(ImageFit.Contain)
        .height(357)
      //Image($rawfile('Tomato.png'))

      Text('Tomato')
        .fontSize(26)
        .fontWeight(500)
    }
  }
}

Previewer:  

fe28ca1159ef4d879955177cfe18a768.png

6.调整Text组件的外边距margin

margin属性调整组件外边距

(1).margin(Length)，即上、右、下、左四个边的外边距都是Length。

(2).margin { top?: Length,
                    right?: Length,
                    bottom?: Length,
                    left?:Length }，即分别指定四个边的边距

代码：

@Entry
@Component
struct MyComponent {
  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
        Image($r('app.media.Tomato'))
            .objectFit(ImageFit.Contain)
            .height(357)
        Text('Tomato')
            .fontSize(26)
            .fontWeight(500)
            .margin({left: 26, bottom: 17.4})
    }   
  }
}

Previewer：

8509562c2d0542e6933b8586e782ec8b.png

6.调整组件间的结构，语义化组件名称

创建页面入口组件为FoodDetail，在FoodDetail中创建Column，
设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)

MyComponent组件名改为FoodImageDisplay，为FoodDetail的子组件 

Column是子组件竖直排列的容器组件，本质为线性布局，所以只能设置交叉轴方向的对齐

代码：

@Component
struct FoodImageDisplay {
  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image($r('app.media.Tomato'))
        .objectFit(ImageFit.Contain)
      Text('Tomato')
        .fontSize(26)
        .fontWeight(500)
        .margin({ left: 26, bottom: 17.4 })
    }
    .height(357)
  }
}

@Entry
@Component
struct FoodDetail {
  build() {
    Column() {
      FoodImageDisplay()
    }
    .alignItems(HorizontalAlign.Center)
  }
}

Previewer:

3c7653ab992b4f8a9d23fb5b12497f65.png

三.构建Flex布局

Flex：弹性布局

使用Flex弹性布局来构建食物的食物成分表，

弹性布局在本场景的优势在于可以免去多余的宽高计算，通过比例来设置不同单元格的大小，更加灵活。

1.新建ContentTable组件

新建ContentTable组件，使其成为页面入口组件FoodDetail的子组件。

代码：

@Component
struct FoodImageDisplay {
  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image($r('app.media.Tomato'))
        .objectFit(ImageFit.Contain)
        .height(357)
      Text('Tomato')
        .fontSize(26)
        .fontWeight(500)
        .margin({ left: 26, bottom: 17.4 })
    }
  }
}

@Component
struct ContentTable {
  build() {}
}

@Entry
@Component
struct FoodDetail {
  build() {
    Column() {
      FoodImageDisplay()
      ContentTable()
    }
    .alignItems(HorizontalAlign.Center)
  }
}

Previewer：

ContentTable子组件是空的，还没填充内容，当前Previewer效果与上一节一样。

2.创建Flex组件展示Tomato两类成分

一类是热量Calories：卡路里（Calories）；

一类是营养成分Nutrition，包含：蛋白质（Protein）、
                                                      脂肪（Fat）、
                                                      碳水化合物（Carbohydrates）
                                                      维生素C（VitaminC）。

先创建热量这一类
新建Flex组件，高度为280，上、右、左内边距为30，
包含三个Text子组件分别代表：类别名（Calories）
                                                  含量名称（Calories）
                                                  含量数值（17kcal）
Flex组件默认为水平排列方式。

ContentTable代码：

@Component
struct ContentTable {
  build() {
    Flex() {
      Text('Calories')
        .fontSize(17.4)
        .fontWeight(FontWeight.Bold)
      Text('Calories')
        .fontSize(17.4)
      Text('17kcal')
        .fontSize(17.4)
    }
    .height(280)
    .padding({ top: 30, right: 30, left: 30 })
  }
}

Previewer：

501da9cb100245a6bae2d7d7d108a657.png

3.调整布局，设置各部分占比

分类名占比（layoutWeight）为1，

成分名和成分含量一共占比（layoutWeight）2。

成分名和成分含量位于同一个Flex中，成分名占据所有剩余空间flexGrow(1)。

ContentTable代码：

@Component
struct ContentTable {
  build() {
    Flex() {
      Text('Calories')
        .fontSize(17.4)
        .fontWeight(FontWeight.Bold)
        .layoutWeight(1)
      Flex() {
        Text('Calories')
          .fontSize(17.4)
          .flexGrow(1)
        Text('17kcal')
          .fontSize(17.4)
      }
      .layoutWeight(2)
    }
    .height(280)
    .padding({ top: 30, right: 30, left: 30 })
  }
}

Previewer:

9ca5951920fa48509f45d094cc408cbe.png

4.仿照热量分类创建营养成分分类

营养成分部分（Nutrition）包含：
                  蛋白质（Protein）、
                  脂肪（Fat）、
                  碳水化合物（Carbohydrates）
                  维生素C（VitaminC）

设置外层Flex为竖直排列 FlexDirection.Column
在主轴方向（竖直方向）上等距排列 FlexAlign.SpaceBetween
在交叉轴方向（水平轴方向）上首部对齐排列 ItemAlign.Start

ContentTable代码：

@Component
struct ContentTable {
  build() {
    Flex({ direction: FlexDirection.Column,
           justifyContent: FlexAlign.SpaceBetween,
           alignItems: ItemAlign.Start }) {
      Flex() {
        Text('Calories')
          .fontSize(17.4)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
        Flex() {
          Text('Calories')
            .fontSize(17.4)
            .flexGrow(1)
          Text('17kcal')
            .fontSize(17.4)
        }
        .layoutWeight(2)
      }

      Flex() {
        Text('Nutrition')
          .fontSize(17.4)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
        Flex() {
          Text('Protein')
            .fontSize(17.4)
            .flexGrow(1)
          Text('0.9g')
            .fontSize(17.4)
        }
        .layoutWeight(2)
      }

      Flex() {
        Text(' ')
          .fontSize(17.4)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
        Flex() {
          Text('Fat')
            .fontSize(17.4)
            .flexGrow(1)
          Text('0.2g')
            .fontSize(17.4)
        }
        .layoutWeight(2)
      }

      Flex() {
        Text(' ')
          .fontSize(17.4)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
        Flex() {
          Text('Carbohydrates')
            .fontSize(17.4)
            .flexGrow(1)
          Text('3.9g')
            .fontSize(17.4)
        }
        .layoutWeight(2)
      }

      Flex() {
        Text(' ')
          .fontSize(17.4)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
        Flex() {
          Text('vitaminC')
            .fontSize(17.4)
            .flexGrow(1)
          Text('17.8mg')
            .fontSize(17.4)
        }
        .layoutWeight(2)
      }
    }
    .height(280)
    .padding({ top: 30, right: 30, left: 30 })
  }
}

Previewer:

38d92b82951c466c9eea6d47f2e94dd3.png

5.优化代码

可以发现，每个成分表中的成分单元其实都是一样的UI结构

2c75982c6a0849be90ac1400fa46ee09.png

可以通过自定义@Builder函数对代码进行精简

使用自定义@Builder抽象出相同的UI结构
@Builder修饰的方法和Component的build方法都是为了声明一些UI渲染结构，遵循一样的ArkTS语法。

可以定义一个或者多个 @Builder修饰的方法，但Component的build方法必须只有一个

在ContentTable内声明@Builder修饰的IngredientItem方法，用于声明分类名、成分名称和成分含量UI描述。

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

在ContentTable的build方法内调用IngredientItem接口，
需要用this去调用该Component作用域内的方法，以此来区分全局的方法调用。

@Component
struct ContentTable {
  ......
  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
      this.IngredientItem('Calories', 'Calories', '17kcal')
      this.IngredientItem('Nutrition', 'Protein', '0.9g')
      this.IngredientItem('', 'Fat', '0.2g')
      this.IngredientItem('', 'Carbohydrates', '3.9g')
      this.IngredientItem('', 'VitaminC', '17.8mg')
    }
    .height(280)
    .padding({ top: 30, right: 30, left: 30 })
  }
}

ContentTable组件全代码如下：

@Component
struct ContentTable {
  @Builder
  IngredientItem(title:string, name: string, value: string) {
    Flex() {
      Text(title)
        .fontSize(17.4)
        .fontWeight(FontWeight.Bold)
        .layoutWeight(1)
      Flex() {
        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('Calories', 'Calories', '17kcal')
      this.IngredientItem('Nutrition', 'Protein', '0.9g')
      this.IngredientItem('', 'Fat', '0.2g')
      this.IngredientItem('', 'Carbohydrates', '3.9g')
      this.IngredientItem('', 'VitaminC', '17.8mg')
    }
    .height(280)
    .padding({ top: 30, right: 30, left: 30 })
  }
}

Previewer:

本小节只是优化代码，实现效果与上一小节相同

四.结束语

Stack布局和Flex布局已完成食物的图文展示和营养成分表，构建出了第一个普通视图的食物详情页

下一篇博文将继续跟随官网，开发食物分类列表页，并完成食物分类列表页面和食物详情页面的跳转和数据传递。

零基础开始学习鸿蒙开发-Stack布局和Flex布局
qq_36973384的博客
11-30 752
代码示例://对齐方式-居中对齐，也就是整体的布局居中对齐 alignContent:Alignment.Center//Flex为弹性布局//FlexWrap.Wrap表示 换行，每一行子组件按照主轴方向排列//FlexAlign.Start 子组件在主轴方向起始端对齐//FlexAlign.SpaceBetween 各个组件按照手机屏幕的比例均匀分散（一般来说这种按比例的布局对手机屏幕的自适应比较好）
20年老程序员谈谈：鸿蒙开发会成为下一个java吗？_鸿蒙程序员怎么样(1)
2401_84150320的博客
04-15 1193
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。而鸿蒙开发也是一个这样的新风口。互联网大厂都是行业的领头羊和先行者，鸿蒙系统无疑将成为一个新的发展趋势，现在成为第一波投入学习成本的人将获得时间优势，在鸿蒙系统开发在市场广泛流行之前掌握先机，自然有更大的机会进入大厂工作!
鸿蒙5.0开发：ArkUI组件（Stack）
最新发布
AyomQAQ的博客
10-10 780
HarmonyOS中的层叠布局Stack是一种可以将多个组件按照一定顺序叠放的布局。
层叠布局（Stack）
01-13 1161
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。如图1，Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3。图1层叠布局。
鸿蒙应用中图片的显示（Image组件）
01-04 5400
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考组件。该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考。
【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件（Stack）
热门推荐
时光隧道
12-01 6万+
HarmonyOS中的层叠布局Stack是一种可以将多个组件按照一定顺序叠放的布局。Stack布局中的组件可以是任意类型的组件，且每个组件都可以设置在哪个位置叠放。在叠放时，后添加的组件会自动覆盖前面添加的组件。Stack布局布局中的每个子组件都可以设置偏移量、旋转角度等属性，这样可以实现更加丰富的叠放效果。此外，Stack布局还支持添加动画，通过动画可以实现组件的平移、旋转等动态效果，使页面更加生动有趣。
鸿蒙Harmony-层叠布局（Stack）详解
袁震的博客
01-14 2414
我们总是为了太多遥不可及的东西去拼命，却忘了人生真正的幸福不过是灯火阑珊处的温暖，柴米油盐的充实，人生无论你赚的钱，是多还是少，经历的事情是好还是坏，都不如过好当下的每一天！
Flutter布局组件之层叠组件Stack和Positioned
01-08
本文将深入探讨Flutter的层叠布局组件——Stack和Positioned，以及它们如何实现类似Web中的绝对定位和Android中的Frame布局。 Stack组件是Flutter中用于创建堆叠布局的一个关键工具，它允许子组件按照声明的顺序堆...
鸿蒙HarmonyOS项目实战：实现微信app效果（基础界面搭建）_鸿蒙原生开发 微信(1)
2401_84181253的博客
04-21 896
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的。希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，的状态更新之外，还需要对内容区域进行判断展示不同的界面。
鸿蒙HarmonyOS项目实战：实现微信app效果（基础界面搭建）_用鸿蒙写手机微信页面设计的案例
2401_84181253的博客
04-21 1072
这里我采用的方式是自己用最基础的代码实现，这样也能联系到一些想要学习的功能，开箱即用是好的，但是也很容易让我们错过很多关键知识。最近鸿蒙HarmonyOS开发相关的消息非常的火，后续将不再支持原生Android应用，所以对于原Android应用开发对应的Harmony版本也被一系列大厂提上了日程。上面只是一个简单的拆分示例，当我们拿到一个功能的时候，一定要先将页面进行拆分，当我们要实现的功能通过一个个子模块实现后，最终通过子模块的拼接，就可以得到一个完整的功能。之上，顶部和屏幕顶部对其，使其填充满。
鸿蒙界面开发——组件（7）：组件导航 & 页面路由
littleyy666的博客
09-10 1565
here。定义页面跳转配置项。使用资源文件进行定义，通过资源管理@ohos.resourceManager在运行时对资源文件解析。在ets文件中配置路由加载配置项，一般包括路由页面名称（即pushPath等接口中页面的别名），文件所在模块名称（hsp/har的模块名），加载页面在模块内的路径（相对src目录的路径）。
HarmonyOS实战开发：弹性布局（Flex）-（构建布局）
2401_84194030的博客
05-08 1094
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间
鸿蒙开发-UI-布局-弹性布局
中年程序员
01-17 1947
上文详细学习常见布局方式-层叠布局，学习如何控制层叠布局中子元素的堆叠顺序，在最后的案例中使用Flex容器组件，Flex容器组件是用来做弹性布局的组件，本文详细学习鸿蒙开发弹性布局。本文详细学习常见布局方式-弹性布局，学习弹性布局容器主轴、交叉轴上子元素的顺序方式，同时也学习了弹性布局容器子元素自动伸缩机制，下文将学习相对布局。
HarmonyOS实战开发-使用Flex容器组件，实现弹性布局效果。
m0_70749039的博客
03-29 1451
本篇Codelab是基于Flex容器组件，实现弹性布局效果。弹性布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
鸿蒙-布局
m0_66469301的博客
08-15 331
布局
鸿蒙之布局
m0_61305804的博客
08-14 261
justify-content（左右的位置：center，flex-end）align-items（上下的位置：center，flex-end）它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。grid-template-columns：用来指定列的宽度。grid-template-rows：用来指定行的高度。...
Android视角看鸿蒙第十一课-鸿蒙的布局之层叠布局Stack
weixin_44656996的博客
04-07 1302
Stack组件为容器组件，容器内可包含各种子组件。其中子组件默认进行居中堆叠。下面看效果图可以看到Stack的第一个子组件宽度是90，默认是居中的（和Android有区别，写完一定要跑，不要太自信text在Column 的上层，遮挡了部分Columnbuttom在text的上层，遮挡了部分text。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）容器组件之Flex 组件具体用法
二当家的
03-27 1188
Flex 组件可让您使用 flexbox 布局来排列子组件。您可以使用 flexDirection、justifyContent、alignItems 和 flex 属性来控制 flexbox 布局。第一个文本组件将占据 flexbox 布局的 1/6，第二个文本组件将占据 flexbox 布局的。您可以使用 flexDirection 属性来控制 flexbox 布局的主轴方向。您可以使用 alignItems 属性来控制子组件在非主轴方向的对齐方式。您可以使用 flex 属性来控制子组件的 flex。
HarmonyOS Next开发学习手册——层叠布局 (Stack)
maniuT的博客
06-27 816
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。如图1，Stack作为容器，容器内的子元素的顺序为Item1->Item2->Item3。图1层叠布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值