鸿蒙开发之ArkUI 界面篇三十综合案列-生肖卡抽奖

最新推荐文章于 2025-07-31 14:12:52 发布

codes23457789

最新推荐文章于 2025-07-31 14:12:52 发布

阅读量977

点赞数 11

CC 4.0 BY-SA版权

文章标签： harmonyos 华为鸿蒙State实战鸿蒙Gride实战鸿蒙Stack实战鸿蒙抽奖实战鸿蒙综合案例

本文链接：https://blog.csdn.net/renfujiang/article/details/142853044

打开的时候，界面是这样子的：

6个生肖卡是6张图片，'立即抽卡'是Button，仔细观察，生肖卡列之间的距离是相等的，生肖卡和“立即抽卡的”的关系是垂直的关系，每一张生肖卡是图片，如果单纯的界面，不考虑扩展的话，Colum+两个Row，每个Row三张图片也能实现静态界面，但是这样的缺点是扩展不够好，比如要增加到12呢？界面改动会大很多，如果是ForEach遇到3的倍数就换行呢？那如果界面改成每列两个也是改动比较大的，感觉用Flex也能实现Flex的缺点是拐弯的地方不不好控制，鸿蒙提供了Grid组件，原来如下图：