右侧的 RenderFlex 溢出了 1307 个像素。在卡片小部件内答案

【问题标题】：A RenderFlex overflowed by 1307 pixels on the right. inside a card widget右侧的 RenderFlex 溢出了 1307 个像素。在卡片小部件内
【发布时间】：2021-10-12 23:33:13
【问题描述】：

所以我创建了一个自定义列表视图 (list_item.dart)，用于保存来自卡片内 api 的数据并将其显示给用户。当我尝试用数据填充我的列表视图时，我得到了错误“RenderFlex 在右侧溢出了 1307 像素。在卡片小部件内”。我尝试将卡片小部件放在灵活的小部件旁边，但它没有用。请帮忙。

class CustomListItem extends StatelessWidget {
final String subtitle;
final String secondaryText;
final String body;
final int index;
final Widget image;
final void Function() onTap;

const CustomListItem({
required this.subtitle,
required this.secondaryText,
required this.body,
required this.index, required this.onTap,
required this.image,
});

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                children: <Widget>[
                  image,
                  Column(
                    children: <Widget>[
                      RichText(
                        text: TextSpan(
                          text: subtitle,
                          recognizer: TapGestureRecognizer()..onTap = onTap,
                          style: TextStyle(
                          fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Text(secondaryText)
                    ],
                  ),
                ],
              ),
            Container(
              height: 1.0,
              width: MediaQuery.of(context).size.width,
              color: Colors.black,
            ),
            Row(
              children: <Widget>[Text(body)],
            ),
          ],
        ),
      ),
    ),
);
}
}

【问题讨论】：

在 Expanded 或 Flex Widget 中添加您的图像和文本小部件，参考我的回答 here
尝试在每个小部件中添加扩展小部件，如图像、文本，也尝试在 android studio 中使用布局检查器，这将有助于识别哪个小部件显示错误以及如何修复它检查视频和文档它有很大帮助flutter.dev/docs/development/tools/devtools/inspector@KavishkaRajapakshe

标签： flutter dart listview flutter-renderflex-error

【解决方案1】：

尝试使用 Expanded 来包装您的文本小部件，例如：

        Row(
          children: <Widget>[Expanded(child: Text(body),),],
        ),

【讨论】：