Dart 颤振-下拉按钮溢出

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

ListView中的DropdownButton小部件溢出

代码是：

class DataInput扩展StatefulWidget{
@凌驾
State createState（）=>新数据输入状态（“”）；
}
枚举解除对话框操作{
取消，
丢弃，
拯救
}
类DataInputState扩展状态{
最终字符串\u数据；
静态常量类型=常量[
常数{
“id”：“103”，
“desc:“0001-lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum”
},
常数{
“id”：“804”，
“desc:“0002-lorem ipsum lorem ipsum”
},
];
DataInputState（此._数据）；
@凌驾
小部件构建（构建上下文）{
最终主题数据主题=theme.of（上下文）；
归还新脚手架(
appBar：新的appBar(
标题：施工文本（“细节”），
行动：[
新扁平按钮(
onPressed:（）=>Navigator.pop（上下文，DismissDialogAction.save），
孩子：新的一排(
儿童：[
新图标（Icons.save，颜色：Colors.white，），
新文本(
“保存”，
样式：theme.textTheme.body1.copyWith(
颜色：颜色。白色，）
)
],
)
),
],
),
正文：新列表视图(
收缩膜：对，
儿童：[
新文本（“设置标签”），
新文本字段(
自动更正：错误，
),
新文本（“选择类型”），
新容器(
宽度：新的FractionColumnWidth（0.5）。值，
孩子：新的下拉按钮(
项目：类型.map（（m）=>
新下拉菜单项(
密钥：新密钥（m[“id”]），
子项：新文本（m[“desc”]）
).toList（可增长：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

══╡ 呈现库捕获到异常╞═════════════════════════════════════════════════════════
布局期间引发了以下消息：
水平RenderFlex溢出433像素。
溢出的RenderFlex边缘已在渲染中标记为黄色和黄色
黑色条纹图案。这通常是由于RenderFlex的内容太大造成的。
RenderFlex以适应可用空间，而不是按照其自然大小调整大小。
这被认为是一种错误情况，因为它表明存在无法删除的内容
看到。如果内容合法地大于可用空间，考虑将其剪辑为
将RectClip小部件放入flex或使用可滚动容器而不是flex之前，
例如，使用ListView。
所讨论的特定RenderFlex是：
RenderFlex#cc264 relayoutBoundary=up12溢出
创建者：行← 大小盒子← DefaultTextStyle← 堆栈← 听众← _手势语义学←
罗氏消化检测器← 手势检测器← 下拉按钮← 约束盒← 容器←
重新绘制边界-[]← ⋯
方向：水平
mainAxisAlignment：之间的空间
主轴尺寸：最小
横轴对齐：中心
文本方向：ltr
垂直方向：向下

我尝试过以下方法，但都不起作用：

• 将下拉列表包装成行、列、填充和ClipRect

有人能帮我理解这一点，并告诉我如何解决它吗

更新

---

使用

FittedBox

可以防止溢出，但是文本大小会缩小到无法辨认的程度。

我认为您在使用

下拉按钮本身时遇到了一个合法的错误。这里有一个关于该问题的Github问题：

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

从颤振框架中打开
下拉列表.dart
，并将其作为
固定下拉列表.dart
粘贴到您自己的项目中
从该文件中删除
DropDownMenuItem
类，这样它就不会与正常的颤振导入发生冲突
将
DropDownButton
重命名为
FixedDropDownButton
，这样它就不会与颤振导入冲突
导航到
\u DropdownButtonState
的
build
方法。在
行中找到
索引堆栈
。使用扩展的
小部件包装
IndexedStack
我在Github问题本身上发布了这些信息，如果您想看到修复的效果，也可以在那里找到这个解决方案的屏幕截图
 我设法解决了这个问题，将DropdownMenuItem的子项包装在一个SizedBox中，并给SizedBox一个固定的宽度，这个宽度不会溢出UI，而且看起来仍然不错

例如

新建下拉菜单项(
价值：价值，
孩子：新尺寸的盒子(
宽度：200.0，
子项：新文本（${value}长文本）
),
)
详细说明您可以通过以下方式设置列表：

final dropdownItems = _list
        .map((String item) => new DropdownMenuItem<String>(
              value: item,
              child: new SizedBox(width: 200.0, child: new Text(item)),
            ))
        .toList();

final dropdownItems=\u列表
.map（（字符串项）=>新建下拉菜单项(
                   new DropdownMenuItem<String>(
                      value: value,
                      child:  new SizedBox(
                        width: 200.0,
                        child: new Text('Long text with ${value} ')
                      ),
                    )

final dropdownItems = _list
        .map((String item) => new DropdownMenuItem<String>(
              value: item,
              child: new SizedBox(width: 200.0, child: new Text(item)),
            ))
        .toList();

new DropdownButton(
                  isExpanded: true, //Adding this property, does the magic
                  items: [
                    new DropdownMenuItem(
                        child: Text("Some large text that needs to be wrapped or ellipsized", 
                        overflow: TextOverflow.ellipsis),
                    ),
                    new DropdownMenuItem(
                      child: Text("This is another large text that needs to be wrapped or ellipsized", 
                      overflow: TextOverflow.ellipsis),
                    ),
                    new DropdownMenuItem(
                      child: Text("And one more large text that needs to be wrapped or ellipsized", 
                      overflow: TextOverflow.ellipsis),
                    )
                  ],
                  onChanged: (val) {
                    //print(val);
                  }),

DropdownMenuItem<MyDropdownContentClass>(
            child: FittedBox(
              child: Text("dropdown item display"),
              fit: BoxFit.contain,
            ),
          );

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    // The maximum height of a simple menu should be one or more rows less than
    // the view height. This ensures a tappable area outside of the simple menu
    // with which to dismiss the menu.
    //   -- https://material.io/design/components/menus.html#usage
    final double maxHeight =
        math.max(0.0, constraints.maxHeight - 2 * _kMenuItemHeight);
    // The width of a menu should be at most the view width. This ensures that
    // the menu does not extend past the left and right edges of the screen.
    final double width = math.min(constraints.maxWidth, buttonRect.width);
    return BoxConstraints(
      minWidth: width,
      maxWidth: width,
      minHeight: 0.0,
      maxHeight: maxHeight,
    );
  }

Row(
    children: <Widget>[
      Expanded(
        child: DropdownButton<String>(
          isExpanded: true, 
          value: _selectedLanguageNative,
          items: list,
          hint: Text(LanguageLocal.getDisplayLanguage(
              Localizations.localeOf(context).languageCode)["name"]),
          onChanged: (String value) {
            print(value);
            setState(() {
              _selectedLanguageNative = value;
            });
          },
        ),
      ),
    ],
  ),

child: DropdownButton<String>(
        isExpanded: true,
        hint: Text('Select Faculty'),
        value: selectedFaculty,
        underline: Container(
          height: 0,
        ),
        onChanged: (String value) async {
          selectedFaculty = value;
        },
        selectedItemBuilder: (BuildContext context) {
          return dropFaculty.map<Widget>((String text) {
            return Text(
              text,
              overflow: TextOverflow.ellipsis,
            );
          }).toList();
        },
        items: disableKeyFields || selectedInstitution == null
            ? null
            : dropFaculty.map((String faculty) {
                return DropdownMenuItem<String>(
                  value: faculty,
                  child: Text(
                    faculty,
                    style: TextStyle(color: Colors.black),
                  ),
                );
              }).toList(),
      ),

DropdownButton(
     isExpanded: true, //Add this property
     items: [
          DropdownMenuItem(
              child: Text("Your Text Here", 
              overflow: TextOverflow.ellipsis),
          ),
}),