HarmonyOS grid和list混合布局问题

build() {
  Column() {
    this.serverHeader('test')
    Grid() {
      ForEach(this.serverList, (item: string, index: number) => {
        GridItem() {
          Column() {
            Image('')
            Text(item)
          }
        }
      }, (item: string, index: number) => randomReuseIdentifier() + item + index)
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    this.serverHeader(‘test’)
    List() {
      ForEach(['1', '2', '3'], (item: string, index: number) => {
        ListItemGroup({ header: this.serverType() }) {
          ForEach(['2', '3'], (item: string, index: number) => {
            ListItem() {
              this.listItem()
            }
          }, (item: string, index: number) => 'DetailRoomList' + item + index)
        }
      }, (item: string, index: number) => 'DetailRoomList' + item + index)
    }
    .backgroundColor(Color.Brown)
  }
  .backgroundColor(Color.White)
}

布局如上，如何设置grid的高度让下方的自定义布局和list能正常显示

HarmonyOS

zxjiu

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

@Entry
@Component
struct ListPage {
  @State serverList: number[] = [1,2,3,4,5];

  build() {
    Column() {
      Flex({ direction: FlexDirection.Column }){
        Grid() {
          ForEach(this.serverList, (item: number, index: number) => {
            GridItem() {
              Column() {
                Image('')
                Text(`${item}`)
              }
            }

          }, (item: string, index: number) => item + index)
        }
        .maxCount(6)
        .layoutDirection(GridDirection.Column)
        .columnsTemplate('1fr 1fr 1fr 1fr')
        List() {
          ForEach(['1', '2', '3'], (item: string, index: number) => {
            ListItemGroup() {
              ForEach(['2', '3'], (item: string, index: number) => {
                ListItem() {
                  Text('1')
                    .height('auto')
                }
              }, (item: string, index: number) => 'DetailRoomList' + item + index)
            }
          }, (item: string, index: number) => 'DetailRoomList' + item + index)
        }
        .flexGrow(1)

        .border({width:1,color:'#000'})
      }
    }
    .backgroundColor(Color.White)
  }
}

可以在Gird组件加上maxCount属性，可实现Gird高度自适应的效果。

Gird参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS grid和list混合布局问题

订阅鸿蒙技术特刊，精选内容抢先看