如何制作类似于开放式集装箱路线的路线

Question

我想使用导航器推送替换，但路线类似于 animations 包中的 OpenContainer()。使用英雄不起作用，因为我正在从 Container() 动画到 Scaffold()，所以小部件的宽度只是切到屏幕的宽度，只有高度动画。

Adobe XD 原型如下所示：https://cln.sh/ugu0Sq。

我希望动画看起来与OpenContainer() 路线动画完全相同。我不能使用OpenContainer()，因为我想使用pushReplacement() 而不是push()。我也不希望Hero() 每次都动画，如果用户通过bottomNavBar 正常导航到页面，我不希望发生动画，但如果他们点击小部件上

Answer 1

试试这个例子，把push改成pushReplacement，改变页面转换的速度：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(height: 200, color: Colors.blue),
          Hero(
            tag: 'YearReport',
            child: Container(
              height: 150,
              child: Card(
                child: ListTile(
                  title: Text("Year Report                         70%"),
                  leading: CircleAvatar(
                    child: Text("YR"),
                    backgroundColor: Colors.white,
                  ),
                  onTap: () {
                    print(curveList.length);
                    Navigator.of(context).push(PageRouteBuilder(
                        pageBuilder: (context, animation, anotherAnimation) {
                          return Scaffold(
                            body: Column(
                              children: [
                                Hero(
                                  tag: 'YearReport',
                                  child: Container(
                                    width: MediaQuery.of(context).size.width,
                                    child: Text("Year Report", style: TextStyle(fontSize: 60)),
                                  ),
                                ),
                                Container(height: 200, color: Colors.red),
                                Expanded(
                                  child: Container(color: Colors.green),
                                ),
                              ],
                            ),
                          );
                        },
                        transitionDuration: Duration(
                            milliseconds:
                                3000), //Change your page transition speed
                        transitionsBuilder:
                            (context, animation, anotherAnimation, child) {
                          animation = CurvedAnimation(
                              curve: Curves.linear, parent: animation);
                          return Align(
                            child: SizeTransition(
                              sizeFactor: animation,
                              child: child,
                              axisAlignment: 0.0,
                            ),
                          );
                        }));
                  },
                ),
              ),
            ),
          ),
          Expanded(
            child: Container(color: Colors.white),
          ),
        ],
      ),
    );