layoutWeight:子元素与兄弟元素主轴方向按照权重进行分配,参数是联合类型,数字或者是字符串,在指定的空间占多少份额,数字越大,表示在空间中占用的份额越多,如果父容器的子组件没有别的指定,剩下的空间全部指定给设定为layoutWeight的控件,要实现下图:
如果不加. layoutWeight(1),其结果显示如下图:
加上后显示正常,如下图:
综合分析这个实现的原理是:整体一个Colum布局,从上到下一个垂直布局,从上到下第一个组件是Image,第二个是Text,第三个是Row容器,row容器是的里面在包括两个子容器,因为昵称可能会比较长,所以把剩余的空间全部分配给他的父容器,他自然也就会去适应宽度,其完整代码如下图所示:
@Entry @Component struct IndexTest { @State message: string = 'IndexTest'; build() { Column(){ Column(){ Image($r('app.media.nick')) .borderRadius({ topLeft:10, topRight:10 }) Text('今天买这个 | 每日艺术分享NO.98') .fontWeight(666) .fontSize(18) .lineHeight(22) .margin({ top:10, right:5, left:5 }) Row(){ Row(){ Image($r('app.media.m_user')) .width(24) .borderRadius(12) Text('值得买就是好东西') .fontSize(10) .fontColor('#999') } // .backgroundColor(Color.Orange) . layoutWeight(1) .margin({ top:10, right:5, left:10 }) Row(){ Image($r('app.media.ic_like')) .width(12) .fillColor('#999') .margin({ right:5 }) Text('4590') .fontSize(10) .fontColor('#666') } } .margin({ left:5 }) }.backgroundColor(Color.White) .width(200) .height(200) }.padding(10) .width('100%') .height('100%') } }