Flutter - 如何对齐DropdownButton中的所选项目？

Question

我无法将DropdownButton中选定的项目居中对齐。

我尝试在DropdownMenuItem下使用child: Center()，可以使这些项目居中对齐，但是在我选择其中一个项目后，所选项目立即向左对齐。我还想将所选项目居中对齐。

有人知道该如何实现吗？

提前感谢。

Unable to align selected item to Center

_dropdownValues:

final List<String> _dropdownValues = [
  "One",
  "Two12345",
  "Three123456789",
  "Four",
  ];

  String _selectedValue;

在小部件构建下：

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,
                ),
              ),
            ),
          ],
        ),
      ),

- speedlight

Answer 1

如果有人遇到这个问题，你需要指定宽度，可以通过使用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(),
    ),
  );
}

代码来自此处

- WatsMyName

---

这应该是正确的答案 - 被接受的答案只对齐了列表，而没有对齐所选项目。这个答案做到了。谢谢！ - Fellow7000

Answer 2

如果您不介意设置固定宽度，您可以将 DropdownMenuItem 的 Text 子组件包装在一个 SizedBox 中。然后将 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(),
  // ...
),

- Sven

Answer 3

只需将Center作为DropdownMenuItem的父级添加到子级中即可。

   DropdownButton(
      items: genderList
          .map((string) => DropdownMenuItem(
                child: Center(
                  child: Text(
                    string,
                    style: Theme.of(context).textTheme.bodyText2,
                  ),
                ),
              ))
          .toList(), 
      
      onChanged: (value) {  },
    )

- Mahmoud Abu Alheja

Answer 4

你现在可能用不上这个，但如果有人想知道我是如何找到以下解决方案的，请听我讲述。

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(),
)

- Ouardia

Answer 5

DropdownButton(

alignment: Alignment.centerRight,

)

- Nguyễn Quốc Việt

Answer 6

这是预期的行为，菜单项的默认对齐方式是centerLeft，参见此链接：https://github.com/flutter/flutter/issues/3759

您可以在Flutter Github页面上提出新问题以获取此功能。

- miteshpithadiya

---

那是3年前相反的行为。它提到当选择时，文本是居中的，而下拉菜单则是左对齐的。我的代码已经在下拉菜单中居中对齐，但无法在选择时居中对齐。 - speedlight