Flutter中如何居中Row内Expanded包裹的DropdownButton内容

要让DropdownButton的文本和下拉图标居中，只需给它添加两个关键属性即可：

• 设置isExpanded: true：让DropdownButton填充Expanded分配的全部宽度
• 设置alignment: Alignment.center：让按钮内部的文本和图标整体居中

修改后的DropdownButton代码如下：

Expanded(
  child: DropdownButton(
    value: selectedCity,
    // 添加这两个属性
    isExpanded: true,
    alignment: Alignment.center,
    items: [
      ...kCities.map(
        (city) => DropdownMenuItem(
          value: city,
          child: Text(city),
        ),
      ),
    ],
    onChanged: (value) {
      setState(() {
        selectedCity = value!;
      });
    },
  ),
),

如果需要更精细的控制（比如单独调整文本或图标的位置），可以自定义DropdownButton的selectedItemBuilder，不过上述方法已经能解决大部分场景下的居中需求。

内容的提问来源于stack exchange，提问作者Twisha Solgama