希望将下拉列表与flutter中下拉按钮2的中心对齐

cclgggtu  于 2023-01-02  发布在  Flutter
关注(0)|答案(2)|浏览(147)

在Flutter我想中心对齐的下拉列表。下面是我目前的代码,有人能指导我关于这一点。我想对齐它的中心就在下拉按钮下面。我应该对齐文本小部件或有任何其他属性来设置它的对齐方式

Center(
                                          child: Row(
                                            mainAxisAlignment: MainAxisAlignment.center,
                                            children: [
                                              DropdownButtonHideUnderline(
                                                child: Center(
                                                  child: DropdownButton2(
                                                    isExpanded: true,
                                                    items: items
                                                        .map((item) => DropdownMenuItem<String>(
                                                              value: item,
                                                              child: Text(
                                                                item,
                                                                style: const TextStyle(
                                                                  fontSize: 14,
                                                                  fontWeight: FontWeight.bold,
                                                                  color: Color.fromARGB(
                                                                      255, 214, 130, 3),
                                                                ),
                                                                overflow: TextOverflow.ellipsis,
                                                                textAlign: TextAlign.center,
                                                              ),
                                                            ))
                                                        .toList(),
                                                    value: selectedValue,
                                                    onChanged: (value) {
                                                      setState(() {
                                                        selectedValue = value as String;
                                                      });
                                                    },
                                                    icon: const Icon(
                                                      Icons.arrow_downward_sharp,
                                                    ),
                                                    iconSize: 14,
                                                    iconEnabledColor:
                                                        Color.fromARGB(255, 248, 150, 2),
                                                    iconDisabledColor: Colors.grey,
                                                    buttonHeight: 40,
                                                    buttonWidth:
                                                        MediaQuery.of(context).size.width * 0.8,
                                                    buttonPadding: const EdgeInsets.only(
                                                        left: 14, right: 14),
                                                    buttonDecoration: BoxDecoration(
                                                      borderRadius: BorderRadius.circular(14),
                                                      border: Border.all(
                                                        color: Colors.black26,
                                                      ),
                                                      color: Colors.white,
                                                    ),
                                                    buttonElevation: 2,
                                                    itemHeight: 40,
                                                    // alignment: Alignment.center,
                                                    itemPadding: const EdgeInsets.only(
                                                        left: 14, right: 14),
                                                    dropdownMaxHeight: 200,
                                                    dropdownWidth: 300,
                                                    alignment: Alignment.center,
                                                    dropdownPadding: null,
                                                    dropdownDecoration: BoxDecoration(
                                                      borderRadius: BorderRadius.circular(14),
                                                      color: Colors.white,
                                                    ),
                                                    dropdownFullScreen: true,
                                                    dropdownElevation: 8,
                                                    // dropdownOverButton: true,
                                                    scrollbarRadius: const Radius.circular(40),
                                                    scrollbarThickness: 6,
                                                    scrollbarAlwaysShow: true,
                
                                                    offset: const Offset(-20, 0),
                                                  ),
                                                ),
mpbci0fu

mpbci0fu1#

可以使用offset属性对齐下拉菜单。在代码中,您指定了负偏移量(X轴),这是下拉菜单项弹出到下拉菜单左侧的原因。
将偏移特性更改为(0,0):-

offset: const Offset(0, 0),// x,y axis

输出:-

要居中对齐菜单,请将其修改为(85,0)。您可以根据需要更改它:-

offset: const Offset(85, 0),

输出:-

bfrts1fy

bfrts1fy2#

这可能是由于row小工具中的mainAxisAlignment: MainAxisAlignment.center造成的
将其更改为mainAxisAlignment: MainAxisAlignment.start
或者如@Ramji所言:,您可以使用offset属性,如下所示:

offset: Offset(40, 0),

相关问题