Flutter之路由与导航

先放效果,瞎写一通，不过我发现自己挺享受自己创作设计的过程的，真的废寝忘食hhh

贴代码

//main.dartimport 'package:flutter/material.dart';
import 'package:my_firstapp/Stateful.dart';
import 'package:my_firstapp/pageview.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'roadkiller',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('Flutter的路由与导航小试牛刀'),),body: RouteNavigator(),),routes: <String, WidgetBuilder>{//这里提供了一个路由'主页': (BuildContext context) => StatefulGroup(), //冒号左边的是routeName// '副页': (BuildContext context) => ListPage(),'广告栏': (BuildContext context) => Pageview(),//越看越像匿名类组件},);}
}class RouteNavigator extends StatefulWidget {@override_RouteNavigatorState createState() => _RouteNavigatorState();
}class _RouteNavigatorState extends State<RouteNavigator> {bool byName = false;@overrideWidget build(BuildContext context) {return Container(child: Column(children: <Widget>[SwitchListTile(//这个是平常我们所见到的开关按钮title: Text('${byName ? '' : '不'}通过路由名跳转'),//三目运算符大家还记得吧value: byName,onChanged: (value) {//传进去valuesetState(() {//和之前底部导航栏基本一样的操作byName  = value;});},),_item('我的主页', StatefulGroup(), '主页'),// _item('我的副页', ListPage(), '副页'),_item('我的广告栏', Pageview(), '广告栏'),],),);}_item(String title, page, String routeName) {//最后一个参数是路由名，用户可以通过路由名来进行跳转页面return Container(child: RaisedButton(onPressed: () {if (byName) {Navigator.pushNamed(context, routeName);} else {Navigator.push(context, MaterialPageRoute(builder: (context) => page));}},child: Text(title),),);}
}//StatefulGroup.dartimport 'package:flutter/material.dart';class StatefulGroup extends StatefulWidget {@override_StatefulGroupState createState() => _StatefulGroupState();
}class _StatefulGroupState extends State<StatefulGroup> {int _currentindex = 0;@overrideWidget build(BuildContext context) {return MaterialApp(title: 'roadkiller',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('Waiting her...'),leading: GestureDetector(onTap: () {Navigator.pop(context);},child: Icon(Icons.arrow_back),),),body: _currentindex == 0? RefreshIndicator(child: ListView(children: <Widget>[HomePage(),],),onRefresh: _handleRefresh): ListPage(),bottomNavigationBar: BottomNavigationBar(currentIndex: _currentindex,onTap: (index) {//这里的index是系统自动根据底部导航栏的位置来确定的，手指点到第一个图标就是0，点到第二个就是1setState(() {_currentindex = index;});},items: [BottomNavigationBarItem(title: Text('首页'),icon: Icon(Icons.home,color: Colors.grey,),activeIcon: Icon(Icons.home,color: Colors.blue,),),BottomNavigationBarItem(title: Text('菜单'),icon: Icon(Icons.list,color: Colors.grey,),activeIcon: Icon(Icons.list,color: Colors.blue,),),],),floatingActionButton: FloatingActionButton(onPressed: null,child: Text('点我'),),),);}Future<Null> _handleRefresh() async {await Future.delayed(Duration(milliseconds: 200));return null;}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.center,child: Column(children: <Widget>[Row(children: <Widget>[Padding(padding: EdgeInsets.all(20),child: ClipRRect(borderRadius: BorderRadius.all(Radius.circular(40)),child: Opacity(opacity: 0.6,child: Image.network('http://www.devio.org/img/avatar.png'),),),),ClipOval(child: SizedBox(width: 160.0,height: 160.0,child: Image.network('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1352807053,3315013341&fm=26&gp=0.jpg'),),),],),Text('求爆照(*^▽^*)',style: TextStyle(fontSize: 20.0,),),Icon(Icons.add_a_photo,size: 50.0,color: Colors.lightBlue,),Text('告诉我你的位置呗',style: TextStyle(fontSize: 20.0),),Chip(avatar: Icon(Icons.add_location),label: Text('你家哪滴'),),Card(child: Container(alignment: Alignment.center,child: Column(children: <Widget>[AlertDialog(title: Text('人心中的成见像一座大山'),content: Text('任你怎么努力都休想搬动'),),// Text('有什么不开心的说出来就好了 ☟',style: TextStyle(fontSize: 20.0,color: Colors.lightBlue[600]),),Card(color: Colors.pinkAccent[100],elevation: 8,margin: EdgeInsets.only(bottom: 30.0),child: Container(padding: EdgeInsets.all(10),child: Text('做自己真的越来越难了',style: TextStyle(fontSize: 20.0),),),),TextField(decoration: InputDecoration(contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),hintText: '烦恼说出来通通忘掉！',hintMaxLines: 1,hintStyle: TextStyle(fontSize: 20.0),),),],),),),Container(height: 100,margin: EdgeInsets.all(20),decoration: BoxDecoration(color: Colors.transparent),child: PhysicalModel(color: Colors.transparent,borderRadius: BorderRadius.all(Radius.circular(20)),clipBehavior: Clip.hardEdge, //抗锯齿child: PageView(children: <Widget>[_item('心碎了一地', Colors.blueAccent),_item('捡不回', Colors.amber),_item('从前的心跳', Colors.pinkAccent),Image.network('http://www.devio.org/img/avatar.png'),],),),),],),decoration: BoxDecoration(color: Colors.white),);}_item(String content, Color color) {return Container(alignment: Alignment.center,decoration: BoxDecoration(color: color),child: Text(content,style: TextStyle(fontSize: 20.0, color: Colors.white),),);}
}class ListPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: <Widget>[FractionallySizedBox(widthFactor: 1,child: Container(height: 30.0,decoration: BoxDecoration(color: Colors.greenAccent),child: Center(child: Text('You still have lots more to work on.',style: TextStyle(fontSize: 18.0),),),),),Wrap(//Wrap布局会从左到右进行排列，并且自动换行spacing: 15, //水平间距runSpacing: 10, //竖直间距children: <Widget>[_chip('C语言'),_chip('C++'),_chip('Java'),_chip('Python'),_chip('HTML'),_chip('CSS'),_chip('JavaScript'),_chip('Dart'),_chip('Flutter'), //个人大一自学的一些语言],)],);}_chip(String s) {return Chip(label: Text(s),avatar: CircleAvatar(backgroundColor: Colors.blue[700],child: Text(s.substring(0, 1),style: TextStyle(fontSize: 10),),),);}
}//pageview.dartimport 'package:flutter/material.dart';class Pageview extends StatefulWidget {@override_PageviewState createState() => _PageviewState();
}class _PageviewState extends State<Pageview> {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'roadkiller',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('广告时间到！别急着走啊！Ծ‸Ծ'),leading: GestureDetector(onTap: () {Navigator.pop(context);},child: Icon(Icons.arrow_back),),),body: Container(alignment: Alignment.center,child: Column(children: <Widget>[Container(height: 100.0,margin: EdgeInsets.only(top: 10),decoration: BoxDecoration(color: Colors.pinkAccent),child: PageView(children: <Widget>[_item('GIANT自行车牛逼！', Colors.lightBlueAccent),_item('音格格手卷钢琴个人认为手感奇差', Colors.pinkAccent),_item('博文视点的技术书籍真的不错', Colors.amber),],),)],),),),);}_item(String content, Color color) {return Container(decoration: BoxDecoration(color: color),child: Center(child: Text(content,style: TextStyle(fontSize: 20.0, color: Colors.white),),),);}
}

csdn都没有flutter的语法高亮。。。

Flutter之路由与导航相关推荐

Flutter进阶—路由和导航
大部分应用程序都有多个屏幕或页面,并希望用户能从当前屏幕平滑过渡到另一个屏幕,Flutter的路由和导航功能可以帮助我们管理应用程序中的用户界面之间的命名和过渡. 管理多个用户界面有两个核心概念和类: ...
Flutter代码锦囊---集中管理路由与导航
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中.灵活的方式去管理项目中所有页面的路由与导航. 通常我们是使用主页(home)属性设置应用程序的默认路由,即 ...
Flutter——路由和导航
Flutter--路由和导航引文入栈出栈实战效果图释商品导航页商品实体类商品展示商品详情页商品图片商品信息引文先简单了解一下Flutter页面之间路由,然后通过一个简答实例 ...
vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
Blazor 路由及导航开发指南
翻译自 Waqas Anwar 2021年4月2日的文章 <A Developer's Guide To Blazor Routing and Navigation> [1] 检查传入的请 ...
Angular核心-路由和导航
Angular核心-路由和导航
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
leo-editor 关于 flutter 企业级路由 fluro 官方例子文学化编程分析
fluro 是 flutter 企业级路由插件,在学习官方例子时有一些难度. fluro官方例子下面是官方例子运行图下面使用 leo-editor 对此例子进行文学化编程分析,按照从顶至底的顺序, ...
Flutter 基于AppBar自定义导航栏基类
Flutter 基于AppBar自定义导航栏基类效果图 AppBar 详解代码实现效果图 AppBar 详解 AppBar({Key key,this.leading, //widget类型,即 ...

Flutter之路由与导航

先放效果,瞎写一通，不过我发现自己挺享受自己创作设计的过程的，真的废寝忘食hhh

贴代码

Flutter之路由与导航相关推荐

最新文章

热门文章