【问题标题】:Full width DropdownButton with adjust dropdown arrow icon in FlutterFlutter 中带有调整下拉箭头图标的全宽 DropdownButton
【发布时间】:2019-01-21 07:25:48
【问题描述】:

我还需要在 Flutter 中添加带有调整下拉箭头图标的全宽 DropdownButton。但是很多人尝试了很多方法,但它并没有完全扩展它的宽度。

这是我的DropdownButton 代码:

new Expanded(
    child: new Column(
    children: <Widget>[
        new DropdownButton(
            items: [
                new DropdownMenuItem(child: new Text("Abc")),
                new DropdownMenuItem(child: new Text("Xyz")),
            ],
            hint: new Text("Select City"),
            onChanged: null
          )
       ]
    ),
    flex: 1,
)

【问题讨论】:

    标签: dart widget flutter


    【解决方案1】:

    只需将isExpanded:true 添加到DropdownButton

      Widget example() {
        return new DropdownButton(
              isExpanded: true,
                items: [
                  new DropdownMenuItem(child: new Text("Abc")),
                  new DropdownMenuItem(child: new Text("Xyz")),
                ],
                hint: new Text("Select City"),
                onChanged: null
            );
      }
    

    【讨论】:

    • 不要忘记在 DropDownButton 小部件之外添加固定宽度容器或扩展小部件,否则“isExpanded: true”属性将不起作用并在控制台中显示错误。感谢您的询问。
    【解决方案2】:

    尝试在您拥有的列中添加以下内容...

    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      ...
    )
    

    您不应该需要 Expanded 小部件,因为它会尝试填充垂直空间而不是水平(宽度)空间。

    【讨论】:

    • 感谢@aqwert 使用您的代码我得到了 DropdownButton 的全宽,但 DropDownButton 箭头没有在那里调整。由于 DropdownButton 箭头的全宽应位于末尾。
    • isExpanded: true 添加到DropDownButton 修复了这个@SandipPatel
    猜你喜欢
    • 1970-01-01
    • 2018-08-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-11
    相关资源
    最近更新 更多