Flutter之页面切换的实现

如果要实现页面切换，并且实现导航栏状态改变，可以这样搞一搞

先放效果^_^

import 'package:flutter/material.dart';

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

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('Stateful与基础组件'),
        ),
        body: _currentindex ==0 ? HomePage() : ListPage(),//为了逻辑清楚，我把主页和另一个页面分别写了两个类
        bottomNavigationBar: BottomNavigationBar(//这个东西用来实现底部导航栏
          currentIndex: _currentindex,
          onTap: (index) {
            //这里的index是系统自动根据底部导航栏的位置来确定的，手指点到第一个图标就是0，点到第二个就是1，括号传参
            setState(() {//对私有参数_currentindex根据手指的动作进行相应的改动
              _currentindex = index;
            });
          },
          items: [//一般底部导航栏需要至少两个的组件
            BottomNavigationBarItem(
              title: Text('首页'),
              icon: Icon(//未被选中的情况
                Icons.home,
                color: Colors.grey,
              ),
              activeIcon: Icon(//active即激活后的情况
                Icons.home,
                color: Colors.blue,
              ),
            ),
            BottomNavigationBarItem(
              title: Text('菜单'),
              icon: Icon(
                Icons.list,
                color: Colors.grey,
              ),
              activeIcon: Icon(
                Icons.list,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,//对齐方式
      child: Column(
        children: <Widget>[
          Text(
            'I\'m a Text',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
          Icon(
            Icons.add_a_photo,
            size: 50.0,
            color: Colors.lightBlue,
          ),
          CloseButton(),
          BackButton(),
          Chip(
            avatar: Icon(Icons.add_location),
            label: Text('add_location'),
          ),
          Card(
            color: Colors.pinkAccent[100],
            elevation: 8,
            child: Container(
              padding: EdgeInsets.all(10),
              child: Text(
                'I am a Card',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          ),
          AlertDialog(
            title: Text('我是谁？'),
            content: Text('我在哪儿？'),
          ),
        ],
      ),
      decoration: BoxDecoration(color: Colors.white),
    );
  }
}

class ListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          //图片组件
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1352807053,3315013341&fm=26&gp=0.jpg', //图片url地址
          // fit: BoxFit.fitWidth,//图片在容器中的填充方式
          scale: 1.5,
          color: Colors.pink[50], //需要混合在图片上的颜色
          colorBlendMode: BlendMode.colorBurn, //图片以何种模式与颜色混合
          repeat: ImageRepeat.repeatY, //图片重复，以中心Y轴纵向重复
        ),
        width: 420.0,
        height: 700.0,
        color: Colors.pink[100], //容器的颜色，我这里把尺寸设置的超过了屏幕，皆为美观
      ),
    );
  }
}

实现出来是这个样子的