flutter - Flutter DropDownButton弹出按钮下方200px

我在ListView中使用具有自定义样式的DropDownButton。我的问题是:PopupMenu在Button下方大约200-300px处打开，因此看起来下面的Button已经打开:


我将Dropdown打包为自定义样式，但是我已经尝试删除它了，但没有执行任何操作。我也尝试只使用普通的Dropdownbutton，但是效果相同。
相应的版本:

    @override
Widget build(BuildContext context) {
    homeModel = Provider.of<HomeModel>(context);
    model = Provider.of<TransferModel>(context);
    navigator = Navigator.of(context);
    var items = model.items.entries.toList();
    return Container(
      color: Colors.white,
      child: ListView.builder(
        physics: BouncingScrollPhysics(),
        itemCount: model.items.entries.length,
        itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.only(left: 30, right: 30, top: 10),
                child: CustomDropDown(
                  errorText: "",
                  hint: items[index].value["label"],
                  items: items[index]
                      .value["items"]
                      .asMap()
                      .map((int i, str) => MapEntry(
                          i,
                          DropdownMenuItem(
                            value: i,
                            child: Text(str is Map
                                ? str["displayName"].toString()
                                : str.toString()),
                          )))
                      .values
                      .toList()
                      .cast<DropdownMenuItem<int>>(),
                  value: items[index].value["selected"],
                  onChanged: (position) =>
                      model.selectItem(items[index].key, position),
                ),
              );
        },
      ),
    );

  }

CustomDropDown:

class CustomDropDown extends StatelessWidget {
  final int value;
  final String hint;
  final String errorText;
  final List<DropdownMenuItem> items;
  final Function onChanged;

  const CustomDropDown(
      {Key key,
      this.value,
      this.hint,
      this.items,
      this.onChanged,
      this.errorText})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              color: Colors.grey[100], borderRadius: BorderRadius.circular(30)),
          child: Padding(
            padding:
                const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 5),
            child: DropdownButton<int>(
              value: value,
              hint: Text(
                hint,
                style: TextStyle(fontSize: 20),
                overflow: TextOverflow.ellipsis,
              ),
              style: Theme.of(context).textTheme.title,
              items: items,
              onChanged: (item) {
                onChanged(item);
              },
              isExpanded: true,
              underline: Container(),
              icon: Icon(Icons.keyboard_arrow_down),
            ),
          ),
        ),
        if (errorText != null)
          Padding(
            padding: EdgeInsets.only(left: 30, top: 10),
            child: Text(errorText, style: TextStyle(fontSize: 12, color: Colors.red[800]),),
          )

      ],
    );
  }
}

编辑:我刚刚注意到，弹出窗口始终在屏幕中心打开。但是我仍然不知道为什么。

编辑2:感谢@JoãoSoares，我现在缩小了问题的范围:我在Widget的ListView周围加上AnimatedContainer来打开和关闭菜单。这个容器的填充似乎是罪魁祸首，但是我不知道如何解决这个问题，因为我需要那个Container:(Child是ListView Widget)

  class ContentSheet extends StatelessWidget {
  final Widget child;
  final bool isMenuVisible;

  const ContentSheet({Key key, this.child, this.isMenuVisible}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 50),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 450),
        curve: Curves.elasticOut,
        padding: EdgeInsets.only(top: isMenuVisible ? 400 : 100),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), topRight: Radius.circular(20)),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20), topRight: Radius.circular(20)),
              color: Colors.white,
            ),
            child: child
          ),
        ),
      ),
    );
  }
}

最佳答案

我用下面的代码尝试了CustomDropDown小部件，它可以按预期工作，但下拉菜单在 View 中显示的较低。您代码中的其他内容可能会影响其位置。

class DropdownIssue extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _DropdownIssueState();
  }
}

class _DropdownIssueState extends State<DropdownIssue> {
  int currentValue = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.grey,
        child: Container(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CustomDropDown(
                hint: 'hint',
                errorText: '',
                value: currentValue,
                items: [
                  DropdownMenuItem(
                    value: 0,
                    child: Text('test 0'),
                  ),
                  DropdownMenuItem(
                    value: 1,
                    child: Text('test 1'),
                  ),
                  DropdownMenuItem(
                    value: 2,
                    child: Text('test 2'),
                  ),
                ].cast<DropdownMenuItem<int>>(),
                onChanged: (value) {
                  setState(() {
                    currentValue = value;
                  });
                  print('changed to $value');
                }
              ),
            ],
          ),
        )
      ),
    );
  }
}

关于flutter - Flutter DropDownButton弹出按钮下方200px，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59717307/