将下拉项定位在按钮 Flutter 下方

Question

我正在拼命寻找一种方法将项目放置在按钮下方。

如您所见，如果之前选择了第一项，则列表顶部与按钮处于同一级别。

但是，如果我之前选择了最后一项，则下拉列表的位置使得列表在按钮级别结束。

这不是我想要的行为。我希望它始终位于第一个屏幕截图中，即使之前选择了不是第一个元素。

class DropDownButton extends StatefulWidget {
  final List<String> options;

  const DropDownButton({Key? key, required this.options}) : super(key: key);

  @override
  State<DropDownButton> createState() => _DropDownButtonState();
}

class _DropDownButtonState extends State<DropDownButton> {
  String dropdownValue = '';


  @override
  Widget build(BuildContext context) {
    dropdownValue = dropdownValue.isEmpty ? widget.options[0] : dropdownValue;

    return SizedBox(
      height: 70,
      child: Container(
        margin: const EdgeInsets.fromLTRB(2, 5, 2, 5),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(3),
          border: Border.all(color: Colors.white, width: 2),
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
              isExpanded: true,
              value: dropdownValue,
              items: widget.options
                  .map((e) =>
                  DropdownMenuItem(
                      value: e,
                      child: Text(e)))
                  .toList(),
              onChanged: (value) {
                setState(() {
                  dropdownValue = value!;
                });
              }),
        ),
      ),
    );
  }
}

既然我正在谈论这个话题。有没有办法让列表实际上位于按钮下方，并且您实际上可以看到带有提示文本的按钮？

喜欢

-按钮-

-项目1-

-项目2-

-第3项-

Answer 1

我使用下拉菜单小部件找到了解决方案，使用参数 menuStyle 我可以控制大小和对齐方式。 您可以通过提供 Alignment.bottomLeft 来控制显示在下方的对齐方式。 您可以使用 MaximumSize 属性控制弹出的下拉菜单的大小。 我的代码如下：

//  note that Sizes file has the following property 
//  that I also used static const p124 = 124.0

  return DropdownMenu<CountryEntity>(
        controller: countryController,
        label: const Text('Country'),
        width: 300,
        dropdownMenuEntries: countryEntities,
        enableFilter: true,
        menuStyle: const MenuStyle(
            alignment: Alignment.bottomLeft,
            maximumSize:
                MaterialStatePropertyAll(Size.fromHeight(Sizes.p124)),),
        requestFocusOnTap: true,
        onSelected: (country) {
          setState(() {
            selectedCountryId = country;
          });
        },
      );

这是添加菜单样式属性之前的样子：

这是添加菜单样式属性后的样子