鸿蒙开发之ArkUI 界面篇 十七 购物综合案例

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

原文地址：https://blog.csdn.net/renfujiang/article/details/142414723

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！