如何使用 Expanded with InkWell 来解决像素溢出的 Renderflex

Question

当我单击某个项目时，项目在“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吗？

我小时候曾尝试 return 使用 InkWell 进行扩展，但它仍然崩溃。

Answer 1

Expanded 应在子尺寸不受限制的情况下使用。在您的情况下，您的 Text 小部件使用更大的 String 增加了它的大小。所以你应该用 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,
                 ),
               ),
              )
            ],
          ),
        ));
  }

如何使用 Expanded with InkWell 来解决像素溢出的 Renderflex

How to use Expanded with InkWell in order to solve A Renderflex Overflowed By Pixels

dart

flutter

flutter-widget