devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

46.HarmonyOS鸿蒙系统 App(ArkUI)网格布局

作者：Cpp五条 | 2024-04-23 08:23:20

赞

踩

46.HarmonyOS鸿蒙系统 App(ArkUI)网格布局

  1. Grid(){
  2.        GridItem(){
  3.  
  4.           Button('按钮1').fontSize(28)
  5.        }.backgroundColor(Color.Blue)
  6.       GridItem(){
  7.         Text('数学').fontSize(28)
  8.       }.backgroundColor(Color.Yellow)
  9.       GridItem(){
  10.         Text('语文').fontSize(28)
  11.       }.backgroundColor(Color.Green)
  12.       GridItem(){
  13.         Text('英语').fontSize(28)
  14.       }.backgroundColor(Color.Yellow)
  15.       GridItem(){
  16.         Text('化学').fontSize(28)
  17.       }.backgroundColor(Color.Blue)
  18.       GridItem(){
  19.         Text('体育').fontSize(28)
  20.       }.backgroundColor(Color.Pink)
  21.       GridItem(){
  22.         Text('美术').fontSize(28)
  23.       }.backgroundColor(Color.Green)
  24.       GridItem(){
  25.         Text('物理').fontSize(28)
  26.       }.backgroundColor(Color.Yellow)
  27.       GridItem(){
  28.         Button('按钮9').fontSize(28)
  29.       }.backgroundColor(Color.Blue)
  30.  
  31.  
  32.     }.rowsTemplate('1fr 1fr 1fr') //3行
  33.     .columnsTemplate('1fr 1fr 1fr') //两列
  34.     .columnsGap(10) //列间距
  35.     .rowsGap(15) //行间距

计算器的布局示范 

 

 

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.  
  8.     Grid(){
  9.       GridItem(){
  10.         Text('666').fontSize(28)
  11.       }.columnStart(0) //开始 1列，结束到4列
  12.       .columnEnd(3)
  13.       .backgroundColor(Color.Blue)
  14.       .rowStart(0)  //开始跨第1排
  15.       .rowEnd(1)   //结束跨第2排
  16.  
  17.       GridItem(){
  18.         Button('CE').fontSize(28)
  19.       }.backgroundColor(Color.Gray)
  20.       GridItem(){
  21.         Button('C').fontSize(28)
  22.       }.backgroundColor(Color.Gray)
  23.       GridItem(){
  24.         Button('/').fontSize(28)
  25.       }.backgroundColor(Color.Gray)
  26.       GridItem(){
  27.         Button('X').fontSize(28)
  28.       }.backgroundColor(Color.Gray)
  29.  
  30.       GridItem(){
  31.         Button('7').fontSize(28)
  32.       }.backgroundColor(Color.Gray)
  33.       GridItem(){
  34.         Button('8').fontSize(28)
  35.       }.backgroundColor(Color.Gray)
  36.       GridItem(){
  37.         Button('9').fontSize(28)
  38.       }.backgroundColor(Color.Gray)
  39.       GridItem(){
  40.         Button('-').fontSize(28)
  41.       }.backgroundColor(Color.Gray)
  42.  
  43.       GridItem(){
  44.         Button('4').fontSize(28)
  45.       }.backgroundColor(Color.Gray)
  46.       GridItem(){
  47.         Button('5').fontSize(28)
  48.       }.backgroundColor(Color.Gray)
  49.       GridItem(){
  50.         Button('6').fontSize(28)
  51.       }.backgroundColor(Color.Gray)
  52.       GridItem() {
  53.         Button('+').fontSize(28)
  54.       }.backgroundColor(Color.Gray)
  55.  
  56.       GridItem() {
  57.         Button('1').fontSize(28)
  58.       }.backgroundColor(Color.Gray)
  59.       GridItem() {
  60.         Button('2').fontSize(28)
  61.       }.backgroundColor(Color.Gray)
  62.       GridItem() {
  63.         Button('3').fontSize(28)
  64.       }.backgroundColor(Color.Gray)
  65.       GridItem() {
  66.         Button('=').fontSize(28)
  67.       }.backgroundColor(Color.Gray)
  68.       .rowStart(5)
  69.       .rowEnd(6)
  70.       GridItem() {
  71.         Button('0').fontSize(28)
  72.       }.backgroundColor(Color.Gray)
  73.       .columnStart(0)
  74.       .columnEnd(1)
  75.       GridItem() {
  76.         Button('.').fontSize(28)
  77.       }.backgroundColor(Color.Gray)
  78.  
  79.     }.columnsTemplate('1fr 1fr 1fr 1fr')
  80.     .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
  81.     .rowsGap(15)
  82.     .columnsGap(15)
  83.  
  84.  
  85.   }
  86. }

网格布局是由“行”和“列”分割的单元格所组成的，它通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供的Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

布局和约束

Grid组件为网格容器，其中容器内每一个条目对应一个GridItem组件，如下图所示。

图1 Grid和GridItem组件的关系

说明

Grid的子组件必须是GridItem组件。

网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局，如下图所示。

图2 网格布局

如果Grid组件设置了宽高属性，则其尺寸为设置值。如果没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。

Grid组件根据行列数量与占比属性的设置，可以分为三种布局情况：

  • 行、列数量与占比同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。（推荐使用该种布局方式）
  • 只设置行、列数量与占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。
  • 行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且Grid不可滚动。

设置排列方式

设置行列数量与占比

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

图3 行列数量占比示例

如上图所示，构建的是一个三行三列的的网格布局，其在垂直方向上分为三等份，每行占一份；在水平方向上分为四等份，第一列占一份，第二列占两份，第三列占一份。

只要将rowsTemplate的值为'1fr 1fr 1fr'，同时将columnsTemplate的值为'1fr 2fr 1fr'，即可实现上述网格布局。

 

  1. Grid() {
  2. ...
  3. }
  4. .rowsTemplate('1fr 1fr 1fr')
  5. .columnsTemplate('1fr 2fr 1fr')
 

说明
 

当Grid组件设置了rowsTemplate或columnsTemplate时，Grid的layoutDirection、maxCount、minCount、cellLength属性不生效，属性说明可参考Grid-属性。
 

设置子组件所占行列数
 

除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见，如下图所示。在Grid组件中，通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现如图所示的单个网格横跨多行或多列的场景。
 

图4 不均匀网格布局
 

 


                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/472951
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号