Flutter “RenderFlex 子项具有非零 flex，但传入的高度约束是无界的”使用交错网格视图时~@_@

如何解决Flutter “RenderFlex 子项具有非零 flex，但传入的高度约束是无界的”使用交错网格视图时~@_@

                                   @_@

我想根据其动态内容高度使 GridView 内的小部件具有不同的高度。

小部件看起来像这样：

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'),Expanded(
              child: Row(
                children: List.generate(
                  _group.popIds.length,(_) => SizedBox(width: 50,height: 50),Text('Hello')
          ],);

这是保存这些小部件的屏幕：

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#f808crelayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:Flutter/src/rendering/Box.dart': 失败的断言：第 1940 行 pos 12：'hasSize'

**

有没有哪位大神能帮我解决这个问题，我折腾了一整天！~@_@

解决方法

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

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'),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,staggeredTileBuilder: (index) => StaggeredTile.fit(1),);
    ;
  }
}