如何将底板位置设置为顶端

问题描述

我要创建一个具有多个控件(如文本条目和按钮)的可扩展容器。

所以我实现了底页，但我想将此位置设置在最上面。

编码：

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'),
                      )),
                );

              });

            }),
      ),
    );
  }

推荐答案

查看Material Design reference for Bottom Sheets确实建议用法符合人体工程学，这意味着它应该放在底部，因为(使用手机时)拇指更容易到达。似乎没有其他"Top Sheet"的例子，这意味着有更好的方法来处理点击屏幕顶部的按钮。例如，在Gmail中，单击您的头像将显示一个位于按钮下方的卡片。

话虽如此，这里有一种创建"顶页"的方法：

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,
        );
      },
    );
  }
);