Flutter：RenderFlex children 有 non-zero flex 但传入的高度约束是无界的

Question

我正在使用以下 flutter 代码依次显示图像 post 标题和描述。

import 'package:flutter/material.dart';

class LatestPost extends StatelessWidget {
  const LatestPost({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 5,
        itemBuilder: (context, i) {
          return Card(
            child: ListTile(
              title: Column(
                children: [
                    SizedBox(
                        width: 70.0,
                        height: 20.0,
                        child: Image.asset("images/image_2.jpg")),
                  const Expanded(
                      child: Text(
                    "Post Title",
                    style: TextStyle(
                      fontSize: 24.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ))
                ],
              ),
            ),
          );
        });
  }
}

但是抛出如下错误：

在 performLayout() 期间抛出了以下断言： RenderFlex children 有 non-zero flex 但传入的高度限制是无限的。

当列位于不提供有限高度约束的 parent 中时，例如，如果它位于垂直可滚动中，它将尝试 shrink-wrap 其 child ren 沿纵轴。在 child 上设置 flex（例如使用 Expanded）表示 child 将扩展以填充垂直方向上剩余的 space。这两个指令是互斥的。如果 parent 是 shrink-wrap 其 child，则 child 无法同时扩展以适应其 parent。

考虑将 mainAxisSize 设置为 MainAxisSize.min 并使用 FlexFit.loose 适合灵活的 children（使用灵活而不是扩展）。这将允许灵活的 children 将自己的大小调整到小于无限剩余 space 否则它们将被迫采用，然后将导致 RenderFlex shrink-wrap children 而不是扩展以适应 parent.

提供的最大限制

如果此消息不能帮助您确定问题，请考虑使用 debugDumpRenderTree()： https://flutter.dev/debugging/#rendering-layer http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html

这是我的目标设计：

Answer 1

尝试使用下面的代码添加 shrinkWrap: true 并删除 Expanded

ListView.builder(
  shrinkWrap: true,
  itemCount: 5,
  itemBuilder: (context, i) {
    return Card(
      child: ListTile(
        title: Column(
          children: [
            SizedBox(
              width: 70.0,
              height: 20.0,
              child: Image.network(
                  "https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png"),
            ),
            Text(
              "Post Title",
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  },
);

结果屏幕 ->

答案更新：

Scaffold(
  body: SingleChildScrollView(
    padding: EdgeInsets.all(10),
    child: Column(
      children: [
        Image.network(
          'https://4.imimg.com/data4/SJ/BA/MY-3018414/apple-laptop-500x500.jpg',
          height: 200,
          width: 300,
        ),
        SizedBox(
          height: 20,
        ),
        Divider(
          color: Colors.black,
          thickness: 1,
        ),
        Text(
          'How Apple\'s M1 chips make macOS developement much less costly',
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Divider(
          color: Colors.black,
          thickness: 1,
        ),
        Text(
            'Apple in November 2020 released the first Macs with an Arm-based'
            ' M1 chip, debuting 2020 13-inch MacBook Pro, MacBook Air,'
            ' and Mac mini models. In early 2021, Apple added the M1 iMac'
            'and the M1 iPad Pro. The M1 chip has received rave reviews for'
            'its incredible performance and efficiency.'),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            Text('#Development'),
            SizedBox(
              width: 10,
            ),
            Container(
              width: 5,
              height: 5,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.black,
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Text('#Management'),
          ],
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.black,
    child: Icon(Icons.message),
    onPressed: () {
      print('Button Pressed');
    },
  ),
),

结果屏幕->

Answer 2

您的代码没问题，只需删除 Expanded。

您的代码：

const Expanded(
      child: Text(
         "Post Title",
          style: TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
     ))

改为使用：

const Text(
      "Post Title",
      style: TextStyle(
        fontSize: 24.0,
        fontWeight: FontWeight.bold,
      ),
)

Flutter：RenderFlex children 有 non-zero flex 但传入的高度约束是无界的

Flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded

dart

flutter

flutter-layout

答案更新：