作者：坚果 团队：坚果派 团队介绍：坚果派由坚果创建，团队拥有8个华为HDE，3个HSD，以及若干其他领域的三十余位万粉博主运营， 本人为华为HDE，中国计算机学会CCF专业会员，2022OpenHarmony布道师，开发者联盟优秀讲师，2023年开源之夏导师,2023年OpenHarmony应用创新赛导师,OpenHarmony金融应用创新赛导师，RISC-V OpenHarmony应用创意赛导师，OpenHarmony三方库贡献者，开放原子开源基金会技术 生态贡献者，第一批开放原子开源讲师，曾受邀参加2022，2023HDC大会，OpenHarmony校源行开源大使，InfoQ签约作者，CSDN博客专家，电子发烧友MVP，51CTO博客专家博主，阿里云博客专家，专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，在2022年战码活动中，带领100余人完成pr的提交，配合孵化三个小队长。也在此活动中累计完成1.5W行代码提交，同时担任2023OpenHarmony创新赛评委，以及在2023年OpenHarmony创新赛中。累计辅导60 队伍，完成作品的提交,在相关社区累计发布OpenHarmony相关技术文章/视频50 ，获得20w 浏览量。团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，欢迎合作。
运行环境
DevEco Studio：4.0Release
OpenHarmony SDK API10
开发板：润和DAYU200
运行效果
完整代码
代码语言：javascript复制@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
以上就是用到的几个组件和介绍。大家可以自己复制代码到本地，然后打开预览器，或者真机测试。
