Flutter中navigator使用

  • 使用三方依赖实现页面跳转
    还没研究
  • 正常实现跳转

4种:

  1. 使用Navigator.push(context, route)跳转,使用MaterialPageRoute创建route
  2. MaterialApp中添加routes,使用Navigator.pushNamed(context, '/a')跳转
  3. showDialog等类型,使用Navigator.of(context).pop()返回
  4. 自定义router,使用Navigator.push(context, PageRouteBuilder来跳转到自定义的router
import 'package:flutter/material.dart';
import 'basepage.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'My app',
      home: new MyHomePage(),
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: <String, WidgetBuilder> {
        '/a': (BuildContext context) => MyBasePage(title: 'Page a',),
      },
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('我是首页'),
      ),
      body: new ListView(
        children: <Widget>[
          MaterialButton(
            onPressed: _pushToNextPage,
            child: Text('进入二级页面'),
          ),
          MaterialButton(
            onPressed: () {
              Navigator.pushNamed(context, '/a');
            },
            child: Text('进入a页面'),
          ),
          MaterialButton(
            onPressed: _showDialog,
            child: Text('showdialog'),
          ),
          MaterialButton(
            onPressed: _showCustomRoutes,
            child: Text('custom routes'),
          ),
        ],
      ),
    );
  }
  
  // 进入下一个页面
  void _pushToNextPage() {
    MaterialPageRoute<void> route = MaterialPageRoute<void>(
      builder: (BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('我是二级页面'),),
          body: Center(
            child: null,
          ),
        );
      },
    );

    Navigator.push(context, route);
  }

  Future<void> _showDialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return new AlertDialog(
          title: Text('我是title'),
          content: Text('我是content'),
          actions: <Widget>[
            MaterialButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('我是button'),
            ),
          ],
        );
      },
    );
  }

  void _showCustomRoutes() {
    Navigator.push(context, PageRouteBuilder(
      opaque: true,
      pageBuilder: (BuildContext context, _, __) {
        return Scaffold(
          appBar: AppBar(title: Text('555'),),
          body: Text('111'),
        );
      },
      transitionDuration: Duration(seconds: 1),
      transitionsBuilder: (___, Animation<double> animation, ____, Widget child) {
        return FadeTransition(
          opacity: animation,
          child: RotationTransition(
            turns: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
            child: child,
          ),
        );
      },
    ));
  }
}

其他页面:

import 'package:flutter/material.dart';

class MyBasePage extends StatelessWidget {
  MyBasePage({Key key, this.title}): super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text(this.title),),
      body: ListView(
        children: <Widget>[
          Text(this.title),
          Text(this.title),
          Text(this.title),
          Text(this.title),
          Text(this.title),
        ],
      ),
    );
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_34082695/article/details/86785070