网站导航
> 技术文档 > 鸿蒙应用开发--UI开发实战_rowstemplate

鸿蒙应用开发--UI开发实战_rowstemplate

网友: 技术文档 2025-07-30 12:32:49

鸿蒙应用开发–UI开发示例（计算器）

容器组件>Grid（网格布局）

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
Grid组件⽀持⾃定义⾏数和列数以及每⾏和每列的尺⼨⼤⼩， 上述内容需要使⽤columnsTempate()方法和rowsTemplate()方法进行设置，具体如下：
代码：

Grid() {ForEach([1, 2, 3, 4, 5, 6, 7, 8,9], (item) => {GridItem() {Text(item.toString()).itemTextStyle()}})}.width(320).height(240).rowsTemplate(\'1fr 1fr 1fr\').columnsTemplate(\'1fr 2fr 1fr\').gridStyle()

说明：
fr 为 fraction(⽐例 、分数) 的缩写 。 fr 的个数表示⽹格布局的⾏数或列数， fr 前⾯的数值⼤⼩， 表示该⾏或列的尺⼨占⽐
效果：
鸿蒙应用开发--UI开发实战_rowstemplate

子组件GridItem

Grid(){GridItem(){}}.rowsTemplate(\'1fr 1fr 1fr 1fr 1fr 1fr\') //6行 设置网格列的数量 .columnsTemplate(\'1fr 1fr 1fr 1fr\') //4列 设置网格行的数量 .rowsGap(10) //行与行的间距 .columnsGap(10) //列与列的间距 .scrollBar(BarState.Off) //设置滚动条状态 默认值为：off,其他（On,Auto） .scrollBarColor(Color.颜色) //滚动条颜色

GridItem组件⽀持横跨⼏⾏或者⼏列， 如下图所示
鸿蒙应用开发--UI开发实战_rowstemplate说明：
Grid容器中的⾏号和列号均从0开始。

Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式：

  1. rowsTemplate、columnsTemplate同时设置：

  • Grid的宽高没有设置时，默认适应父组件尺寸。

  • Grid的宽高没有设置时，默认适应父组件尺寸。

  • Grid网格列大小按照Grid自身内容区域大小减去所有行列Gap后按各个行列所占比重分配。

2.rowsTemplate、columnsTemplate仅设置其中的一个：

  • 元素排布后，超出Grid区域，Grid可通过滚动的方式展示.
  • 如果设置了columnsTemplate，Grid滚动方向为垂直方向，主轴方向为垂直方向，交叉轴方向为水平方向。
  • 反之，如果设置了rowsTemplate，Grid滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。

3.rowsTemplate、columnsTemplate都不设置：

行数由Grid高度、首个元素高度、cellLength、rowsGap共同决定。超出行列容纳范围的元素不显示，也不能通过滚动进行展示。

行列间距

使用rowsGap()和columnsGap()属性，可以控制行列间距，具体用法如下：
代码：

Grid(){......}.columnsGap(20).rowsGap(20)

效果：
鸿蒙应用开发--UI开发实战_rowstemplate

练习：简单设计一个计算器

//计算器，相关属性进行封装

/*** 作业：计算器* * */import { ShapeClip } from \'@kit.ArkUI\'@Entry@Componentstruct CalculatorTest{ build() { Column(){ Grid(){ GridItem(){ Text(\'0\').myTextStyle() }.columnStart(0).columnEnd(3) GridItem(){ Text(\'CE\').myButtonTextStyle() } GridItem(){ Text(\'C\').myButtonTextStyle() } GridItem(){ Text(\'%\').myButtonTextStyle() } GridItem(){ Text(\'*\').myButtonTextStyle() } GridItem(){ Text(\'7\').myButtonTextStyle() } GridItem(){ Text(\'8\').myButtonTextStyle() } GridItem(){ Text(\'9\').myButtonTextStyle() } GridItem(){ Text(\'-\').myButtonTextStyle() } GridItem(){ Text(\'4\').myButtonTextStyle() } GridItem(){ Text(\'5\').myButtonTextStyle() } GridItem(){ Text(\'6\').myButtonTextStyle() } GridItem(){ Text(\'+\').myButtonTextStyle() } GridItem(){ Text(\'1\').myButtonTextStyle() } GridItem(){ Text(\'2\').myButtonTextStyle() } GridItem(){ Text(\'3\').myButtonTextStyle() } GridItem(){ Text(\'=\').myButtonTextStyle().backgroundColor(0xFF1AA1E3) }.rowStart(5).rowEnd(6) GridItem(){ Text(\'0\').myButtonTextStyle() }.columnStart(1).columnEnd(2) GridItem(){ Text(\'.\').myButtonTextStyle() } }.gridStyle() .rowsTemplate(\'1fr 1fr 1fr 1fr 1fr 1fr\') //6行 .columnsTemplate(\'1fr 1fr 1fr 1fr\') //4列 }.width(\'100%\').height(\'100%\') }}@Extend(Text) function myTextStyle() { .backgroundColor(\'#bac8d3\') .height(\'100%\') .width(\'100%\') .textAlign(TextAlign.End) .padding(10) .borderRadius(10) .borderWidth(1) .fontSize(40) .fontWeight(FontWeight.Bold)}//内容组件@Extend(Text) function myButtonTextStyle(){ .width(\'100%\') .height(\'100%\') .borderRadius(10) .fontSize(25) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .borderWidth(2) .borderColor(Color.Gray) .padding(10)}@Extend(Grid) function gridStyle(){ .width(320) .height(480) .borderWidth(3) .borderColor(Color.Black) .borderRadius(25) .padding(10) .rowsGap(10) .columnsGap(10)}

运行示例图
在这里插入图片描述
🚀 现在，关闭这篇博客，打开DevEco Studio，开始你的第一个commit吧！
未来，我们鸿蒙生态见！ 💪
鸿蒙应用开发--UI开发实战_rowstemplate
声明：一些示例图非原创，侵权可删

网络标签：

相关问题