flutter - 如何在DropdownButton中居中显示文字？

Question

我正在尝试使DropdownButton提示，文本和菜单项出现在中间而不是左侧，但是TextAlign.center似乎没有任何作用。

带有提示的Dropdown图片:



下拉菜单的图像，其中所选项目为文本:



按下箭头时菜单项的图像:



我的代码:

return Theme(
  data: ThemeData(canvasColor: blackTrans2, brightness: Brightness.dark),
  child:Container(
    width: MediaQuery.of(context).size.width/1.2,
    decoration: BoxDecoration(
    color: blackTrans,
    borderRadius: BorderRadius.all(Radius.circular(5.0)),
    ),   
    child:DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
        child: DropdownButton(
          value: _dateSelected,
          hint: AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,),
          isDense: false,
          onChanged: (String newValue){
            setState(() {
            _dateSelected = newValue;
            });
          },
          items: snapshot.data.documents.map((DocumentSnapshot document){
            return DropdownMenuItem<String>(
              value: document.documentID,
              child: AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,),
            );
          }).toList(),
        ),
      ),
    )
  )
);

不知道这是否会影响任何东西，但是我正在使用 AutoSizeText来动态调整文本大小。

更新:我通过使用 Center设法使Menu项显示在中间，但是即使使用 Center，文本和提示仍然保留在左侧...:

// Does not seem to change the hint or text position (when menu item selected)
hint: Center(child:AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,)),

// Changes the menu item to the center instead of left
child: Center(child:AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,)),

Answer 1

对于那些正在查看的用户，可以选择更改Flutter类 dropdown.dart 。您不需要这样做。
做这个:

将属性设置为扩展为真

将中心小部件与 DropdownMenuItem 类的子级一起使用。

IsExpanded也将照顾溢出。

DropdownButton(
     isExpanded: true,
     value: category_selected,
     items: categories.map<DropdownMenuItem<String>>((var value) {
        return DropdownMenuItem<String>(
          value: value["name"],
          child: Center(
                 child: Text(
                        value["name"],
                        textAlign: TextAlign.center,
                      ),
                    ),
                 );
           }).toList(),
      ),