栅格 - 比特日记

栅格

核心


1
2
3
4
5
1最多支持6个断点，xs、sm、md、lg、xl、xxl
2GridRow代表1行，里面必须存放GridRow
3默认一行最多显示12个元素，代表12列
4是一种设计流程，如antd支持24列
5根据不同屏幕尺寸，显示不同列数，支持自定义断点


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 1@Entry
 2@Component
 3struct Page05_GridRow {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow() {
10      ForEach(this.bgColors, (item: string, index: number) => {
11        GridCol() {
12          Text(`${index}`)
13            .width(40)
14            .height(50)
15            .lineHeight(50)
16            .backgroundColor(item)
17        }
18      }, (item: Color) => JSON.stringify(item))
19    }
20  }
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
 1@Entry
 2@Component
 3struct Page05_GridRow {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow({
10      columns: { sm: 4, md: 8 },
11      breakpoints: { value: ['320vp', '520vp', '840vp'] }
12    }) {
13      ForEach(this.bgColors, (item: string, index: number) => {
14        GridCol() {
15          Text(`${index}`)
16            .width('100%')
17            .height(50)
18            .lineHeight(50)
19            .backgroundColor(item)
20        }
21      }, (item: Color) => JSON.stringify(item))
22    }
23  }
24}

间隔


 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
 1@Entry
 2@Component
 3struct Page05_GridRow {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow({
10      columns: { sm: 4, md: 8 },
11      breakpoints: { value: ['320vp', '520vp', '840vp'] },
12      direction: GridRowDirection.RowReverse,
13      gutter: 10
14    }) {
15      ForEach(this.bgColors, (item: string, index: number) => {
16        GridCol() {
17          Text(`${index}`)
18            .width('100%')
19            .height(50)
20            .lineHeight(50)
21            .backgroundColor(item)
22        }
23      }, (item: Color) => JSON.stringify(item))
24    }
25  }
26}

占列


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 1@Entry
 2@Component
 3struct Page05_GridRow {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow({
10      columns: { sm: 4, md: 9 },
11      gutter: 10
12    }) {
13      ForEach(this.bgColors, (item: string, index: number) => {
14        GridCol({ span: { sm: 2, md: 3 } }) {
15          Text(`${index}`)
16            .width('100%')
17            .height(50)
18            .lineHeight(50)
19            .backgroundColor(item)
20        }
21      }, (item: Color) => JSON.stringify(item))
22    }
23  }
24}

导航条


 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
 1@Entry
 2@Component
 3struct Page05_GridRow_02 {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow({
10      columns: 6
11    }) {
12      GridCol({ span: 1 }) {
13      }
14      .width('100%')
15      .height(60)
16      .backgroundColor(Color.Red)
17
18      GridCol({ span: 1 }) {
19      }
20      .width('100%')
21      .height(60)
22      .backgroundColor(Color.Blue)
23
24      GridCol({ span: 4 }) {
25      }
26      .width('100%')
27      .height(60)
28      .backgroundColor(Color.Orange)
29    }
30  }
31}

自适应


 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
 1@Entry
 2@Component
 3struct Page05_GridRow_02 {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow({
10      columns: 6
11    }) {
12      GridCol({ span: { sm: 1, md: 2 } }) {
13      }
14      .width('100%')
15      .height(60)
16      .backgroundColor(Color.Red)
17
18      GridCol({ span: 1 }) {
19      }
20      .width('100%')
21      .height(60)
22      .backgroundColor(Color.Blue)
23
24      GridCol({ span: { sm: 4, md: 3 } }) {
25      }
26      .width('100%')
27      .height(60)
28      .backgroundColor(Color.Orange)
29    }
30  }
31}

偏移


 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@Entry
 2@Component
 3struct Page05_GridRow {
 4  @State bgColors: Color[] =
 5    [Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow,
 6      Color.Blue, Color.Brown, Color.Black, Color.Red, Color.Orange, Color.Yellow, Color.Blue, Color.Brown, Color.Black]
 7
 8  build() {
 9    GridRow({
10      columns: { sm: 4, md: 9 },
11      gutter: 10
12    }) {
13      ForEach(this.bgColors, (item: string, index: number) => {
14        GridCol({
15          span: { sm: 2, md: 3 },
16          offset: 1
17        }) {
18          Text(`${index}`)
19            .width('100%')
20            .height(50)
21            .lineHeight(50)
22            .backgroundColor(item)
23        }
24      }, (item: Color) => JSON.stringify(item))
25    }
26  }
27}