【鸿蒙学习笔记】尺寸设置・layoutWeight・对子组件进行重新布局
官方文档:尺寸设置
目录标题
- layoutWeight:对子组件进行重新布局
layoutWeight:对子组件进行重新布局
设置了layoutWeight
属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略
元素本身尺寸设置。
// 引入包名
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct PracExample {build() {Column() {Row() {Text('1/3').backgroundColor(Color.Pink).textAlign(TextAlign.Center).size({ width: '30%', height: 110 })Text('2/3').backgroundColor(Color.Green).textAlign(TextAlign.Center).size({ width: '30%', height: 110 })Text('no').backgroundColor(Color.Yellow).textAlign(TextAlign.Center).size({ width: '10%', height: 110 })}.backgroundColor(Color.Gray).size({ width: '100%', height: 140 })Divider().height(10)Row() {// 权重1,占主轴剩余空间1/3Text('1/3').backgroundColor(Color.Pink).textAlign(TextAlign.Center).size({ width: '30%', height: 110 }).layoutWeight(1)// 权重2,占主轴剩余空间2/3Text('2/3').backgroundColor(Color.Green).textAlign(TextAlign.Center).size({ width: '30%', height: 110 }).layoutWeight(2)// 未设置,组件按照自身尺寸渲染Text('no').backgroundColor(Color.Yellow).textAlign(TextAlign.Center).size({ width: '10%', height: 110 })}.backgroundColor(Color.Black).size({ width: '100%', height: 140 })}}
}