Flutter 弹出窗口小部件

Question

我有一个 Flutter 应用程序屏幕，我在其中列出搜索结果，在右上角我有一个搜索图标，当我点击它时我想打开一个弹出窗口小部件，如导航抽屉。这是可以实现的吗？示例代码会很棒。谢谢

Answer 1

我使用的是 modalBottomSheet，它从下到上（不是从右）打开：

showModalBottomSheet(
                        context: context,
                        builder: (BuildContext context) {
                          return Container(
                            height: MediaQuery.of(context).size.height,
                            width: MediaQuery.of(context).size.width,
                           
                            child: Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  Text(
                                    'Filter Results'
                                  ),
                                  Divider(),
                                  Container(child: _searchForm(context)),
                                ],
                              ),
                            ),
                          );
                        });

Answer 2

我做了一个抽屉一样的东西我正在粘贴下面的代码你可以看到同样的东西

 transform: Matrix4.translationValues(xOffset, yOffset , 0)..scale(scaleFactor)..rotateY(isDrawerOpen?-0.2:0),
      duration: Duration(milliseconds: 300),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(color: Color(0xFFECCB95), blurRadius: 20, offset: Offset(0, 10)),
        ],
        color :   Color(0xFF1C1C1C),
        borderRadius: BorderRadius.circular(isDrawerOpen?40:0.0),
      )
      ,
       child: Stack(
            children: [
              Transform.rotate(
                origin: Offset(30, -60),
                angle: 2.4,
                child: Container(
                  margin: EdgeInsets.only(
                    left: 75,
                    top: 40,
                  ),
                  height: 400,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(80),
                    gradient: LinearGradient(
                      begin: Alignment.bottomLeft,
                      colors : [Color(0xffFD8BAB), Color(0xFFFD44C4)],
                    ),
                  ),
                ),
              ),

这是您的第一个屏幕的主页现在您必须创建第二个屏幕并在另一个文件中调用它们，如下所示

 @override
  void initState(){
    super.initState();
    getEmail();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF363567),
      body: Stack(
        children: [
          HomeScreen(),
          SideBar(),
        ],
      ),
    );

现在，当您同时调用它们时，第二个屏幕只会在单击搜索栏后出现，因此您可以在我使用按钮的地方随意使用它。使用相同的方法，您可以创建任意两个屏幕并模糊您想要模糊的那个。

Answer 3

可以用抽屉了！

创建 Drawer() 小部件

Drawer(
  child: //Your contents
)

在 Scaffold 中，使用 endDrawer: 而不是 drawer: 使抽屉从右侧弹出

Scaffold(
  endDrawer: Drawer(),
)

要打开抽屉，请将其放入 onTap 或 onPressed

Scaffold.of(context).openDrawer();

Flutter 弹出窗口小部件

Flutter popup widget

flutter

flutter-layout

flutter-widget