[英]Flutter - How to align selected item from DropdownButton?
I am unable to align the selected item from DropdownButton to the center.我无法将所选项目从 DropdownButton 对齐到中心。
I have tried child: Center() under the DropdownMenuItem, it is able to align those items however after I have selected one of the items, the selected item was aligned to the Left immediately.我已经尝试过 child: Center() 在 DropdownMenuItem 下,它能够对齐这些项目,但是在我选择了其中一个项目之后,所选项目立即与左侧对齐。 I would also like to align the selected item to the Center.
我还想将所选项目与中心对齐。
Anyone knows how to achieve it?任何人都知道如何实现它?
Thanks in advance.提前致谢。
Unable to align selected item to Center无法将所选项目与中心对齐
_dropdownValues: _dropdown值:
final List<String> _dropdownValues = [
"One",
"Two12345",
"Three123456789",
"Four",
];
String _selectedValue;
Under Widget Build:在小部件构建下:
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text('Name:',),
),
Container(
child: Center(
child: DropdownButton(
hint: Text('Select ...'),
items: _dropdownValues.map((value) => DropdownMenuItem(
child: Center( child: Text(value), ),
value: value,
)).toList(),
onChanged: (String value) {
setState(() {
this._selectedValue = value;
});
},
isExpanded: false,
value: _selectedValue,
),
),
),
],
),
),
If you don't mind setting a fixed width you can wrap your DropdownMenuItem
Text
child in a SizedBox
.如果您不介意设置固定宽度,您可以将
DropdownMenuItem
Text
子项包装在SizedBox
。 Then you set the textAlign
property to TextAlign.center
, like so:然后将
textAlign
属性设置为TextAlign.center
,如下所示:
DropdownButton(
// ...
items: _dropdownValues.map((value) => DropdownMenuItem(
child: SizedBox(
width: 100.0, // for example
child: Text(value, textAlign: TextAlign.center),
),
value: value,
)).toList(),
// ...
),
Incase someone stumble upon this issue.以防有人偶然发现这个问题。 You need to specify width and this can be achieved by using
selectedItemBuilder
property of DropdownButton
.您需要指定宽度,这可以通过使用
DropdownButton
selectedItemBuilder
属性来实现。
final List<String> items = <String>['1','2','3'];
String selectedItem = '1';
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: DropdownButton<String>(
value: selectedItem,
hint: Container(
alignment: Alignment.centerRight,
width: 180,
child: Text("Hint text", textAlign: TextAlign.end)
),
onChanged: (String string) => setState(() => selectedItem = string),
selectedItemBuilder: (BuildContext context) {
return items.map<Widget>((String item) {
return Container(
alignment: Alignment.centerRight,
width: 180,
child: Text(item, textAlign: TextAlign.end)
);
}).toList();
},
items: items.map((String item) {
return DropdownMenuItem<String>(
child: Text('Log $item'),
value: item,
);
}).toList(),
),
);
}
just add Center as parent to child of DropdownMenuItem只需将Center作为父项添加到 DropdownMenuItem 的子项
DropdownButton(
items: genderList
.map((string) => DropdownMenuItem(
child: Center(
child: Text(
string,
style: Theme.of(context).textTheme.bodyText2,
),
),
))
.toList(),
onChanged: (value) { },
)
You probably won't need this now but if anyone is wondering how I found the following solution.您现在可能不需要这个,但如果有人想知道我是如何找到以下解决方案的。
DropdownButton(
hint: Align(alignment: Alignment.centerRight, child: Text('any text')),
...
items: _dropdownValues.map((item) {
return DropdownMenuItem(
child: new Align(alignment: Alignment.centerRight, child: Text(item)),
value: item,);
}).toList(),
)
This is the expected behavior, default alignment of the menu item is centerLeft as per this link: https://github.com/flutter/flutter/issues/3759这是预期的行为,根据此链接,菜单项的默认对齐方式为 centerLeft: https : //github.com/flutter/flutter/issues/3759
You can raise a new issue for this functionality on the flutter Github page.您可以在 flutter Github 页面上针对此功能提出新问题。
DropdownButton(下拉按钮(
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
) )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.