flutter - 更改路线后颤动如何删除按钮

Question

我被这个案子困住了。我在颤振应用程序上有路由，那里是渐变背景。当路线改变时，动画会运行，但前一页的内容仍然可见。如何删除上一页的内容？

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: <Color>[Colors.redAccent, Colors.blueAccent],
          ),
        ),
        child: const Screen1(),
      ),
    );
  }
}

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CupertinoButton(
        color: Colors.black12,
        child: const Text('Click'),
        onPressed: () {
          Navigator.push(
            context,
            _createRoute(this, const Screen2()),
          );
        },
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: CupertinoButton(
          color: Colors.black12,
          child: const Text('Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}


Route _createRoute(Widget exitPage, Widget enterPage) {
  return PageRouteBuilder(
    opaque: false,
    pageBuilder: (context, animation, secondaryAnimation) => enterPage,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1, 0);
      const zero = Offset.zero;
      const curve = Curves.easeInOut;

      var tween = Tween<Offset>(begin: begin, end: zero)
          .chain(CurveTween(curve: curve));
      var tween2 = Tween<Offset>(begin: zero, end: const Offset(-1, 0))
          .chain(CurveTween(curve: curve));

      return Stack(
        children: <Widget>[
          SlideTransition(
            position: tween.animate(animation),
            child: enterPage,
          ),
          SlideTransition(
            position: tween2.animate(animation),
            child: exitPage,
          ),
        ],
      );
    },
  );
}

dartpad 链接：https ://dartpad.dev/?id=c69d10993772b2bbe76c729063866dc3

感谢您的回复 ：）

Answer 1

这是您的解决方案，第一个解决方案：只需将 PageRouteBuilder 不透明值更改为 true。

或者

如果你想要所有路由页面的渐变，使用这个，

class gradientbg extends StatelessWidget {

  Widget child;
  gradientbg({@required this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: <Color>[Colors.redAccent, Colors.blueAccent],
        ),
      ),
      child: child,
    );
  }
}

你可以这样使用，

  @override
  Widget build(BuildContext context) {

    return gradientbg(
      child: Scaffold(
        backgroundColor: Colors.transparent,
      )
    );