《Flutter实战》第五章

• 本篇参考资料《Flutter实战》
• 本篇文章只是本人看书的理解和整理的笔记，更完整的内容还在书上!
• 电子书链接：https://book.flutterchina.club/
• Flutter中文社区链接:https://flutterchina.club/
• 尊重原作者，能支持购买实体书当然最好

一.各种容器类控件的使用
参考书上内容
二.AppBar中的底部导航bottomNavigationBar的使用
就类似于今日头条底部的首页，热榜，用户等导航
这里底部导航讲的不是很清楚，建议看这篇文章非常清晰：
https://blog.csdn.net/yuzhiqiang_1993/article/details/88118902

image.png

三.顶部导航的使用
就类似于今日头条新闻界面顶部的新闻频道导航，效果如下：

效果图

这里提一下，appBar不只可以设置AppBar对象也可以直接设置TabBar对象，TabBar也可以设置在AppBar的bottom属性中，看需要选择。
完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


//研究目标：在TabBar/TabView不同切换选项间自定义的界面

class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}

class _MyTabPageState extends State<MyTabPage> {
  int _currentIndex;
  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("个人中心"),
    ),
  ];
  final pages = [MyHomePage(), MsgPage(), CartPage(), PersonPage()];

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController; //tab控制器

  int _currentIndex = 0; //选中下标

  List tabs = ["新闻", "历史", "图片"];

  @override
  void initState() {
    super.initState();
    //初始化controller并添加监听
    _tabController = TabController(length: tabs.length, vsync: this);
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: TabBar(
            controller: _tabController,
            tabs: tabs.map((e) => Tab(text: e)).toList()//map映射 生成List<Tab>列表

        ),

        body: TabBarView(
          controller: _tabController,
          children: tabs.map((f) {
            if(f=="新闻"){
              return MyNewsPage();
            }

            return Center(
              child: Text(f),
            );

          }).toList(),//map映射 生成List<Widget>列表
        )
    );
  }
}

class MyNewsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red[200],
      child: Image.asset("assets/images/demo_pic2.jpg"),

    );
  }
}


class MsgPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("消息"),
    );
  }
}

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("购物车"),
    );
  }
}

class PersonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("个人中心"),
    );
  }
}