Question

我无法将DropdownButton中的所选项目对准中心。

我尝试了DropdownMenuItem下的child：Center（），它能够对齐这些项目，但是在我选择了其中一项之后，所选项目立即与Left对齐。我还想将所选项目与中心对齐。

有人知道如何实现吗？

谢谢。

_dropdown值：

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

Answer 1

只需将 Center 作为父项添加到DropdownMenuItem的子项

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

      onChanged: (value) {  },
    )

Answer 2

以防有人偶然发现此问题。您需要指定宽度，这可以通过使用selectedItemBuilder的{{1}}属性来实现。

DropdownButton

来自here的代码

Answer 3

您现在可能不需要，但是如果有人想知道我如何找到以下解决方案。

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

Answer 4

如果您不介意设置固定宽度，则可以将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(),
  // ...
),

Answer 5

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

您可以在颤抖的Github页面上针对此功能提出新问题。

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

5 个答案: