> 文档中心 > 【鸿蒙应用开发高手之路】04_自适应布局之占比能力

【鸿蒙应用开发高手之路】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%')    }  }}