完善资料让更多小伙伴认识你,还能领取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) |
|
|
|
|
你正在撰写答案
如果你是对答案或其他答案精选点评或询问,请使用“评论”功能。
4681 浏览 0 评论
30765 浏览 0 评论
【润开鸿HH-SCDAYU800A开发板试用体验】+系统编译
1103 浏览 0 评论
【汇思博SEEK100开发板试用体验】记录DevEco Studio 中遇到的问题
1484 浏览 0 评论
【汇思博SEEK100开发板试用体验】在开发板鸿蒙OS搭建QT开发环境
1219 浏览 0 评论
/9
小黑屋| 手机版| Archiver| 电子发烧友 ( 湘ICP备2023018690号 )
GMT+8, 2025-12-1 19:51 , Processed in 0.809447 second(s), Total 96, Slave 79 queries .
Powered by 电子发烧友网
© 2015 bbs.elecfans.com
关注我们的微信
下载发烧友APP
电子发烧友观察
版权所有 © 湖南华秋数字科技有限公司
电子发烧友 (电路图) 湘公网安备 43011202000918 号 电信与信息服务业务经营许可证:合字B2-20210191

淘帖
402