Flutter之路由与导航

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

贴代码

//main.dart

import 'package:flutter/material.dart';
import 'package:my_firstapp/Stateful.dart';
import 'package:my_firstapp/pageview.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget 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;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          SwitchListTile(//这个是平常我们所见到的开关按钮
            title: Text('${byName ? '' : '不'}通过路由名跳转'),//三目运算符大家还记得吧
            value: byName,
            onChanged: (value) {//传进去value
              setState(() {//和之前底部导航栏基本一样的操作
                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.dart

import 'package:flutter/material.dart';

class StatefulGroup extends StatefulWidget {
  @override
  _StatefulGroupState createState() => _StatefulGroupState();
}

class _StatefulGroupState extends State<StatefulGroup> {
  int _currentindex = 0;
  @override
  Widget 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，点到第二个就是1
            setState(() {
              _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 {
  @override
  Widget 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 {
  @override
  Widget 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.dart

import 'package:flutter/material.dart';

class Pageview extends StatefulWidget {
  @override
  _PageviewState createState() => _PageviewState();
}

class _PageviewState extends State<Pageview> {
  @override
  Widget 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的语法高亮。。。