如何将底部工作表位置设置为顶部

Posted 2023-02-23

【中文标题】如何将底部工作表位置设置为顶部

【英文标题】：How to set Bottom Sheet position to top

【发布时间】：2019-10-19 19:25:00

【问题描述】：

我想创建一个可扩展的容器，其中包含多个控件，例如文本输入和按钮。

所以我已经实现了一个底部工作表，但我想将此位置设置在顶部。

代码：

Widget build(BuildContext context) 
    return Container(
      child: Center(
        child: RaisedButton(
            child: Text('Show Buttom Sheet'),
            onPressed: () 
              showModalBottomSheet(context: context, builder: (context)
                return StreamBuilder(
                  stream: controller.stream,
                  builder:(context,snapshot) => GestureDetector(
                      onVerticalDragUpdate: (DragUpdateDetails details)

                        position = MediaQuery.of(context).size.height- 
                      details.globalPosition.dy;
                        print('position dy = $position');

                        position.isNegative?Navigator.pop(context)

                            :controller.add(position);

                      ,
                      behavior: HitTestBehavior.translucent,
                      child:
                      Container(
                        color: Colors.red,
                        height: snapshot.hasData ? snapshot.data:200.0,
                        width: double.infinity,
                        child: Text('Child'),
                      )),
                );

              );

            ),
      ),
    );
  

【参考方案1】：

看看Material Design reference for Bottom Sheets，它确实表明使用符合人体工程学，这意味着它应该位于底部，因为用拇指更容易触及（使用手机时）。似乎没有“Top Sheets”的其他示例，这意味着有更好的方法来处理单击位于屏幕顶部的按钮。例如，在 Gmail 中，点击您的头像会生成一张卡片，该卡片位于按钮下方。

话虽如此，这里有一种创建“Top Sheet”的方法：

IconButton(
  icon: Icon(Icons.star),
  onPressed: () 
    return showGeneralDialog(
      context: context,
      barrierDismissible: true,
      transitionDuration: Duration(milliseconds: 500),
      barrierLabel: MaterialLocalizations.of(context).dialogLabel,
      barrierColor: Colors.black.withOpacity(0.5),
      pageBuilder: (context, _, __) 
        return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: Card(
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    ListTile(
                      title: Text('Item 1'),
                      onTap: () => Navigator.of(context).pop('item1'),
                    ),
                    ListTile(
                      title: Text('Item 2'),
                      onTap: () => Navigator.of(context).pop('item2'),
                    ),
                    ListTile(
                      title: Text('Item 3'),
                      onTap: () => Navigator.of(context).pop('item3'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        );
      ,
      transitionBuilder: (context, animation, secondaryAnimation, child) 
        return SlideTransition(
          position: CurvedAnimation(
            parent: animation,
            curve: Curves.easeOut,
          ).drive(Tween<Offset>(
            begin: Offset(0, -1.0),
            end: Offset.zero,
          )),
          child: child,
        );
      ,
    );
  
);

【讨论】：

你知道有什么方法可以让这个 Dismissible & Draggable 吗？ （从下往上拖动隐藏）

【参考方案2】：

我认为你想要的小部件是 BackDrop。

Example here

从Actual Flutter Gallery 他们也在选项中使用它

【讨论】：

实际上我在应用栏名称上有一个按钮是过滤器，单击过滤器按钮后会打开一个覆盖半屏，其中包含多个条目文本和按钮，单击按钮后覆盖屏幕将关闭。在像幻灯片一样关闭后，此覆盖屏幕将来自顶部并返回顶部。