如何与InkWell一起使用Expanded,以解决像素溢出的Renderflex

问题描述

当我单击一个项目时,该项目在“子级:列”行中崩溃。

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 with InkWell,但它仍然崩溃。

解决方法

Expanded应该在子尺寸不受限制的地方使用。在您的情况下,您的“文本”小部件将使用较大的字符串来增加其大小。因此,您应该使用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,),)
            ],));
  }