HarmonyOS 鸿蒙Next layoutWeight

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next layoutWeight

主要代码

Row() {
  Image(this.avatar)
    .width(80)
    .height(98)
    .borderRadius(4)
  Column() {
    Row() {
      Text(this.userBean.name)
        .fontSize(18)
        .fontColor(Color.White)
        .margin({ left: 18, top: 8 })
        .ellipsisMode(EllipsisMode.END)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontWeight(FontWeight.Bold)
      Text(" | ")
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 8 })
      Text(this.userBean.genderDesc)
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 8 })
      Text(DateUtil.getFormatDateStr(DateUtil.getFormatDate(this.userBean.birthday), "yyyy-MM-dd"))
        .fontSize(13)
        .margin({ left: 11, top: 8 })
        .padding({
          left: 9,
          right: 9,
          top: 2,
          bottom: 2
        })
        .borderRadius(12)
        .backgroundColor("#33ffffff")
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
    }.width('100%').alignItems(VerticalAlign.Top).margin({ top: 8 })

    Text(this.desc_post)
      .fontSize(14)
      .ellipsisMode(EllipsisMode.END)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .fontColor("#D6FFFFFF")
      .backgroundColor(Color.Red)
      .margin({ left: 18, right: 18, top: 17 })
      .constraintSize({maxHeight:'100%'})
      .maxLines(1)
      .layoutWeight(1)
  }.alignItems(HorizontalAlign.Start)
}.alignItems(VerticalAlign.Top).margin({ top: 8 })

更多关于HarmonyOS 鸿蒙Next layoutWeight的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

你的layoutWeight设置在Column里面，所以是上下拉伸，如果是Row里面，就会是左右拉伸，取决于父组件的布局方向

更多关于HarmonyOS 鸿蒙Next layoutWeight的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，layoutWeight 属性通常用于在布局中分配子视图的空间比例。这一属性类似于Android中的layout_weight，用于在水平或垂直方向上根据指定的权重分配剩余空间。

在鸿蒙的布局文件中（如XML布局），如果你希望某个子视图根据其layoutWeight属性值相对于其他子视图占据更多的空间，你可以这样设置：

  1. 确保父布局容器支持layoutWeight属性，例如使用DirectionalLayout或StackLayout（在特定情况下）并设置其orientation属性为horizontal或vertical。

  2. 为需要分配权重的子视图设置layoutWeight属性。例如，如果你有两个子视图，并希望第一个视图占据2/3的空间，第二个视图占据1/3的空间，你可以这样设置：

<DirectionalLayout
    ...
    orientation="horizontal">
    <ChildView1
        ...
        layoutWeight="2"/>
    <ChildView2
        ...
        layoutWeight="1"/>
</DirectionalLayout>

在这个例子中，ChildView1将根据layoutWeight值相对于ChildView2占据更多的空间。

请注意，layoutWeight仅在父布局有足够的剩余空间进行分配时才有效。如果父布局本身没有足够的空间，子视图可能无法按照预期的权重比例显示。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部