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使“菜单”项显示在中间，但是即使使用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

对于那些看到可以更改颤动等级 dropdown.dart 的人。您不需要这样做。这样做：

将属性 isExpanded 设置为 true
将 Center 小部件与 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(),
      ),

Answer 2

是的，您可以像下面的代码示例一样进行操作。

Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              margin: EdgeInsets.only(top: 5, bottom: 5),
              padding: EdgeInsets.only(right: 5, left: 5),
              child: ConstrainedBox(
                constraints: const BoxConstraints(
                  minWidth: double.infinity,
                ),
                child: Container(
                  child: Center(
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton(
                        iconSize: 0.0,
                        items: <DropdownMenuItem<int>>[
                          new DropdownMenuItem(
                            child: new Text(
                              'Optional Information',
                              style: TextStyle(color: Colors.black54),
                            ),
                          ),
                          new DropdownMenuItem(
                            child: new Text(
                              'Male',
                              style: TextStyle(color: Colors.black54),
                            ),
                          ),
                          new DropdownMenuItem(
                              child: new Text(
                            'Female',
                            style: TextStyle(color: Colors.black54),
                          )),
                        ],
                        onChanged: (V) {},
                      ),
                    ),
                  ),
                ),
              ),
            ),

在这里，我使用了我的颜色和装饰视图，可以根据需要进行更改。

Answer 3

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

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

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

将alignment: AlignmentDirectional.centerStart更改为alignment: AlignmentDirectional.center，它应该可以工作：）

如何在DropdownButton中居中放置文本？

3 个答案: