完善资料让更多小伙伴认识你,还能领取20积分哦, 立即完善>
各位老师,最近在学习张容超老师的2048游戏 ArkUI 实现,发现ArkUI .width('100%') .fontColor(Color.White) .fontSize(30) .textAlign(TextAlign.Center) .margin({ top: 10 }) } @Extend(Column) function ColumnFancy() { .layoutWeight(1) .height(120) .backgroundColor('#bbadb0') .borderRadius(10) .alignItems(HorizontalAlign.Center) } @Preview @Component struct InformationBar { build() { Row({space: 10}) { Column() { Text('2048') .fancy() Text('4x4') .fancy() } .ColumnFancy() Column() { Text('当前分') .fancy() Text('4x4') .fancy() } .ColumnFancy() Column() { Text('最高分') .fancy() Text('4x4') .fancy() } .ColumnFancy() } .width('100%') .margin(10) } } |
|
相关推荐
3个回答
|
|
你可以改为使用Flex来布局,我是这样写的
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) { Text('2048') .width('100%') .fontColor(Color.White) .fontSize(22) .textAlign(TextAlign.Center) Text('4X4') .width('100%') .fontColor(Color.White) .fontSize(20) .textAlign(TextAlign.Center) } .width(100) .height('100%') .backgroundColor('#BBADA0') .borderRadius(10) Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) { Text('当前分') .width('100%') .fontColor(Color.White) .fontSize(22) .textAlign(TextAlign.Center) Text(this.currentScore.toString()) .width('100%') .fontColor(Color.White) .fontSize(20) .textAlign(TextAlign.Center) } .width(100) .height('100%') .backgroundColor('#BBADA0') .borderRadius(10) Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) { Text('最高分') .width('100%') .fontColor(Color.White) .fontSize(22) .textAlign(TextAlign.Center) Text(this.highestScore.toString()) .width('100%') .fontColor(Color.White) .fontSize(20) .textAlign(TextAlign.Center) } .width(100) .height('100%') .backgroundColor('#BBADA0') .borderRadius(10) } .width('100%').height(60).margin({ top: 10 }) |
|
|
|
非常感谢,您的方案能够解决我遇到的问题,不知道 ArkUI 没有提供获取组件属性的方法,如果有获取方法 UI 布局应该会更加方便!希望有老师能够反馈到开发组优化
|
|
|
|
如果你用了 Flex,Flex 的内部被你看中了,你仔细研究了内部的组件。小方块是不是被压缩成了长方形?
简而言之,就是这样写,我个人的习惯就是这种布局,就是最好用来切片布局的,设定使用布局重量或者这种切片的布局,而不是应该多长宽数值的属性长宽的具体px对开发者来说是个黑盒子)。要设置具体的分数可以在内部封装一个组件 Column(){ Row(){ }.margin(10) }.layoutWeight(1) |
|
|
|
你正在撰写答案
如果你是对答案或其他答案精选点评或询问,请使用“评论”功能。
掰掉卫星电话的外置天线,华为“天才少年”助力 Mate 捅破天
5279 浏览 0 评论
1203 浏览 2 评论
华秋电子 | 电子发烧友亮相OpenHarmony人才生态大会2024
2298 浏览 0 评论
OpenHarmony有 支持的分布式数据库吗? 自动同步各节点数据?
1637 浏览 0 评论
OpenHarmony人才生态大会南向生态社区发展论坛在武汉圆满举办
1241 浏览 0 评论
小黑屋| 手机版| Archiver| 电子发烧友 ( 湘ICP备2023018690号 )
GMT+8, 2024-12-23 01:29 , Processed in 0.824069 second(s), Total 75, Slave 58 queries .
Powered by 电子发烧友网
© 2015 bbs.elecfans.com
关注我们的微信
下载发烧友APP
电子发烧友观察
版权所有 © 湖南华秋数字科技有限公司
电子发烧友 (电路图) 湘公网安备 43011202000918 号 电信与信息服务业务经营许可证:合字B2-20210191 工商网监 湘ICP备2023018690号