【鸿蒙应用开发高手之路】04_自适应布局之占比能力
所谓占比能力,指的是:当父容器的尺寸发生变化时,子组件的宽或高按照预设的比例随之发生变化。
@Entry@Componentstruct Percent { build() { Row() { Text('T1') .fontSize(88) .textAlign(TextAlign.Center) .backgroundColor('#F24E4E') .width('25%') Text('T2') .fontSize(88) .textAlign(TextAlign.Center) .backgroundColor('#FFF24D') .width('50%') Text('T3') .fontSize(88) .textAlign(TextAlign.Center) .backgroundColor('#45E5E1') .width('25%') } .width('100%') }}
@Entry@Componentstruct Percent { build() { Row() { Grid() { GridItem() { Text('T1') .fontSize(88) .textAlign(TextAlign.Center) .backgroundColor('#F24E4E') .width('100%') } GridItem() { Text('T2') .fontSize(88) .textAlign(TextAlign.Center) .backgroundColor('#FFF24D') .width('100%') } GridItem() { Text('T3') .fontSize(88) .textAlign(TextAlign.Center) .backgroundColor('#45E5E1') .width('100%') } } .columnsTemplate('1fr 2fr 1fr') .width('100%') } }}