Grid

网格容器，子组件必须是GridItem

fr

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 1@Builder
 2function navBox(activityTitle: Array<string>) {
 3  Grid() {
 4    ForEach(activityTitle, (item: string, index: number) => {
 5      GridItem() {
 6        Text(item)
 7          .fontColor(Color.White)
 8      }
 9      .backgroundColor(Color.Blue)
10    }, (item: string) => item)
11  }
12  .rowsTemplate('1fr 1fr')
13  .columnsTemplate('1fr 2fr 1fr 1fr')
14  .rowsGap(10)
15  .columnsGap(10)
16  .width('100%')
17  .height(180)
18  .border({
19    width: 1,
20    color: Color.Brown
21  })
22  .margin({
23    top: 16
24  })
25}

方向

1
1.layoutDirection(GridDirection.Column)

滚动

只设置rowsTemplate、columnsTemplate其中一个，需要自定义GridItem宽或高

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 1@Builder
 2function navBox(activityTitle: Array<string>) {
 3  Grid() {
 4    ForEach(activityTitle, (item: string, index: number) => {
 5      GridItem() {
 6        Text(item)
 7          .fontColor(Color.White)
 8      }
 9      .width(162)
10      .backgroundColor(Color.Blue)
11    }, (item: string) => item)
12  }
13  .rowsTemplate('1fr 1fr')
14  //.columnsTemplate('1fr 2fr 1fr 1fr')
15  //.layoutDirection(GridDirection.Column) // 控制元素显示方向
16  .rowsGap(10)
17  .columnsGap(10)
18  .width('100%')
19  .height(180)
20  .border({
21    width: 1,
22    color: Color.Brown
23  })
24  .margin({
25    top: 16
26  })
27}

抽取数据

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
  1import { BreakPointConstants } from "../constants/BreakPointConstants"
  2import { ActivityDataModel, SwiperDataModel } from '../viewModel/HomeModel'
  3
  4@Builder
  5function searchBox() {
  6  Column() {
  7    Flex({
  8      justifyContent: FlexAlign.SpaceBetween
  9    }) {
 10      Image($r('app.media.startIcon'))
 11        .width(28)
 12      Image($r('app.media.startIcon'))
 13        .width(28)
 14    }
 15    .height(30)
 16    .width('100%')
 17    .margin({
 18      bottom: 8
 19    })
 20
 21    // 搜索框设计
 22    Row() {
 23      Image($r('app.media.startIcon'))
 24        .width(20)
 25        .margin({
 26          left: 12
 27        })
 28    }
 29    .height(40)
 30    .width('100%')
 31    .backgroundColor(Color.White)
 32    .borderRadius(20)
 33  }
 34}
 35
 36@Builder
 37function swiperBox(currentBreakPoint: string, arr: Array<SwiperDataModel>) {
 38  Swiper() {
 39    ForEach(arr, (item: SwiperDataModel, index: number) => {
 40      Image($r(item.image_src))
 41        .width('100%')
 42        .height(160)
 43    }, (item: SwiperDataModel) => item.id)
 44  }
 45  .indicator(true)
 46  .itemSpace(currentBreakPoint == BreakPointConstants.BREAKPOINT_LG ? 10 : 0)
 47  .width('100%')
 48  .autoPlay(true)
 49  .borderRadius(16)
 50  .margin({
 51    top: 20
 52  })
 53  .displayCount(currentBreakPoint == BreakPointConstants.BREAKPOINT_LG ? 2 : 1)
 54}
 55
 56@Builder
 57function navBox(activityTitle: Array<ActivityDataModel>) {
 58  Grid() {
 59    ForEach(activityTitle, (item: ActivityDataModel, index: number) => {
 60      GridItem() {
 61        Column() {
 62          Image($r(item.image_src))
 63            .width(60)
 64          Text(item.name)
 65        }
 66      }
 67    }, (item: ActivityDataModel) => item.id)
 68  }
 69  .rowsTemplate('1fr 1fr')
 70  .columnsTemplate('1fr 1fr 1fr 1fr')
 71  .rowsGap(10)
 72  .columnsGap(10)
 73  .width('100%')
 74  .height(180)
 75  .margin({
 76    top: 16
 77  })
 78}
 79
 80
 81@Component
 82export struct Home {
 83  @StorageProp(BreakPointConstants.CURRENT_BREAKPOINT) currentBreakPoint: string = BreakPointConstants.BREAKPOINT_SM
 84  @State swiperData: Array<string> = [
 85    'app.media.bird',
 86    'app.media.animal',
 87    'app.media.bird',
 88    'app.media.animal'
 89  ]
 90  @State activityTitle: Array<string> = ['1', '2', '3', '4', '5', '6', '7', '8']
 91  @State activityData: Array<ActivityDataModel> = [
 92    {
 93      id: '1',
 94      name: '旅行',
 95      image_src: 'app.media.startIcon',
 96      navigator_url: '',
 97      open_type: ''
 98    },
 99    {
100      id: '2',
101      name: '美食',
102      image_src: 'app.media.startIcon',
103      navigator_url: '',
104      open_type: ''
105    },
106    {
107      id: '3',
108      name: '周边',
109      image_src: 'app.media.startIcon',
110      navigator_url: '',
111      open_type: ''
112    },
113    {
114      id: '4',
115      name: '电子',
116      image_src: 'app.media.startIcon',
117      navigator_url: '',
118      open_type: ''
119    },
120    {
121      id: '5',
122      name: '话费',
123      image_src: 'app.media.startIcon',
124      navigator_url: '',
125      open_type: ''
126    },
127  ]
128  @State swiperDataList: Array<SwiperDataModel> = [
129    {
130      id: '1',
131      good_id: 'p1',
132      image_src: 'app.media.bird',
133      navigator_url: '',
134      open_type: ''
135    },
136    {
137      id: '2',
138      good_id: 'p2',
139      image_src: 'app.media.animal',
140      navigator_url: '',
141      open_type: ''
142    },
143    {
144      id: '3',
145      good_id: 'p3',
146      image_src: 'app.media.bird',
147      navigator_url: '',
148      open_type: ''
149    },
150    {
151      id: '4',
152      good_id: 'p4',
153      image_src: 'app.media.animal',
154      navigator_url: '',
155      open_type: ''
156    },
157    {
158      id: '5',
159      good_id: 'p5',
160      image_src: 'app.media.bird',
161      navigator_url: '',
162      open_type: ''
163    },
164  ]
165
166  build() {
167    Column() {
168      Stack({
169        alignContent: Alignment.Top
170      }) {
171        // 背景图
172        Image($r('app.media.background'))
173          .width('100%')
174          .height(220)
175          .borderRadius({
176            bottomLeft: 30,
177            bottomRight: 30
178          })
179          .objectFit(ImageFit.Auto)
180
181        // 弹性盒子, 内容布局
182        Flex({
183          direction: FlexDirection.Column
184        }) {
185          // 搜索模块
186          searchBox()
187          // 轮播图片
188          swiperBox(this.currentBreakPoint, this.swiperDataList)
189          // 楼层模块
190          navBox(this.activityData)
191          // 商品列表
192        }
193        .padding({
194          left: 12,
195          right: 12,
196          top: 10
197        })
198      }
199    }
200    .backgroundColor('#f1f3f5')
201    .width('100%')
202    .height('100%')
203    .justifyContent(FlexAlign.Start)
204    .alignItems(HorizontalAlign.Start)
205  }
206}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
## 1/**
 2 * 约束轮播数据格式
 3 */
 4export class SwiperDataModel {
 5  id: string = ''
 6  good_id: string = ''
 7  image_src: string = ''
 8  navigator_url: string = ''
 9  open_type: string = ''
10}
11
12/**
13 * 约束活动列表数据格式
14 */
15export class ActivityDataModel {
16  id: string = ''
17  name: string = ''
18  image_src: string = ''
19  navigator_url: string = ''
20  open_type: string = ''
21}

