flutter 如何在下拉按钮中居中文本?

n6lpvg4x  于 2023-01-31  发布在  Flutter
关注(0)|答案(6)|浏览(548)

我试图让DropdownButton提示、文本和菜单项显示在中间而不是左边,但TextAlign.center似乎没有做任何事情。
带有提示的下拉列表的图像:

以文本形式显示选定项的下拉列表的图像:

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

我的代码:

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,)),
5n0oy7gb

5n0oy7gb1#

对于那些看到选项来改变flutter类的人***dropdown.dart***。你不需要这样做。这样做:
1.将属性***已扩展*设置为true***
1.将居中小部件与
下拉菜单项
类子项一起使用。
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(),
      ),
hc8w905p

hc8w905p2#

一个简单直接的答案是不可能。但总有办法的。
如果你在DrpoDownMenuItem类上使用VSCode Ctrl+Click,你必须转到flutter包提供的dart下拉菜单,并更改下面的代码。

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

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

6psbrbz9

6psbrbz93#

是的,您可以像下面的代码示例那样执行此操作。

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) {},
                      ),
                    ),
                  ),
                ),
              ),
            ),

在这里我用我的颜色和装饰意见为我的porpose你可以改变它根据您的要求。

xiozqbni

xiozqbni4#

您可以使用下面的代码来完美地将下拉列表中的文本定位在中心位置,同时仍然将下拉列表图标定位在容器的右端。

DropdownButtonHideUnderline(
  child: DropdownButton(
    value: dropdownvalue,
    items: items.map((String items) {
      return DropdownMenuItem(
          value: items,
          child: Center(
            child: Text(items),
          ),
      );
    }).toList(),
    onChanged: (String? newValue) {
      setState(() {
          dropdownvalue = newValue!;
      });
    },
    isExpanded: true,
  ),
),

因此,我们只需添加isExpanded:true,并将Center()小工具添加到下拉菜单项()中的文本(项)

ugmeyewa

ugmeyewa5#

DropdownMenuItem类中有一个alignment属性。

DropdownButton(
  //...
  isExpanded: true, // this will take all width available
)

如果你想改变它的宽度包裹DropdownButtonSizedBoxPadding

item: [
  DropdownMenuItem(
    //...
    alignment: AlignmentDirectional.center,
  ),
]
6ioyuze2

6ioyuze26#

在下拉按钮窗体字段或下拉按钮中添加已扩展:真的,
像这样的事情
下拉按钮窗体字段(已展开:正确,)

相关问题