可滚动的颤振弹出菜单答案

【问题标题】：Scrollable flutter popup menu可滚动的颤振弹出菜单
【发布时间】：2018-08-02 01:27:51
【问题描述】：

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

可行吗？还是我使用了错误的小部件？

下面的图片作为参考，想只显示前 4 / 5 个项目，然后滚动显示其余部分！

提前致谢！

【问题讨论】：

标签： dart flutter

【解决方案1】：

您可以通过两种方式创建它：第一种是PopupMenuButton 小部件，第二种是PopupRoute。

class HomePage extends StatefulWidget {

@覆盖 _HomepageState createState() => _HomepageState(); }

类 _HomepageState 扩展状态 {

列表项 = [1,2,3,4,5,6,7,8,9,10,11,12,13];

@覆盖小部件构建（BuildContext 上下文）{

return Scaffold(body: Center(
  child: PopupMenuButton(
      child: Icon(Icons.add_shopping_cart),
      offset: Offset(-1.0, -220.0),
      elevation: 0,
      color: Colors.transparent,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
      itemBuilder: (context) {
        return <PopupMenuEntry<Widget>>[
          PopupMenuItem<Widget>(
            child: Container(
              decoration: ShapeDecoration(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10))),
              child: Scrollbar(
                child: ListView.builder(
                  padding: EdgeInsets.only(top: 20),

                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    final trans = items[index];
                    return ListTile(

                      title: Text(
                        trans.toString(),
                        style: TextStyle(
                          fontSize: 16,

                        ),
                      ),

                      onTap: () {
                        //what would you like to do?
                      },
                    );
                  },
                ),
              ),
              height: 250,
              width: 500,
            ),
          )
        ];
      }),
)

您还可以通过减少或增加容器的高度来调整要显示的项目数量。我还添加了一个滚动条以防万一。

【讨论】：

【解决方案2】：

您可以创建自己的弹出窗口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: () {}
                    );
                  },
              ),
          ),
      ],
    );

【讨论】：