Flutter-向下滑动以启动Navigator.pop动画

问题描述

我想知道如何在页面上向下滑动以开始弹出动画，但是我希望在向下滑动时播放动画。例如，iOS上的“从左向右滑动”以弹出页面是惊人的，因为将要弹出的页面跟随手指轻扫LTR。我想垂直但也要这样做，我们可以从脚手架中的任何位置（不一定从顶部边缘）将其关闭。我的动画有英雄动画，所以可能会更难。

这是现在的样子：

我想播放此动画，但要向下滑动，而不是从左侧滑动。 （与该动画完全一样，或者与页面向下滑动类似）。

这是我要滑动以关闭的页面：

class TreeDescription extends StatelessWidget {
  Tree tree;
  bool goBackArrow;

  TreeDescription(this.tree,{this.goBackArrow = true});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onVerticalDragStart: (details) => print("Do something"),child: Column(
          children: <Widget>[
            Stack(
              children: [
                Hero(
                  transitionOnUserGestures: true,tag: tree.imagePath,child: Container(
                    height: MediaQuery.of(context).size.width,decoration: Boxdecoration(
                      gradient: LinearGradient(
                          colors: [Colors.black,Colors.transparent],begin: Alignment.bottomCenter,end: Alignment.topCenter,stops: [0,0.2]
                      ),borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),bottomright: Radius.circular(20)),image: decorationImage(image: Assetimage(tree.imagePath),fit: BoxFit.cover),),child: Align(
                      alignment: Alignment.bottomCenter,child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.end,children: [
                          Text(
                            tree.name,style: Theme.of(context)
                                .textTheme
                                .headline4
                                .copyWith(fontWeight: FontWeight.w600,color: Colors.white),Text(
                            tree.species,style: Theme.of(context)
                                .textTheme
                                .headline6
                                .copyWith(fontWeight: FontWeight.w600,],goBackArrow ? Positioned(
                  top: 30,child: IconButton(
                    icon: Icon(Icons.chevron_left,color: Colors.white,size: 40,onpressed: () => Navigator.pop(context),tooltip: 'Retour',) : SizedBox.shrink()
              ],Expanded(
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,children: [
                      Text("Description :",style: Theme.of(context).textTheme.headline6.copyWith(color: Theme.of(context).primaryColor),Text(tree.description,textAlign: TextAlign.justify,SizedBox(height: 20,Text("La feuille du ${tree.name.toLowerCase()} :",SizedBox(height: 5,Row(
                        children: [
                          Container(
                            width: MediaQuery.of(context).size.width/2-40,child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),child: Image.asset(tree.leafImagePath)
                            ),SizedBox(width: 5,Expanded(
                              child: Text(tree.leafDescription,)
                          ),)
          ],);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）