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