【Flutter -- 基础组件】Flutter 导航栏

1. TabBar

Flutter 中用于快速实现顶部导航栏的组件库。

• TabBar
  Tab 页的 Title 控件，切换 Tab 页的入口，一般放到 AppBar 控件下使用，内部有**Title*属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用 Column 或 ListView 控件包装一下。子元素为 Tab 类型的数组。

• TabBarView
  Tab 页的内容容器，其内放置 Tab 页的主体内容。子元素可以是多个各种类型的控件。

• TabController
  这是Tab页的控制器，用于定义Tab标签和内容页的坐标，还可配置标签页的切换动画效果等。

1.1 代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            body: Center(
              child: AppBarStatefulWidget(),
            )
        )

    );
  }
}

class AppBarStatefulWidget extends StatefulWidget {
  const AppBarStatefulWidget({Key? key}) : super(key: key);

  @override
  _AppBarStatefulWidget createState() => _AppBarStatefulWidget();
}

class _AppBarStatefulWidget extends State with SingleTickerProviderStateMixin {
  final List<Tab> _tabs = <Tab>[
    new Tab(text: '关注'),
    new Tab(text: '推荐'),
    new Tab(text: '视频'),
    new Tab(text: '游戏'),
    new Tab(text: '音乐'),
    new Tab(text: '体育'),
    new Tab(text: '生活'),
    new Tab(text: '图片'),
  ];

  var _tabController;

  @override
  void initState() {
    _tabController = TabController(vsync: this, length: _tabs.length);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        controller: _tabController,
        children: _tabs.map((Tab tab) {
          return new Center(child: Text(tab.text.toString()));
        }).toList(),
      ),
      appBar: AppBar(
        title: Text("TabBarView 的基本使用"),
        centerTitle: true,

        bottom: TabBar(
          isScrollable: true,
          labelColor: Colors.redAccent,   // 选中的Widget颜色
          indicatorColor:Colors.redAccent, // 选中的指示器颜色
          labelStyle: new TextStyle(fontSize: 15.0),// 必须设置，设置 color 没用的，因为 labelColor 已经设置了
          unselectedLabelColor: Colors.white,
          unselectedLabelStyle: new TextStyle(
              fontSize: 15.0), // 设置 color 没用的，因为unselectedLabelColor已经设置了
          controller: _tabController,
          // tabbar 必须设置 controller 否则报错
          indicatorSize: TabBarIndicatorSize.label,
          // 有 tab 和 label 两种
          tabs: _tabs,
        ),
      ),
    );
  }
}

1.2 效果图

2. BottomNavigationBar

BottomNavigationBar 即是底部导航栏控件，显示在页面底部的设计控件，用于在试图切换，底部导航栏包含多个标签、图标或者两者搭配的形式，简而言之提供了顶级视图之间的快速导航。

2.1 构建底部标签

 //底部数据
  final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };

2.2 创建导航栏

因为点击导航栏需要对应的字体显示，所以MyHomePage需要继承StatefulWidget，增加State，

//用无状态控件显示
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //主题色
      theme: ThemeData(
          //设置为红色
          primarySwatch: Colors.red),
      //这是一个Widget对象，用来定义当前应用打开的时候，所显示的界面
      home: MyHomePageWidget(),
    );
  }
}

class MyHomePageWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState(){
     return new MyHomePage();
  }
}
class MyHomePage extends State<MyHomePageWidget> {
 //底部数据
  final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };

  int _index = 0;
 bottomNavigationBar: BottomNavigationBar(
            items: (){
              var items = <BottomNavigationBarItem>[];
              bottomMap.forEach((k,v){
                items.add(BottomNavigationBarItem(
                  title:Text(k),//取map的值
                  icon : v,//取map的图标
                  backgroundColor:Colors.red,//背景红色
                ));
              });
              return items;
            }(),
             currentIndex: _index,//选中第几个
             onTap:(position){
               Fluttertoast.showToast(
                   msg: 'text inputted: $position',
                   toastLength: Toast.LENGTH_SHORT,
                   gravity: ToastGravity.CENTER,
                   timeInSecForIos: 1,
               );
               setState(() {
                 _index = position;//状态更新
               });
             }
            ),
   }

2.3 效果图