• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 栅格布局
2
3
4栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.md)。
5
6
7## 创建grid-container组件
8
9在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
10
11
12```html
13<!-- index.hml -->
14<div class="container">
15  <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
16    <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
17      10%;"></grid-row>
18    <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
19    <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
20  </grid-container>
21</div>
22```
23
24
25```css
26/* xxx.css */
27.container{
28  flex-direction: column;
29  background-color: #F1F3F5;
30  margin-top: 500px;
31  justify-content: center;
32  align-items: center;
33}
34```
35
36![zh-cn_image_0000001226897009](figures/zh-cn_image_0000001226897009.png)
37
38> **说明：**
39> grid-container仅支持grid-row为子组件。
40
41
42## 调用方法
43
44grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
45
46
47```html
48<!-- index.hml -->
49<div class="container">
50  <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;"
51    onclick="getColumns" onlongpress="getSizeType">
52    <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left:
53      40%;"></grid-row>
54    <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
55      25%;"></grid-row>
56    <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
57      10%;"></grid-row>
58    <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
59  </grid-container>
60</div>
61```
62
63
64```css
65/* xxx.css */
66.container{
67  flex-direction: column;
68  background-color: #F1F3F5;
69  margin-top: 400px;
70  justify-content: center;
71  align-items: center;
72}
73```
74
75
76```js
77// index.js
78import promptAction from '@ohos.promptAction';
79export default {
80  data:{
81    gutterWidth:'',
82    columnWidth:'',
83    columns:'',
84  },
85  getColumns(){
86    this.$element('mygrid').getColumnWidth((result)=>{
87      this.columnWidth = result;
88    })
89    this.$element('mygrid').getGutterWidth((result)=>{
90      this.gutterWidth = result;
91    })
92    this.$element('mygrid').getColumns((result)=>{
93      this.columns= result;
94    })
95    setTimeout(()=>{
96      promptAction.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
97      this.gutterWidth+',getColumns:'+this.columns})
98    })
99  },
100  getSizeType(){
101      this.$element('mygrid').getSizeType((result)=>{
102      promptAction.showToast({duration:2000,message:'get size type:'+result})
103    })
104  },
105}
106```
107
108![zh-cn_image_0000001227135613](figures/zh-cn_image_0000001227135613.gif)
109
110
111## 添加grid-col
112
113创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
114
115
116```html
117<!-- index.hml -->
118<div class="container">
119  <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
120    <grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
121      <grid-col span="0">
122        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
123          <text style="color: dodgerblue;" onclick="getCol">top</text>
124        </div>
125      </grid-col>
126    </grid-row>
127    <grid-row style="height:500px;justify-content:space-around;background-color: #3b55ef;width: 100%;">
128      <grid-col span="0" style="width: 20%;">
129        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
130          <text style="color: dodgerblue;">left</text>
131        </div>
132      </grid-col>
133      <grid-col span="0" style="background-color:orange;width: 80%;">
134        <div style="width: 100%;height: 100%;align-items: center;justify-content: center;">
135          <text>right</text>
136        </div>
137      </grid-col>
138    </grid-row>
139    <grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
140      <grid-col style="background-color:#c075ef;" span="0">
141        <div style="width: 100%;height: 100%;padding: 20px;align-items: center;justify-content: center;">
142          <text>bottom</text>
143        </div>
144      </grid-col>
145    </grid-row>
146  </grid-container>
147</div>
148```
149
150
151```css
152/* xxx.css */
153.container{
154  flex-direction: column;
155  background-color: #F1F3F5;
156  width: 100%;
157  height: 100%;
158  justify-content: center;
159  align-items: center;
160}
161text{
162  color: white;
163  font-size: 40px;
164}
165```
166
167![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png)
168
169> **说明：**
170> grid-row仅支持grid-col为子组件，只能在grid-col组件中添加填充的内容。
171
172
173## 场景示例
174
175本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。
176
177
178```html
179<!-- index.hml -->
180<div class="container">
181  <refresh refreshing="{{fresh}}" onrefresh="refresh">
182    <grid-container id="mygrid" gutter="20" style="margin: 10px;">
183      <grid-row style="height:200px;width: 100%;background-color: #e7e7e2;margin-top: 50px; padding: 0px 20px;border-radius: 15px;" for="item in list">
184        <grid-col span="0" style="width: 40%;">
185          <div style="align-items: center;justify-content: center">
186            <image src="{{item.src}}" style="object-fit: contain;border-radius: 30px;"></image>
187          </div>
188        </grid-col>
189        <grid-col span="0" style="width: 60%;">
190          <div style="align-items: center;justify-content: center;width: 100%;height: 100%;text-align: center;">
191            <text>image{{item.id}}</text>
192          </div>
193        </grid-col>
194      </grid-row>
195    </grid-container>
196  </refresh>
197</div>
198```
199
200
201```css
202/* xxx.css */
203.container{
204  flex-direction: column;
205  background-color: #F1F3F5;
206  width: 100%;
207  height: 100%;
208}
209text{
210  color: #0a0aef;
211  font-size: 60px;
212}
213```
214
215
216```js
217// index.js
218import promptAction from '@ohos.promptAction';
219export default {
220  data:{
221    list:[
222      {src:'common/images/1.png',id:'1'},
223      {src:'common/images/2.png',id:'2'},
224      {src:'common/images/3.png',id:'3'}
225    ],
226    fresh:false
227  },
228  refresh(e) {
229    promptAction.showToast({
230      message: 'refreshing'
231    })
232    var that = this;
233    that.fresh = e.refreshing;
234    setTimeout(function () {
235      that.fresh = false;
236      that.list.unshift({src: 'common/images/4.png',id:'4'});
237      promptAction.showToast({
238        message: 'succeed'
239      })
240    }, 2000)
241  }
242}
243```
244
245
246![zh-cn_image_0000001263160403](figures/zh-cn_image_0000001263160403.gif)
247