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