无法在我的flutter演示应用程序中的listview中显示gridview

Question

我正在将我的本机 Android 项目转换为 flutter 应用程序，在此我需要在其他小部件下方显示选项网格。

这是代码

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Column homeThumb(String icon, String label) {
      Color color = Theme.of(context).primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(
            margin: const EdgeInsets.all(8.0),
            child: new Image.asset(icon, width: 32.0, height: 32.0),
          ),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              textAlign: TextAlign.center,
              style: new TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          ),
        ],
      );
    }

    Widget homeIcon = new Container(
        child: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
          new Container(
              margin: const EdgeInsets.only(
                  top: 40.0, left: 8.0, right: 8.0, bottom: 8.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  homeThumb("images/icons/list.png", 'Claim Offers'),
                  homeThumb("images/icons/wallet.png", 'Wallet'),
                  homeThumb("images/icons/cart.png", 'Redeem Offers'),
                ],
              )),
          new Container(
              margin: const EdgeInsets.all(8.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  homeThumb("images/icons/user.png", 'Account'),
                  homeThumb("images/icons/badge.png", 'Merchants'),
                  homeThumb("images/icons/history.png", 'Shopping History'),
                ],
              )),
          new Container(
              margin: const EdgeInsets.all(8.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  homeThumb("images/icons/bell.png", 'Notifications'),
                  homeThumb("images/icons/plane.png", 'Service Request'),
                  homeThumb("images/icons/share.png", 'Share & Earn'),
                ],
              )),


        ]));

    Widget grid = new GridView.count(
      crossAxisCount: 4,
      children: new List<Widget>.generate(16, (index) {
        return new GridTile(
          child: new Card(
              color: Colors.blue.shade200,
              child: new Center(
                child: new Text('tile $index'),
              )
          ),
        );
      }),
    );

    return new MaterialApp(
      title: 'Minkville',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Minkville'),
        ),
        body: new ListView(
          children: [
            new Image.asset(
              'images/slider/img_s1.jpg',
              width: 600.0,
              height: 180.0,
              fit: BoxFit.fill,
            ),
            homeIcon,
            grid

          ],
        ),
      ),
    );
  }
}

在调试时，将出现以下日志

I/flutter（16594）：抛出另一个异常：'package：flutter/src/rendering/sliver_multi_box_adaptor.dart'：断言失败：第441行第12行：'child.hasSize'：不正确。 I/flutter (16594)：抛出另一个异常：RenderBox 未布局：RenderRepaintBoundary#199e9 relayoutBoundary=up3 NEEDS-PAINT

Answer 1

忽略以上所有答案。 确保在

shrinkWrap : true

和

ListView

中都设置了

GridView

。 问题解决了！！

Answer 2

我最简单的例子没有 CustomScrollView 没有 SilverGrid 只是一个普通的 ListView 和 GridView。 这就是为什么我认为你不能直接将 gridView 放入 ListView 中，因为一旦你这样做了

• 您无法区分您是在滚动列表还是网格，因为两者都是可滚动的。
• ListView 需要一个小部件，因为它是可滚动的，所以它必须需要定义高度的小部件

所以这里的工作是给它一个特定高度的小部件，所以如果你给它一个特定高度的容器并在容器内添加一个网格视图，那么这应该可以完成你的工作

List<MaterialColor> gridColors = [
  Colors.red,
  Colors.deepPurple,
  Colors.green,
  Colors.deepOrange,
  Colors.red,
  Colors.deepPurple,
  Colors.green,
  Colors.deepOrange,
  Colors.red,
  Colors.deepPurple,
  Colors.green,
  Colors.deepOrange
];



  static Widget body() {
    return ListView(
      children: <Widget>[
        Container(
          height: 400,
          color: Colors.green,
        ),
        Container(
          height: 400,
          color: Colors.deepOrangeAccent,
          child: GridView.builder(
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
              itemCount: 8,
              itemBuilder: (BuildContext context, int x) {
                return Container(
                  margin: EdgeInsets.all(10),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: gridColors[x],
                  ),
                );
              }),
        ),
        Container(
          height: 400,
          color: Colors.blue,
        ),
      ],
    );
  }

这是输出希望对某人有帮助

Answer 3

您需要将

GridView

包装到

Expanded

小部件中。更多相关信息这里。

Answer 4

1.找出问题

new ListView(
  children: [
    new Image.asset(
      'images/slider/img_s1.jpg',
      width: 600.0,
      height: 180.0,
      fit: BoxFit.fill,
    ),
    homeIcon,
    grid // this is the problem
  ],
),

问题就在这里。因为网格被定义为GridView Widget，Flutter不能 将其呈现为 ListView 的子级。

Widget grid = GridView.count(
      crossAxisCount: 4,
...

2.但我希望屏幕也可以滚动？

为此，我们需要替换 SingleChildScrollView 或类似的小部件，例如 ListView。 我们将其改为CustomScrollView。

这是必要的，因为实际上，Flutter 识别两种模式：

• 列表视图模式 子项将在垂直方向添加

• 网格框图案 子项将在 Z 方向添加。如果它有两列，则其第一个和第二个子元素将呈现在第一行上。然后第二行用第三行和第四行渲染。

官方文档

3.那部分怎么写？

body: CustomScrollView( // replacement of SingleScrollChildView
  slivers: <Widget>[ // rather than children, it is named slivers
    // List Pattern section
    SliverList( // replacement of ListView
      delegate : // rather than children, it is named delegate
      ...
    ),
    // Grid Pattern section
    SliverGrid(
      delegate : // rather than children, it is named delegate
      ...
    ),

  ],
)

4.最终代码

• 将

  ListView

  更改为

  SliverList

  以创建 列表部分
• 用

  CustomScrollView

包裹起来
• 将

  SliverGrid

  放在

  SliverList

  下面，这是我们的网格部分
• 在 SliverGrid 中渲染我们的 grid 变量

body: new ListView( // replace this to SliverList
  children: [
    new Image.asset(
      'images/slider/img_s1.jpg',
      width: 600.0,
      height: 180.0,
      fit: BoxFit.fill,
    ),
    homeIcon,
    grid // needs to be moved into our Grid Section 

  ],
),

body: CustomScrollView(
  slivers: <Widget>[
    // A. This is our List Section
    SliverList(
      delegate: SliverChildListDelegate([
        Image.asset(
          'images/slider/img_s1.jpg',
          width: 600.0,
          height: 180.0,
          fit: BoxFit.fill,
        ),
        homeIcon,
        // grid
      ]),
    ),
    // B. This is our Grid Section
    SliverGrid.count(
      children: <Widget>[grid],
      crossAxisCount: 1,
    ),
  ],
),

演示

您可以使用此存储库自行捆绑它Github

Answer 5

尝试点击“重新启动”按钮