[英]How to give a constant width to a Flutter DropdownButton widget?
[英]Flutter: How to minimize width of DropdownButton
Flutter 中的DropdownButton
根据其拥有的项目中最大的DropdownMenuItem
设置其宽度。 如果选择了一个小项目,则在项目和箭头之间留下很多空白。 如何使按钮缩放以适合所选项目的宽度?
我尝试使用Expanded
和一些Flexible
的东西,但我仍然无法改变它的宽度。
DropdownButton(
value: null,
hint: Text("Small text"),
items: ..., //Text widgets that have more text and are larger than the hint
)
用ButtonTheme
包装 Dropdown 按钮并添加alignedDropdown = true
,如:
ButtonTheme(
alignedDropdown: true,
child: DropdownButton(...),
)
alignedDropdown 将菜单项的宽度与按钮相匹配。 然后我们需要特定的宽度,所以用 SizedBox 或 Container 包裹 ButtonTheme:
SizedBox(
width: 25, // Your width for dropdowns
child: ButtonTheme(...),
)
您可以尝试将其包装在ButtonTheme中并设置alignedDropdown: true
return Container(
width: 300.0,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: null,
hint: Text("Small text"),
items: ..., //Text widgets that have more text and are larger than the hint
onChanged: onChanged,
style: Theme.of(context).textTheme.title,
),
),
),
);
这有效:
new Container(
padding: const EdgeInsets.fromLTRB(10.0, 5, 10, 0),
child: new Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 5),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(5.0),
bottomLeft: const Radius.circular(5.0),
bottomRight: const Radius.circular(5.0),
topRight: const Radius.circular(5.0))),
child: new Center(
child: new Column(children: [
new DropdownButton(
underline: Text(''),
icon: Icon(Icons.keyboard_arrow_down),
hint: new Text('Small text'),
style: TextStyle(
color: Colors.white30,
),
isExpanded: true,
value: _selectedLocation,
onChanged: (String newValue) {
setState(() {
_selectedLocation = newValue;
});
},
items: _locations.map((String location) {
return new DropdownMenuItem<String>(
value: location,
child: new Text(
location,
style: TextStyle(
color: myColour, fontWeight: FontWeight.bold),
),
);
}).toList(),
),
])),
))
如果我正确理解了您的问题,那么我也遇到了它并且我有解决方案。 只需将 Wrap 小部件作为 DropdownButton 的父级即可。 它将使下拉菜单环绕到值的大小(但不确定它会如何与空值反应)
Wrap(children: <Widget>[DropdownButton(
value: null,
hint: Text("Small text"),
items: //Text widgets that have more text and are larger than the hint
)])
到目前为止,我能够做到的方式是限制下拉列表中项目的宽度。
宽度实际上由 selectedItemBuilder 参数提供的最宽项目确定(如果未定义,则使用项目)。 通过这个小技巧,我设法让它工作:
DropdownButton<T>(
value: value,
selectedItemBuilder: (ctx) => [for (final item in items) value],
items: items,
onChanged: (value) => ... update value
示例中的 selectedItemBuilder 生成重复项的列表(与所选值对应的项)。 您将需要一个有状态的小部件来处理该值。
使用 DropdownButtonHideUnderline 删除下线变形 Dropdown
我设法通过定义alignment: Alignment.centerRight
来删除空格。 默认情况下,alignment 设置为Alignment.centerStart
,这会强制文本对齐开始,而图标设置为对齐结束。 因此,通过将文本居中对齐,它会填充出现在文本和图标之间的空白区域。 完整代码示例:
DropdownButton(
alignment: Alignment.centerRight,
child: .....
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.