HarmonyOS 鸿蒙Next Grid GridItem 如何设置宽高相等

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

HarmonyOS 鸿蒙Next Grid GridItem 如何设置宽高相等

Grid() {
  ForEach(this.talkDetails.postsUrl, (imageUrl:string)=>{
    GridItem () {
      Image(imageUrl)
      .width("100%")
      .height() // 和宽度一样
        .borderRadius(4)
    }
    .width("100%")
  })
}
.rowsGap(8)
.columnsGap(8)
.maxCount(9)
.columnsTemplate("1fr 1fr 1fr")

更多关于HarmonyOS 鸿蒙Next Grid GridItem 如何设置宽高相等的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

设置组件属性 .aspectRatio(1)，则组件宽高比为 1，达到宽高相等的效果。

更多关于HarmonyOS 鸿蒙Next Grid GridItem 如何设置宽高相等的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，如果你希望为GridItem设置宽高相等，可以通过布局属性或直接在代码中设置其宽度和高度。以下是一种方法，利用布局文件中的属性设置来实现：

  1. XML布局文件设置： 在定义GridItem的布局文件中，可以使用ohos:width和ohos:height属性，并设置它们为相同的值，或者使用ohos:layout_constraintDimensionRatio属性来保持宽高比。例如：

    <GridItem
    ohos:id="$+id:grid_item"
    ohos:width="match_parent"
    ohos:height="0dp"
    ohos:layout_constraintTop_toTopOf="parent"
    ohos:layout_constraintBottom_toBottomOf="parent"
    ohos:layout_constraintLeft_toLeftOf="parent"
    ohos:layout_constraintRight_toRightOf="parent"
    ohos:layout_constraintDimensionRatio="1:1"/>

    这里，ohos:layout_constraintDimensionRatio="1:1"确保了GridItem的宽高相等。注意，此时高度设为0dp是因为使用了约束布局来动态计算高度。

  2. 代码中设置： 如果需要在代码中动态设置，可以通过组件的setWidth和setHeight方法设置相同的值。

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

回到顶部