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%')} }