Flutter学习之路（二）

之前的文章记录了Flutter开发的一小部分基础代码，今天还是要继续记录一个常用的小功能，那就是底部切换栏。做过移动开发的开发者都知道，底部切换栏是大多数应用的必备功能。话不多说，老规矩，直接按步骤上截图，上代码：

首先在我们自己的项目中的lib文件下建立几个需要切换的.dart文件，我自己是5个文件，其中4个是对应底部切换栏的4个按钮（HomePage是第一个页面、MsgPage消息页面、CartPage购物车页面、MinePage个人中心页面），还有一个就是承载着4个页面的文件MainPage，如下图：

其次，在main.dart文件中编写入口代码，如下：

import 'package:flutter/material.dart';
import 'package:flutterapp/MainPage.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),//启动MainPage
    );
  }
}

然后，在我们创建好的文件MainPage里面编写代码，如下：

import 'package:flutter/material.dart';
import 'package:flutterapp/CartPage.dart';
import 'package:flutterapp/HomePage.dart';
import 'package:flutterapp/MinePage.dart';
import 'package:flutterapp/MsgPage.dart';

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IndexState();
  }
}

class _IndexState extends State<MainPage> {
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];

  int currentIndex;

  final pages = [new HomePage(), new MsgPage(), new CartPage(), new MinePage()];

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
//      appBar: AppBar(
//        title: Text("底部导航栏"),
//      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }

  /*切换页面*/
  void _changePage(int index) {
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
}

最后，在之前创建的4个用于切换显示的文件中，编写一个简单的代码就可以看到切换的效果了。如果你想写一些小功能放到没个页面里，也是可以的，我就在首页文件HomePage里写了显示一张图片和一个按钮，下面看代码：

import 'package:flutter/material.dart';
import 'package:flutterapp/ProductList.dart';
import 'package:fluttertoast/fluttertoast.dart';

//void main() {
//  runApp(new HomePage());
//}

class HomePage extends StatelessWidget {
  // 重写build 方法，build 方法返回值为Widget类型，返回内容为屏幕上显示内容。
  @override
  Widget build(BuildContext context) {
    // MaterialApp 控制界面风格为安卓风格
    // CupertinoApp 界面风格为iOS 风格
    // TODO: implement build
    return MaterialApp(
      title: "首页",
      // debugShowCheckedModeBanner: false,
      // Scaffold：脚手架 用于展示基础框架结构，如appBar、body、bottomNavigationBar
      home: Scaffold(
        // AppBar：相当于iOS 的导航栏
        appBar: AppBar(
          // AppBar上的显示内容
          // Text 用于展示文本内容，相当于iOS中的UILabel
          title: Text("首页"),
        ),
        // body：AppBar及BottomNavigationBar之间展示的内容
        // Center 是用于把子Widget 居中的Widget
        body: Card(
            child: Column(
          children: [
            new FadeInImage.assetNetwork(
              placeholder: 'images/logo.png',
              image:
                  'https://haiguo.oss-cn-beijing.aliyuncs.com/goods/360e1d0da22c2fcd9d81961d916abed4de6a4aff.jpg',
              fit: BoxFit.fill,
            ),
            RaisedButton(
              child: Text('跳转', style: const TextStyle(fontSize: 16.0),
              ),
              onPressed: () {
                print('pressIndex：页面跳转');
                Navigator.push(context, new MaterialPageRoute(builder: (context) => new ProductList()));
                Fluttertoast.showToast(
                    msg: "跳转",
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 1,
                    backgroundColor: Colors.black45,
                    textColor: Colors.white,
                    fontSize: 16.0);
              },
              padding: const EdgeInsets.only(top: 20.0),
            ),
          ],
        )),
      ),
    );
  }
}

好了，这次的介绍就到这里了，下面放上一张运行成功的截图，每天学习一点，坚持不懈，收获就会多多，希望可以给大家有什么问题和感想，可以在评论区一起交流，如有不足，尽请指教，感谢各位！