Flutter-DropdownButton溢出 [英] Flutter - DropdownButton overflow

问题描述

我正在尝试Flutter，目前正在尝试在对话框的列表视图中显示输入字段和下拉列表。但是，下拉菜单会溢出视图的水平宽度，并导致黄灰色条纹图案（如下所示）

如果您需要立即修复，则实际上可以自己修补DropDownButton！这样做：

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


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


3. 将 DropDownButton 重命名为 FixedDropDownButton ，以使其与Flutter导入不冲突


4. 导航到 _DropdownButtonState 的 build 方法。在行内找到 IndexedStack 。用 Expanded 小部件包装 IndexedStack 。

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

I am experimenting with Flutter, and currently trying to display an input field and a dropdown in a list view in a dialog box. However, I get the drop-down overflowing the horizontal width of view and causing yellow-gray striped pattern (shown below)

Overflow of DropdownButton widget in ListView

The code is:

    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
                ),
              ),
            ],
          ),
        );
      }
    }

Error:

    ══╡ 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

I have tried the following approaches, and they don't work:

• Wrapping the drop down in a Row, Column, Padding and ClipRect

Can someone help me understand this and show how to fix it?

Update Using FittedBox prevents the overflow, but the text size then shrinks to be un-legible.

解决方案

I think you're running into a legit bug with the DropDownButton itself. There is a Github issue about the problem here: https://github.com/flutter/flutter/issues/9211

If you need an immediate fix, you can actually patch up the DropDownButton yourself! To do so:

1. Open the dropdown.dart from the Flutter Framework and paste it into your own project as fixed_dropdown.dart.
2. Delete the DropDownMenuItem class from this file so it does not cause conflicts with your normal Flutter imports
3. Rename DropDownButton to FixedDropDownButton so it does not conflict with Flutter imports
4. Navigate to the build method of the _DropdownButtonState. Find the IndexedStack inside a Row. Wrap the IndexedStack with an Expanded widget.

I posted this info on the Github Issue itself, and screenshots of this solution can be found there as well if you want to see the fix in action!

这篇关于Flutter-DropdownButton溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！