You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter如何缩小DropdownButtonFormField展开菜单的宽度?

解决DropdownButtonFormField下拉菜单宽度占满屏幕的问题

直接给DropdownButtonFormField添加menuMaxWidth属性,将其值设为屏幕宽度的一半(_width * .5),就能限制下拉菜单的宽度,不受父容器Container的宽度影响。

修改后的完整代码:

Center(
  child: Container(
    margin: EdgeInsets.only(top: _height * .02),
    height: _height * .066,
    width: _width * .9,
    child: DropdownButtonFormField(
      // 添加该行限制菜单最大宽度为屏幕一半
      menuMaxWidth: _width * .5,
      borderRadius: BorderRadius.circular(10),
      focusColor: Colors.black,
      icon: Image.asset("assets/Arrow down.png"),
      value: chosen,
      dropdownColor: Colors.white,
      decoration: InputDecoration(
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5))),
      items: dropdownList
          .map((e) => DropdownMenuItem(
                child: Text(
                  e,
                  textAlign: TextAlign.center,
                  style:
                      TextStyle(color: Colors.grey, fontSize: 13),
                ),
                value: e,
              ))
          .toList(),
      onChanged: (String? value) {
        setState(() {
          chosen = value;
        });
      },
    ),
  ),
),

如果需要更灵活的控制,也可以将menuMaxWidth设置为固定数值(比如200),它会优先约束下拉菜单的宽度,同时保留菜单内容自适应的特性。

内容的提问来源于stack exchange,提问作者aoiTenshi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 10:05:15