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

带有提示的Dropdown图片:

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

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

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

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

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

我的代码:

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使菜单项出现在中间,但是即使使用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,)),

最佳答案

一个简单而直接的答案是不可能。但是总有办法。

如果要在Ctrl+Click类上使用VSCode DrpoDownMenuItem,请转到flutter软件包随附的dropdown.dart并更改以下代码。

@override
  Widget build(BuildContext context) {
    return Container(
      height: _kMenuItemHeight,
      alignment: AlignmentDirectional.centerStart,
      child: child,
    );
  }

alignment: AlignmentDirectional.centerStart更改为alignment: AlignmentDirectional.center,它应该可以工作:)

08-18 17:50
查看更多