《Flutter 从0到1构建大前端应用》读后感

Flutter 《从0到1构建大前端应用》-所有知识点架构

文章目录

一丶路由简介
二丶路由栈
三丶自定义路由

一丶路由简介

1.基本用法

2.静态路由

配置路由
main.dart

import 'package:flutter/material.dart';
import 'package:flutter_routes/errorpage.dart';
import 'package:flutter_routes/homepage.dart';
import 'package:flutter_routes/navigator_with_result.dart';
import 'package:flutter_routes/page1.dart';
import 'package:flutter_routes/page2.dart';
import 'package:flutter_routes/page3.dart';
import 'package:flutter_routes/page4.dart';
import 'package:flutter_routes/page5.dart';
import 'package:flutter_routes/pageroutebuilderresult.dart';
import 'package:flutter_routes/splash.dart';
import 'package:flutter_routes/testpageroutebuilder.dart';
import 'package:flutter_routes/todo.dart';
import 'package:flutter_routes/welcome.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter路由',initialRoute: '/PageRouteBuilder',theme: ThemeData(primarySwatch: Colors.blue,),routes: {'/page1': (context) => Page1(),'/page2': (context) => Page2(),'/page3': (context) => Page3(),'/page4': (context) => Page4(),'/page5': (context) => Page5(),'/todo': (context) => TodosScreen(),'/splash': (context) => Splash(),'/welcome': (context) => Welcome(),'/homepage': (context) => HomePage(),'/PageRouteBuilder': (context) => TestPageRouteBuilder(),'/PageRouteBuilderResult': (context) => PageRouteBuilderResult(),},onUnknownRoute: (RouteSettings setting) {String name = setting.name;print("未匹配到路由:$name");return new MaterialPageRoute(builder: (context) {return new ErrorPage();});},// home: Page1(),
//      home: TodosScreen(
//        todos: List.generate(
//          20,
//          (i) => Todo(
//                'Todo $i',
//                'A description of what needs to be done for Todo $i',
//              ),
//        ),
//      ),
//      home: HomeScreen(),
//      home: Splash(),home: Page1(),);}
}

page1.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';class Page1 extends StatelessWidget {Page1({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('page1'),),body: Center(child: RaisedButton(child: Text('跳转到Page2'),onPressed: () {//            Navigator.of(context).push(//              new MaterialPageRoute(//                builder: (context) {//                  return new Page2();//                },//              ),//            );Navigator.pushNamed(context, '/page2');   //静态路由跳转},),),);}
}

3.动态路由

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';class Todo {          //bean实体类final String title;final String description;Todo(this.title, this.description);
}class TodosScreen extends StatelessWidget {final List<Todo> todos;     //集合TodosScreen({Key key, @required this.todos}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Todos'),),body: ListView.builder(     //遍历数据itemCount: todos.length,itemBuilder: (context, index) {return ListTile(title: Text(todos[index].title),onTap: () {Navigator.push(context,MaterialPageRoute(    //动态路由带值跳转builder: (context) => DetailScreen(todo: todos[index]),),);},);},),);}
}class DetailScreen extends StatelessWidget {// Declare a field that holds the Todofinal Todo todo;// In the constructor, require a TodoDetailScreen({Key key, @required this.todo}) : super(key: key);   //接收传过来的todo对象@overrideWidget build(BuildContext context) {// Use the Todo to create our UIreturn Scaffold(appBar: AppBar(title: Text("${todo.title}"),   //显示传过来的值),body: Padding(padding: EdgeInsets.all(16.0),child: Text('${todo.description}'),),);}
}

4.参数回传

