flutter小記之路由和導航

萬有_青年發表於2019-06-27
Flutter路由

路由

前文說明，最近一直在折騰flutter，期間踩了不少坑，所以就想總結下，方便自己查閱，希望也能幫助別人，裡面涉及到的一些知識點可能沒有提及。 包括我自己可能理解有誤的地方，歡迎指出。希望能一起進步，成長。趁著有風趕快飛翔吧。

路由基礎配置

1.方式一

//以下省略無關程式碼
import 'index.dart';

mian.dart  //主路由
void main() {
  runApp(MaterialApp(index: IndexPage()));
}

index.dart
import 'xxx1.dart';
import 'xxx2.dart';
class IndexPage extends StatefulWidget {
  @override
  IndexPageState createState() => IndexPageState();
}
class IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
              FlatButton(
                onPressed: () {
                      builder = (BuildContext _) => Xxx1Page();
                },
                child: Text(
                    "xxx1",
                ),
              ),
              FlatButton(
                onPressed: () {
                      builder = (BuildContext _) => Xxx2Page();
                },
                child: Text(
                    "xxx2",
                ),
              )
          ],
        ));
  }
}

xxx1.dart
class Xxx1Page extends StatelessWidget  {
}

xxx2.dart
class Xxx2Page extends StatelessWidget  {
}


複製程式碼

2.方式二

//以下省略無關程式碼
route.dart
import 'index.dart';
import 'xxx1.dart';
import 'xxx2.dart';

final Map<String, WidgetBuilder> RoutePath = <String, WidgetBuilder>{
   '/': (BuildContext context) => IndexPage(), //首頁路由
    '/xxx1.dart': (BuildContext context) => Xxx1Page(),
    '/xxx2.dart': (BuildContext context) => Xxx2Page(),
}

mian.dart  //主路由
import '/route/route.dart';
  Widget build(BuildContext context) {
    return MaterialApp(
        initialRoute: '/',
        routes: RoutePath,
    ）
  }

index.dart
import 'xxx1.dart';
import 'xxx2.dart';

class IndexPage extends StatefulWidget {
  @override
  IndexPageState createState() => IndexPageState();
}
class IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
              FlatButton(
                onPressed: () {
                     Navigator.of(context).pushNamed('/xxx1');
                },
                child: Text(
                    "xxx1",
                ),
              ),
              FlatButton(
                onPressed: () {
                   Navigator.of(context).pushNamed('/xxx2');
                },
                child: Text(
                    "xxx2",
                ),
              )
          ],
        ));
  }
}


xxx1.dart
class Xxx1Page extends StatelessWidget  {
}

xxx2.dart
class Xxx2Page extends StatelessWidget  {
}

複製程式碼

路由傳參

在上面頁面繼續改造

1.方式一

//以下省略無關程式碼
import 'index.dart';

mian.dart  //主路由
void main() {
  runApp(MaterialApp(index: IndexPage()));
}

index.dart
import 'xxx1.dart';
import 'xxx2.dart';
class IndexPage extends StatefulWidget {
  @override
  IndexPageState createState() => IndexPageState();
}
class IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
              FlatButton(
                onPressed: () {
                      builder = (BuildContext _) => Xxx1Page(id:'xxx2');
                },
                child: Text(
                    "xxx1",
                ),
              ),
              FlatButton(
                onPressed: () {
                      builder = (BuildContext _) => Xxx2Page();
                },
                child: Text(
                    "xxx2",
                ),
              )
          ],
        ));
  }
}

xxx1.dart
class Xxx1Page extends extends StatefulWidget {
  Xxx1Page({this.id, Key key}) : super(key: key);
  String id;
}

xxx2.dart
class Xxx2Page extends  extends StatefulWidget {

}


複製程式碼

2.方式二

//以下省略無關程式碼
route.dart
import 'index.dart';
import 'xxx1.dart';
import 'xxx2.dart';

final Map<String, WidgetBuilder> RoutePath = <String, WidgetBuilder>{
   '/': (BuildContext context) => IndexPage(), //首頁路由
    '/xxx1.dart': (BuildContext context) => Xxx1Page(),
    '/xxx2.dart': (BuildContext context) => Xxx2Page(
      id:ModalRoute.of(context).settings.arguments
    ),
}

mian.dart  //主路由
import '/route/route.dart';
  Widget build(BuildContext context) {
    return MaterialApp(
        initialRoute: '/',
        routes: RoutePath,
    ）
  }

index.dart
import 'xxx1.dart';
import 'xxx2.dart';

class IndexPage extends StatefulWidget {
  @override
  IndexPageState createState() => IndexPageState();
}
class IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
              FlatButton(
                onPressed: () {
                      Navigator.of(context).pushNamed('/xxx1',
                      arguments: 'xxx1');
                },
                child: Text(
                    "xxx1",
                ),
              ),
              FlatButton(
                onPressed: () {
                   Navigator.of(context).pushNamed('/xxx2');
                },
                child: Text(
                    "xxx2",
                ),
              )
          ],
        ));
  }
}


xxx1.dart
class Xxx1Page extends extends StatefulWidget {
  Xxx1Page({this.id, Key key}) : super(key: key);
  String id;
}

xxx2.dart
class Xxx2Page extends  extends StatefulWidget {
  
}
複製程式碼

other

這幾個也是比較常用的路由導航：pop、pushReplacement、pushNamedAndRemoveUntil、


 Navigator.pop(context, true); // returns true

 Navigator.of(context)
      .pushNamedAndRemoveUntil('/', (Route<dynamic> route) => false);  //remove all the routes below the pushed route;

 Navigator.of(context).pushReplacementNamed('/'); //If non-null, result will be used as the result of the route that is removed;
複製程式碼

文末：接下來還會寫些相關的文章，敬請期待。

相關文章