鸿蒙应用开发–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 前⾯的数值⼤⼩， 表示该⾏或列的尺⼨占⽐
效果：

子组件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组件⽀持横跨⼏⾏或者⼏列， 如下图所示
说明：
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)
	

效果：

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

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

/*

*
* 作业：计算器
*
 * */
import { ShapeClip } from '@kit.ArkUI'

@Entry
@Component
struct 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吧！
未来，我们鸿蒙生态见！ 💪

声明：一些示例图非原创，侵权可删