Flutter 页面入栈和出栈

Docs

demo

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: RaisedButton(
        child: Text('跳转到 screen2'),
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => Screen2(),
          ));
        },
      ),
    ));
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('back'),
          onPressed: () {
            Navigator.of(context).pop(null);
          },
        ),
      ),
    );
  }
}

配置 routes 跳转

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ajnauw',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      routes: <String, WidgetBuilder>{
        '/a': (BuildContext context) => MyPage(title: 'page A'),
        '/b': (BuildContext context) => MyPage(title: 'page B'),
        '/c': (BuildContext context) => MyPage(title: 'page C'),
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _pages = <String>['/a', '/b', '/c'];
  String togoPage = '/b';

  _handleRadioValueChange(String nv) {
    setState(() {
      togoPage = nv;
    });
  }

  // 返回一个小widget
  Widget _generagorRadio(String pageName) {
    return GestureDetector(
      onTap: () {
        _handleRadioValueChange(pageName);
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.grey[200],
        ),
        margin: EdgeInsets.only(top: 8.0),
        child: Row(
          children: <Widget>[
            Radio(
              value: pageName,
              onChanged: _handleRadioValueChange,
              groupValue: togoPage,
            ),
            Text(pageName),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('demo'),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 8.0, right: 8.0),
            child: Column(
              children: _pages
                  .map((String pageName) => _generagorRadio(pageName))
                  .toList(),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
            child: RaisedButton(
              onPressed: () {
                // 点击触发事件，页面入栈
                Navigator.pushNamed(context, togoPage);
              },
              color: Theme.of(context).primaryColor,
              child: Text('跳转新页面 $togoPage'),
            ),
          ),
        ],
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  final String title;

  MyPage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}

动画页面路劲转换

• 为页面路径转换设置动画
• 自定义路由切换动画

          Navigator.of(context).push(
            PageRouteBuilder(
              transitionDuration: Duration(milliseconds: 500),
              pageBuilder: (context, animation, secondaryAnimation) =>
                  Screen2(),
              transitionsBuilder:
                  (context, animation, secondaryAnimation, child) {
                var begin = Offset(0.0, 1.0);
                var end = Offset.zero;
                var curve = Curves.ease;

                var tween = Tween(begin: begin, end: end);
                var curvedAnimation = CurvedAnimation(
                  parent: animation,
                  curve: curve,
                );
                return SlideTransition(
                  position: tween.animate(curvedAnimation),
                  child: child,
                );
              },
            ),
          );

pushReplacement

通过推送给定路线替换导航器的当前路线，然后在新路线完成动画输入后处置前一路线

Navigator.of(context).pushReplacement(
  MaterialPageRoute(builder: (context) => HomePage())
)

设置404页面

    MaterialApp(
      navigatorObservers: [routeObserver],
      home: HomePage(),
      title: 'home',
      onUnknownRoute: (RouteSettings settings) {
        return MaterialPageRoute(
          builder: (context) => Title(
            title: '页面未找到',
            color: Theme.of(context).primaryColor,
            child: Scaffold(
              appBar: AppBar(),
              body: Center(child: Text('404')),
            ),
          ),
          settings: RouteSettings(
            name: 'not-found',
          ),
        );
      },
    );

设置不同的进场/出场动画

Navigator.of(context).push(
  PageRouteBuilder(
      transitionDuration: Duration(milliseconds: 500),
      pageBuilder: (context, animation, secondaryAnimation) =>
          Scaffold(
            backgroundColor: Colors.red,
            body: Center(child: Text('page 2')),
            floatingActionButton: FloatingActionButton(
              child: Icon(Icons.backspace),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ),
      transitionsBuilder: (
        context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        child,
      ) {
        return SlideTransition(
          position: Tween(
            // 关键点
            begin: animation.status == AnimationStatus.reverse
                ? const Offset(-1.0, -1.0)
                : const Offset(1.0, 1.0),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      }),
);