Flutter，如何正常构造gridview结构？

Question

我正在实现通过 GridView 显示图像并学习 BloC 模式，但我的实现继续出现有关渲染问题的错误。

很长一段时间以来，我都试图找到解决方案，但我没有发现。下面是我的代码，这个代码结构有什么问题？

@override
    Widget build(BuildContext context) {
      return StreamBuilder(
        stream: bloc.state,
        builder: (BuildContext context, AsyncSnapshot<WebtoonState> snapshot){
          final state = snapshot.data;
          return Scaffold(
            body: Column(
                children: <Widget>[
                  SizedBox(height: 40.0),
                  RaisedButton(
                    child: Text(
                      '웹툰!!',
                      style: TextStyle(
                        color: Colors.black
                      ),
                    ),
                    color: Colors.orange,
                    onPressed: () => bloc.onDayChanged.add('mon'),
                  ),
                  SizedBox(height: 40.0),
                  Stack(
                    children: <Widget>[
                      WebtoonLoadingWidget(visible: state is WebtoonLoading),
                      WebtoonResultWidget(
                        items: state is WebtoonDone ? state.result.items : [],
                      )
                    ],
                  )
                ],
              ),
          );
        },
      );
    }

WebtoonResultWidget

Widget build(BuildContext context) {
      return AnimatedOpacity(
        duration: Duration(milliseconds: 300),
        opacity: visible ? 1.0 : 0.0,
        child: GridView.count(
              shrinkWrap: true,
              crossAxisCount: 3,
              childAspectRatio: 0.6,
              children: List.generate(items.length, (index){
                return Column(
                  children: <Widget>[
                    Image.network(
                      items[index].imgUrl,
                      scale: 0.5
                    ),
                    Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: Column(
                        children: <Widget>[
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              items[index].title,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          Text(
                            "★ " + items[index].rate,
                            style: TextStyle(
                              color: Colors.red,
                              fontWeight: FontWeight.bold
                            ),
                          ),
                          Expanded(child: Container()),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              items[index].artist,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                );
              }),
            ),
      );
    }

我的错误日志...

I/flutter (28386): ══╡ 渲染库发现异常 ╞═════════════════════════════════════════════════ ════════ I/颤动 (28386)：在 performLayout() 期间引发了以下断言： I/flutter (28386): 'package:flutter/src/rendering/object.dart': 失败 断言：第 1578 行 pos 12：I/flutter (28386)： '!_debugDoingThisLayout': 不正确。 I/颤动（28386）：I/颤动 (28386)：任何一个断言都表明框架中存在错误 本身，或者我们应该提供大量的 I/flutter (28386): 更多 此错误消息中的信息可帮助您确定和修复 根本原因。 I/flutter (28386)：无论哪种情况，请报告 这个断言通过在 GitHub 上提交错误：I/flutter (28386):
https://github.com/flutter/flutter/issues/new?template=BUG.md I/flutter (28386): I/flutter (28386): 抛出异常时， 这是堆栈： I/flutter (28386): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1578:12) I/flutter (28386):

3 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) I/flutter (28386): #4

RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)

Answer 1

使用 Container 小部件包装列并为其提供固定大小。 我通过添加固定高度来解决同样的问题。

Container(
    color: Colors.white,
    height: 110,
    padding: EdgeInsets.only(left: getSizeOf(20)),
    alignment: Alignment.topCenter,
    child: new Row(
      children: <Widget>[
        new Expanded(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
              Text(
                exercise.title,
                style: TextStyle(
                  fontSize: getSizeOf(20),
                  fontFamily: Constant.fontRegular,
                ),
              ),
              SizedBox(height: 5.0),
              exercise.categoriesData.length > 3
                  // ? showFirstThreeCategoryTags(exercise.categoriesData, getTagView, 26)
                  ? showFirstThree(exercise.categoriesData)
                  : Wrap(
                      direction: Axis.horizontal,
                      crossAxisAlignment: WrapCrossAlignment.start,
                      alignment: WrapAlignment.start,
                      spacing: 1,
                      children:
                          exercise.categoriesData.map((Category tagCate) {
                        return getTagView(tagCate);
                      }).toList()),
            ])),
        loadFirebaseImage(exercise.images[0], 100, context, exercise.images)
      ],
    ));