如何使用 Expanded 和 InkWell 来解决像素溢出的 Renderflex答案

【问题标题】：How to use Expanded with InkWell in order to solve A Renderflex Overflowed By Pixels如何使用 Expanded 和 InkWell 来解决像素溢出的 Renderflex
【发布时间】：2020-08-18 13:16:50
【问题描述】：

当我点击一个项目时，项目在“child: Column”行中崩溃。

Widget renderEditableParamItem(EditableStructParam data) {
    return InkWell(
        onTap: () => _bloc.onEditableItemSelected(data),
        child: Container(
          margin: EdgeInsets.only(left: 15, right: 15),
          padding: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              Text(
                data.title,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ],
          ),
        ));
  }

错误：

The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (23777): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (23777): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (23777): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (23777): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (23777): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (23777): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (23777): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (23777): like a ListView.

你知道如何在这里使用 Expanded 吗？

我小时候尝试用 InkWell 返回 Expanded，但它仍然崩溃。

【问题讨论】：

我不太确定为什么文本在列中。如果你能提供更多的上下文，它会更容易提供帮助。
可以加个截图吗？

标签： flutter dart flutter-widget

【解决方案1】：

Expanded 应该在子大小不受限制的地方使用。在您的情况下，您的 Text 小部件会使用更大的字符串来增加它的大小。所以你应该用 Expanded 包装你的 Text 小部件。欲了解更多信息，请通过this。

Widget renderEditableParamItem(EditableStructParam data) {
    return InkWell(
        onTap: () => _bloc.onEditableItemSelected(data),
        child: Container(
          margin: EdgeInsets.only(left: 15, right: 15),
          padding: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              Expanded(
                child: Text(
                 data.title,
                 style: TextStyle(
                   color: Colors.white,
                   fontSize: 16,
                 ),
               ),
              )
            ],
          ),
        ));
  }

【讨论】：