Flutter"RenderFlex子级的flex值非零，但传入的高度限制不受限制."当使用交错网格视图时〜@ _ @ [英] Flutter “RenderFlex children have non-zero flex but incoming height constraints are unbounded.” when using Staggered Grid View~ @_@

问题描述

                                   @_@

我当时正在考虑根据其动态内容的高度使GridView中的小部件具有不同的高度.

小部件看起来像这样:

I was thinking to make the widgets inside the GridView to have a different height according to their dynamic content height.

The widget looks like this:

Container(
      decoration: BoxDecoration(
        color: someColor,
        borderRadius: BorderRadius.circular(17),
      ),
      child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(17),
              child: AspectRatio(
                aspectRatio: 5 / 3,
                child: Image.network(someImageUrl, fit: BoxFit.cover),
              ),
            ),
            SizedBox(height: 10),
            Text('Group name'),
            Text('Group desc'),
            SizedBox(height: 10),
            Expanded(
              child: Row(
                children: List.generate(
                  _group.popIds.length,
                  (_) => SizedBox(width: 50, height: 50),
                ),
              ),
            ),
            Text('Hello')
          ],
        ),
    );

这是包含这些小部件的屏幕:

And this is the screen that holds those widgets:

Scaffold(
          body: Padding(
            padding:
                const EdgeInsets.only(left: 17.0, right: 17.0, top: 50),
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 20,
              itemCount: 50,
              itemBuilder: (context, index) => GroupItem(),
              staggeredTileBuilder: (index) => StaggeredTile.fit(1),
            ),
          ),
        );

这是错误消息:

**RenderFlex子级的flex为非零值，但传入的高度限制是不受限制的.&未布置RenderBox:RenderFlex#f808c relayoutBoundary = up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE'package:flutter/src/rendering/box.dart':断言失败:1940行pos 12:'hasSize'

** RenderFlex children have non-zero flex but incoming height constraints are unbounded. & RenderBox was not laid out: RenderFlex#f808c relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1940 pos 12: 'hasSize'

**

有一些天才可以帮助我解决这个问题，因为我整整一天都在为此苦苦挣扎！〜@ _ @

推荐答案

您可以在下面复制粘贴运行完整代码
步骤1: Column 使用 mainAxisSize:MainAxisSize.min
步骤2:将 Expanded 更改为 Flexible
步骤3:将 Row 更改为 Wrap
代码段

You can copy paste run full code below
Step 1: Column use mainAxisSize: MainAxisSize.min
Step 2: Change Expanded to Flexible
Step 3: Change Row to Wrap
code snippet

child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(17),
                  child: AspectRatio(
                    aspectRatio: 5 / 3,
                    child: Image.network("https://picsum.photos/250?image=9",
                        fit: BoxFit.cover),
                  ),
                ),
                SizedBox(height: 10),
                Text('Group name'),
                Text('Group desc'),
                SizedBox(height: 10),
                Flexible(
                  child: Wrap(
                    children: List.generate(
                      Random().nextInt(5) + 1,
                      (_) => SizedBox(width: 50, height: 50),
                    ),
                  ),
                ),
                Text('Hello')
              ],
            ),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(left: 17.0, right: 17.0, top: 50),
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          crossAxisSpacing: 20,
          itemCount: 50,
          itemBuilder: (context, index) => Container(
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(17),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(17),
                  child: AspectRatio(
                    aspectRatio: 5 / 3,
                    child: Image.network("https://picsum.photos/250?image=9",
                        fit: BoxFit.cover),
                  ),
                ),
                SizedBox(height: 10),
                Text('Group name'),
                Text('Group desc'),
                SizedBox(height: 10),
                Flexible(
                  child: Wrap(
                    children: List.generate(
                      Random().nextInt(5) + 1,
                      (_) => SizedBox(width: 50, height: 50),
                    ),
                  ),
                ),
                Text('Hello')
              ],
            ),
          ),
          staggeredTileBuilder: (index) => StaggeredTile.fit(1),
        ),
      ),
    );
    ;
  }
}

这篇关于Flutter"RenderFlex子级的flex值非零，但传入的高度限制不受限制."当使用交错网格视图时〜@ _ @的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！