dart - 可滚动的 flutter 弹出菜单

Question

我正在尝试使用flutter弹出菜单按钮，但似乎无法通过滚动使其变小。

可以吗还是我使用了错误的小部件来执行此操作？

下图仅供引用，只显示前4/5个项目，然后滚动以显示其余项目!

提前致谢!

Answer 1

您可以改为创建自己的PopUp Widget。

将Card包装为具有特定尺寸的AnimatedContainer和内部的ListView。

使用Stack和Positioned小部件将此小部件放置在屏幕上，使其位于顶部的其他元素之上。对。

class CustomPopup extends StatefulWidget {
  CustomPopup({
    @required this.show,
    @required this.items,
    @required this.builderFunction,
  });

  final bool show;
  final List<dynamic> items;
  final Function(BuildContext context, dynamic item) builderFunction;

  @override
  _CustomPopupState createState() => _CustomPopupState();
}

class _CustomPopupState extends State<CustomPopup> {
  @override
  Widget build(BuildContext context) {
    return Offstage(
      offstage: !widget.show,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        height: widget.show ? MediaQuery.of(context).size.height / 3 : 0,
        width: MediaQuery.of(context).size.width / 3,
        child: Card(
          elevation: 3,
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: widget.items.length,
              itemBuilder: (context, index) {
                Widget item = widget.builderFunction(
                  context,
                  widget.items[index],
                );
                return item;
              },
            ),
          ),
        ),
      ),
    );
  }
}

return Stack(
      children: <Widget>[
        Container(
          color: Colors.blueAccent,
        ),
        Positioned(
          right: 0, 
          top: 60, 
          child: CustomPopup(
                  show: shouldShow,
                  items: [1, 2, 3, 4, 5, 6, 7, 8],
                  builderFunction: (context, item) {
                    return ListTile(
                       title: Text(item.toString()),
                       onTap: () {}
                    );
                  },
              ),
          ),
      ],
    );