仓颉鸿蒙HarmonyOS NEXT原生UI组件Grid

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。​

子组件

Grid包含GridItem子组件。​

构造函数

说明

混合页面场景下Grid创建时暂不支持scroller参数。

init()

public init()

创建一个 Grid 容器。

init(Scroller)

public init(scroller: Scroller)

创建一个包含滚动控制器的Grid容器。

参数名	参数类型	必填	默认值	描述
scroller	Scroller	是	-	可滚动组件的控制器，与可滚动组件绑定。

init(() -> Unit)

public init(child: () -> Unit)

创建一个可包含子组件的 Grid 容器。

参数名	参数类型	必填	默认值	描述
child	() -> Unit	是		Swiper 容器的子组件。

init(Scroller, () -> Unit)

public init(scroller: Scroller, child: () -> Unit)

创建一个包含滚动控制器并且可包含子组件的Grid容器。

参数名	参数类型	必填	默认值	描述
scroller	Scroller	是	-	可滚动组件的控制器，与可滚动组件绑定。
child	() -> Unit	是		Swiper 容器的子组件。

函数

columnsTemplate(String)

设置当前网格布局列的数量或最小列宽值，不设置时默认 1 列。

说明

设置为’0fr’时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。

public func columnsTemplate(value: String): This

参数名	参数类型	默认值	属性描述
columnsTemplate	String	"1fr"	用于设置当前网格布局列的数量，不设置或者设置成""时默认 1 列 示例, "1fr 1fr 2fr" 分三列，将父组件允许的宽分为 4 等份，第一列占 1 份，第二列占一份，第三列占 2 份。

rowsTemplate(String)

public func rowsTemplate(value: String): This

设置当前网格布局行的数量或最小行高值，不设置时默认1行。

说明

设置为’0fr’，则这一行的行宽为0，这一行 GridItem 不显示。设置为其他非法值，按固定1行处理。

参数名	参数类型	必填	默认值	描述
rowsTemplate	String	否	"1fr"	用于设置当前网格布局行的数量，不设置或者设置成""时默认 1 行 示例, "1fr 1fr 2fr"分三行，将父组件允许的高分为 4 等份，第一行占 1 份，第二行占 1 份，第三行占 2 份。

columnsGap(Length)

public func columnsGap(value: Length): This

设置列与列的间距。

说明

设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
columnsGap	Length	否	0	用于设置列与列的间距。

columnsGap(Float64)

public func columnsGap(value: Float64): This

设置列与列的间距。

说明

设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
columnsGap	Float64	否	0	用于设置列与列的间距。

columnsGap(Int64)

public func columnsGap(value: Int64): This

设置列与列的间距。

说明

设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
columnsGap	Int64	否	0	用于设置列与列的间距。

rowsGap(Length)

public func rowsGap(value: Length): This

设置行与行的间距。

说明

设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
rowsGap	Length	否	0	用于设置行与行的间距。

rowsGap(Float64)

public func rowsGap(value: Float64): This

设置行与行的间距。

说明

设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
rowsGap	Float64	否	0	用于设置行与行的间距。

rowsGap(Int64)

public func rowsGap(value: Int64): This

设置行与行的间距。

说明

设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
rowsGap	Int64	否	0	用于设置行与行的间距。

cachedCount(Int32)

public func cachedCount(cacheCount: Int32): This

设置预加载的GridItem的数量，只在LazyForEach中生效。

说明

设置缓存后会在Grid显示区域上下各缓存"cachedCount*列数"个GridItem。
LazyForEach超出显示和缓存范围的GridItem会被释放。
cachedCount设置为小于0的值时，按默认值显示。

参数名	参数类型	必填	默认值	描述
cachedCount	Int32	否	1	设置预加载的 GridItem 的数量。

事件

onScrollIndex((UInt32)->Unit)

public func onScrollIndex(callback: (UInt32)->Unit): This

参数名	参数类型	描述
callback	(UInt32)->Unit	当前列表显示的起始位置 item 发生变化时触发。

通用属性/通用事件

通用属性：除文本样式外，其余全部支持。

通用事件：全部支持。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
          @State var numbers: ArrayList<String> = ArrayList(["0", "1", "2", "3",
          "4", "5", "6", "7",
          "8", "9", "10", "11",
          "12", "13", "14", "15"])
          func build() {
              Column() {
                Grid {
                  GridItem {
                    Text("4")
                      .fontSize(16)
                      .backgroundColor(0xFAEEE0)
                      .width(100.percent)
                    .height(100.percent)
                    .textAlign(TextAlign.Center)
                  }
                  .rowStart(1)
                    .rowEnd(4)
                  ForEach(this.numbers, itemGeneratorFunc: {num: String, idx: Int64 =>
                  GridItem {
                    Text(num)
                      .fontSize(16)
                      .backgroundColor(0xF9CF93)
                      .width(100.percent)
                    .height(100.percent)
                    .textAlign(TextAlign.Center)
                  }
                  })
                  GridItem {
                    Text("5")
                      .fontSize(16)
                      .backgroundColor(0xDBD0C0)
                      .width(100.percent)
                    .height(100.percent)
                    .textAlign(TextAlign.Center)
                  }
                  .columnStart(1)
                    .columnEnd(5)
                }
                .columnsTemplate("1fr 1fr 1fr 1fr 1fr")
                .rowsTemplate("1fr 1fr 1fr 1fr 1fr")
                .width(90.percent)
                .backgroundColor(0xFAEEE0)
                .height(300)
              }
            .width(100.percent)
            .margin(top: 5)
        }
    }

​

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191” 备注cangjie