import 'package:flutter/material.dart';class HomeScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('参数回传'),),body: Center(child: SelectionButton()),);}
}class SelectionButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return RaisedButton(onPressed: () {_navigateAndDisplaySelection(context);},child: Text('课程选择'),);}_navigateAndDisplaySelection(BuildContext context) async {//通过await 的方式，给Navigator 的push结果添加了一个result，这个 result 就是回传的结果final result = await Navigator.push(      context,MaterialPageRoute(builder: (context) => SelectionScreen()),   //动态路由);Scaffold.of(context)..removeCurrentSnackBar()..showSnackBar(SnackBar(content: Text("$result")));   //通过SnackBar 将回传结果显示出来}
}class SelectionScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('请选择一门课程'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Padding(padding: const EdgeInsets.all(8.0),child: RaisedButton(onPressed: (){Navigator.pop(context, 'Android');    //返回上一级并且回传数据},child: Text('Android'),),),Padding(padding: const EdgeInsets.all(8.0),child: RaisedButton(onPressed: (){Navigator.pop(context, 'IOS');        //返回上一级并且回传数据},child: Text('IOS'),),),Padding(padding: const EdgeInsets.all(8.0),child: RaisedButton(onPressed: (){Navigator.pop(context, 'Flutter');      //返回上一级并且回传数据},child: Text('Flutter'),),)],),),);}
}

二丶路由栈

1.路由栈详解

结论：Navigator 里的push 方法把元素添加到堆栈顶部，而pop则删除了顶部的元素

2.pushReplacementNamed 方法

Navigator.of(context).pushReplacementNamed('/page4');

3.popAndPushNamed 方法

与pushReplacementNamed 方法相似的有 popAndPushNamed 方法，效果是一致的，只是转场动画效果不同

4.pushNamedAndRemoveUntil 方法
用法一：确保删除homepage前所有路由栈的页面

 Navigator.of(context).pushNamedAndRemoveUntil('/homepage',(Route <dynamic> route) => false);

用法二：直接跳转回page2，同时删除掉page5~page2之间的页面实例，但是page5页面依然存在

 Navigator.of(context).pushNamedAndRemoveUntil('/page5',ModalRoute.withName('/page2'));

5.popUntil 方法
和pushNamedAndRemoveUntil 有点类似，只不过没有push操作，而是直接pop 到指定页面

 Navigator.popUntil(context, ModalRoute.withName('/page2'));

三丶自定义路由

TestPageRouteBuilder.dart

import 'package:flutter/material.dart';
import 'package:flutter_routes/pageroutebuilderresult.dart';class TestPageRouteBuilder extends StatefulWidget {@override_TestPageRouteBuilderState createState() => _TestPageRouteBuilderState();
}class _TestPageRouteBuilderState extends State<TestPageRouteBuilder> {_onButtonTapCustom(Widget page) {     //实现跳转页面并带有动画效果Navigator.of(context).push(     //路由跳转PageRouteBuilder<Null>(       //路由页面建造者//页面建造者：（上下文对象，动画对象,次要的动画对象）pageBuilder: (BuildContext context, Animation<double> animation,Animation<double> secondaryAnimation) {return AnimatedBuilder(     //动画建造者animation: animation,     //动画对象builder: (BuildContext context, Widget child) {return Opacity(         //无透明opacity: animation.value, //无透明child: page,            //页面组件);},);},transitionDuration: Duration(milliseconds: 6000),    //持续时间6秒),);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('PageRouteBuilder'),),body: Center(child: Column(children: <Widget>[RaisedButton(padding: EdgeInsets.all(10.0),onPressed: () {_onButtonTapCustom(PageRouteBuilderResult());   //点击跳转页面并附带动画效果},child: Text('调用自定义路由',textAlign: TextAlign.center,style: TextStyle(fontSize: 13.0),),),Hero(tag: "hero1",child: ClipOval(      //椭圆形child: CustomLogo(   //自定义组件size: 60.0,       //传入大小为60),),),Hero(tag: "hero2",child: Material(      //材料color: Colors.transparent,child: Text("Hero效果",style: TextStyle(fontSize: 14.0, color: Colors.black),),))],)),);}
}class CustomLogo extends StatelessWidget {final double size;CustomLogo({this.size = 200.0});@overrideWidget build(BuildContext context) {return Container(color: Colors.lightBlueAccent,width: size,height: size,child: Center(child: FlutterLogo(size: size,),),);}
}

PageRouteBuilderResult

import 'package:flutter/material.dart';
import 'package:flutter_routes/testpageroutebuilder.dart';class PageRouteBuilderResult extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Padding(padding: EdgeInsets.all(30.0),child: Stack(children: <Widget>[Align(alignment: Alignment.center,child: Hero(      //Hero动画tag: "hero1",child: Container(height: 250.0,width: 250.0,child: CustomLogo(),),),),OutlineButton(onPressed: () => Navigator.of(context).pop(),child: Icon(Icons.close),)],),),);}
}