九宫格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 1import { BasicConstants } from '../constants/BasicConstants'
 2import { BreakPointSystem } from '../utils/BreakPointSystem'
 3import { BreakPointConstants } from '../constants/BreakPointConstants'
 4import { Home } from '../view/Home'
 5import { Product } from '../view/Product'
 6import { Good } from '../view/Good'
 7import { Personal } from '../view/Personal'
 8
 9@Entry
10@Component
11struct Index {
12  @State numbers: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
13  layoutOptions1: GridLayoutOptions = {
14    regularSize: [1, 1],
15    onGetRectByIndex: (index: number) => {
16      if (index == 0) {
17        return [0, 0, 1, 1]
18      } else {
19        return [0, 0, 1, 1]
20      }
21    }
22  }
23
24  build() {
25    Column({ space: 5 }) {
26      Grid(null, this.layoutOptions1) {
27        ForEach(this.numbers, (item: number, index: number) => {
28          GridItem() {
29            Text(item.toString())
30              .fontSize(16)
31              .backgroundColor(0xf9cf93)
32          }
33          .backgroundColor(Color.Pink)
34        }, (item: number) => item.toString())
35      }
36      .columnsTemplate('1fr 1fr 1fr')
37      .rowsTemplate('1fr 1fr 1fr')
38      .columnsGap(10)
39      .rowsGap(10)
40      .width('90%')
41      .height(400)
42      .backgroundColor(0xfaeee0)
43    }
44    .width('100%')
45    .margin({
46      top: 10
47    })
48  }
49}

自定义

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 1@Entry
 2@Component
 3struct Index {
 4  @State numbers: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 5  layoutOptions1: GridLayoutOptions = {
 6    regularSize: [1, 1],
 7    onGetRectByIndex: (index: number) => {
 8      if (index == 0) {
 9        // [rowStart, columnStart, rowSpan, columnSpan]
10        return [0, 0, 1, 2]
11      } else if (index == 1) {
12        return [0, 1, 2, 1]
13      } else if (index == 2) {
14        return [1, 0, 2, 1]
15      } else if (index == 4) {
16        return [2, 1, 1, 2]
17      } else {
18        return [0, 0, 1, 1]
19      }
20    }
21  }
22
23  build() {
24    Column({ space: 5 }) {
25      Grid(null, this.layoutOptions1) {
26        ForEach(this.numbers, (item: number, index: number) => {
27          GridItem() {
28            Text(item.toString())
29              .fontSize(16)
30              .backgroundColor(0xf9cf93)
31          }
32          .backgroundColor(Color.Pink)
33        }, (item: number) => item.toString())
34      }
35      .columnsTemplate('1fr 1fr 1fr')
36      .rowsTemplate('1fr 1fr 1fr')
37      .columnsGap(10)
38      .rowsGap(10)
39      .width('90%')
40      .height(400)
41      .backgroundColor(0xfaeee0)
42    }
43    .width('100%')
44    .margin({
45      top: 10
46    })
47  }
48}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12