dart - Flutter-DropdownButton溢出

我正在尝试Flutter，目前正在尝试在对话框的 ListView 中显示输入字段和下拉列表。但是，我得到的下拉列表溢出了 View 的水平宽度，并导致黄灰色条纹图案(如下所示)

ListView中DropdownButton小部件的溢出

代码是:

    class DataInput extends StatefulWidget {

      @override
      State createState() => new DataInputState("");
    }


    enum DismissDialogAction {
      cancel,
      discard,
      save,
    }

    class DataInputState extends State<DataInput> {
      final String _data;
      static const types = const <Map<String, String>>[
        const {
          "id": "103",
          "desc": "0001 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
        },
        const {
          "id": "804",
          "desc": "0002 - lorem ipsum lorem ipsum"
        },
      ];

      DataInputState(this._data);

      @override
      Widget build(BuildContext context) {
        final ThemeData theme = Theme.of(context);
        return new Scaffold(
          appBar: new AppBar(
            title: const Text("Details"),
            actions: <Widget>[
              new FlatButton(
                  onPressed: () => Navigator.pop(context, DismissDialogAction.save),
                  child: new Row(
                    children: <Widget>[
                      new Icon(Icons.save, color: Colors.white,),
                      new Text(
                          "Save",
                          style: theme.textTheme.body1.copyWith(
                            color: Colors.white,)
                      )
                    ],
                  )
              ),
            ],
          ),
          body: new ListView(
            shrinkWrap: true,
            children: <Widget>[
              new Text("Set Label"),
              new TextField(
                autocorrect: false,
              ),
              new Text("Select Type"),
              new Container(
                width: new FractionColumnWidth(0.5).value,
                child: new DropdownButton(
                    items: types.map((m) =>
                    new DropdownMenuItem(
                        key: new Key(m["id"]),
                        child: new Text(m["desc"]))
                    ).toList(growable: false),
                    onChanged: null
                ),
              ),
            ],
          ),
        );
      }
    }

错误:

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    The following message was thrown during layout:
    A horizontal RenderFlex overflowed by 433 pixels.

    The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    RenderFlex to fit within the available space instead of being sized to their natural size.
    This is considered an error condition because it indicates that there is content that cannot be
    seen. If the content is legitimately bigger than the available space, consider clipping it with a
    RectClip widget before putting it in the flex, or using a scrollable container rather than a Flex,
    for example using ListView.
    The specific RenderFlex in question is:
    RenderFlex#cc264 relayoutBoundary=up12 OVERFLOWING
    creator: Row ← SizedBox ← DefaultTextStyle ← Stack ← Listener ← _GestureSemantics ←
    RawGestureDetector ← GestureDetector ← DropdownButton ← ConstrainedBox ← Container ←
    RepaintBoundary-[<3>] ← ⋯
    direction: horizontal
    mainAxisAlignment: space-between
    mainAxisSize: min
    crossAxisAlignment: center
    textDirection: ltr
    verticalDirection: down

我尝试了以下方法，但它们不起作用:

将下拉列表包装为行，列，填充和ClipRect

有人可以帮助我理解此问题并显示解决方法吗？

更新
使用FittedBox可以防止溢出，但是文本大小随后缩小为难以辨认。

最佳答案

我认为您使用DropDownButton本身遇到了合法错误。这里有一个有关该问题的Github问题:https://github.com/flutter/flutter/issues/9211

如果您需要立即修复，则实际上可以自己修补DropDownButton!为此:

从Flutter框架中打开dropdown.dart并将其作为fixed_dropdown.dart粘贴到您自己的项目中。

从此文件中删除DropDownMenuItem类，以免与正常的Flutter导入冲突。

将DropDownButton重命名为FixedDropDownButton，以便与Flutter导入

不冲突

导航到build的_DropdownButtonState方法。在IndexedStack中找到Row。用IndexedStack小部件包装Expanded。

我在Github Issue本身上发布了此信息，如果您想查看实际的修复方法，也可以在此处找到该解决方案的屏幕截图!

关于dart - Flutter-DropdownButton溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47032262/

dropdownButton

dart - Flutter-DropdownButton溢出