Flutter中具有调整下拉箭头图标的全角DropdownButton

San*_*tel 10 widget dart flutter

我还需要在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,
)
Run Code Online (Sandbox Code Playgroud)

Pab*_*rra 30

只是添加isExpanded:trueDropdownButton

  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
        );
  }
Run Code Online (Sandbox Code Playgroud)

  • 不要忘记在 DropDownButton 小部件之外添加固定宽度容器或扩展小部件,否则“isExpanded: true”属性将不起作用并在控制台中显示错误。感谢您提出疑问。 (2认同)

aqw*_*ert 5

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

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  ...
)
Run Code Online (Sandbox Code Playgroud)

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

  • 将“isExpanded: true”添加到“DropDownButton”修复了这个@SandipPatel (4认同)
  • 谢谢@aqwert 使用你的代码我得到了 DropdownButton 的全宽,但 DropDownButton 箭头没有在那里调整。DropdownButton 箭头的全宽应位于末尾。 (2认同)