时间戳

首页 > 解决方案 > Flutter，如何正常构造gridview结构？

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

问题描述

我正在实现通过 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 /颤振（28386）：══╡渲染库╞═════════════════════════════════════════ ═══════════════════════ I/flutter（28386）：在performLayout（）期间抛出了以下断言：I/flutter（28386）：'package： flutter/src/rendering/object.dart'：断言失败：第 1578 行 pos 12：I/flutter (28386)：'!_debugDoingThisLayout'：不正确。I/flutter (28386): I/flutter (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/颤振 (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)

标签： gridviewflutterrendering

解决方案

使用 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)
      ],
    ));

推荐阅读