GridView 未显示。扑

Question

我想为 gridview 提供所有剩余的屏幕高度，因此我尝试将 gridview 包装在一个展开的小部件和一个灵活的小部件中，但网格视图没有显示。

我做了什么

 return Container(
  width: double.infinity,
  margin: EdgeInsets.symmetric(horizontal: 22.0, vertical: 50.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Most Popular Search',
        style: TextStyle(
          fontSize: 32.0,
          fontWeight: FontWeight.w700,
          color: Colors.black87,
        ),
      ),
      SizedBox(height: 30.0),
      _buildPopularItems(),
      SizedBox(height: 50.0),
      Text(
        'Find an online mentor',
        style: TextStyle(
          fontSize: 32.0,
          fontWeight: FontWeight.w700,
          color: Colors.black87,
        ),
      ),
      SizedBox(height: 30.0),
      Flexible(
        child: GridView.count(
          childAspectRatio: (itemWidth / itemHeight),
          crossAxisCount: 4,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: [
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
          ],
        ),
      ),
    ],
  ),
);

_buildPopularItems() 代码如下

  _buildPopularItems() {
List<Widget> itemsList = [];
popularSearchList.forEach((PopularSearch popularSearch) {
  itemsList.add(PopularSkillsCard(
      imageUrl: popularSearch.imageUrl, title: popularSearch.title));
});
return SingleChildScrollView(
  child: Row(children: itemsList),
  scrollDirection: Axis.horizontal,
);

}

它向我显示此错误。

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Answer 1

使用扩展小部件时设置弹性值。这是你的代码。更改 flex 值以获得所需的 UI。

return Container(
  width: double.infinity,
  margin: EdgeInsets.symmetric(horizontal: 22.0, vertical: 50.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
        flex: 1,
              child: Text(
          'Most Popular Search',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.w700,
            color: Colors.black87,
          ),
        ),
      ),
      Expanded(
        flex: 1,
              child: Text(
          'Find an online mentor',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.w700,
            color: Colors.black87,
          ),
        ),
      ),

      Expanded(
        flex: 6,
        child: GridView.count(
          childAspectRatio: (itemWidth / itemHeight),
          crossAxisCount: 4,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: [
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
          ],
        ),
      ),
    ],
  ),
);

GridView 未显示。扑

GirdView not showing. flutter

gridview

flutter

flutter-layout

flutter-web