先放效果,瞎寫一通，不過我發現自己挺享受自己創作設計的過程的，真的廢寢忘食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之路由与导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。