HarmonyOS应用开发实战-解决Grid超过一屏不滚动问题_鸿蒙开发,文字超出屏幕向左移动

前言
Grid容器组件：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

1.Grid的基础使用

华为官方List和Grid的基础使用

2.开发过程遇到的问题：Grid给定高度可以滚动，超过一屏无法滚动

解决方案：全局使用Flex布局，使Grid的高度为.flexGrow(1)

build() {
    Flex({ direction: FlexDirection.Column, alignContent: FlexAlign.Center}) {
      TitleBar({ title: '政策宣传' })

      Image($r('app.media.zc_banner'))
        .objectFit(ImageFit.Fill)
        .width('90%')
        .height('150vp')
        .padding(10)
        .alignSelf(ItemAlign.Center)
      
      Grid(this.scroller) {
        ForEach(zcxcViewModel.getListData(), (item: ZcxcBean) => {
          GridItem() {
            Column() {
              Stack({ alignContent: Alignment.TopEnd }) {

                Image(item.img)
                  .width('50vp')
                  .height('50vp')

                Text(item.unRead + "")
                  .fontSize('8fp')
                  .fontColor(Color.White)
                  .padding(5)
                  .borderRadius(20)
                  .backgroundColor(Color.Red)
                  .align(Alignment.TopEnd)
                  .visibility(item.unRead !== undefined ? Visibility.Visible : Visibility.None)
              }

              Text(item.title)
                .fontSize('14fp')
                .margin({ top: '8vp' })
            }
          }
        }, (item: ZcxcBean) => JSON.stringify(item))
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap('8vp')
      .rowsGap('12vp')
      .flexGrow(1)
      .padding(20)
      .backgroundColor($r('app.color.color_white'))
    }.width('100%')
  }
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