Flutter 实现底部导航栏

参考

1.main.dart

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

//main函数的runApp方法设置首页界面
void main() {
  runApp(new MusicPlayer());
}

2.app.dart

import 'package:flutter/material.dart';
import 'package:music/SettingNavigation.dart';
import 'package:music/SquareNavigation.dart';
import 'package:music/MusicNavigation.dart';
/*
* 主界面
*/

//继承于一个有状态的组件,状态会在widget的生命周期中发生变化;如果是无状态的组件,里面的值不可变
class MusicPlayer extends StatefulWidget {
  @override
  //创建状态,在状态里面写布局
  MusicPlayerState createState() => new MusicPlayerState();
}

class MusicPlayerState extends State<MusicPlayer> with SingleTickerProviderStateMixin {
  //导航控制器
  late TabController controller;

  @override
  void initState() {
    //初始化,底部的三个导航按键
    controller = new TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    //销毁
    controller.dispose();
    super.dispose();
  }

  //Widget用于构建UI
  @override
  Widget build(BuildContext context) {
    //写法是:返回的东西是什么什么什么什么,MaterialApp包含了许多Widget
    return new MaterialApp(
      //Scaffold相当于布局的容器
      home: new Scaffold(
        //body是Scaffold的属性,当前界面所显示的主要内容
        body: new TabBarView(
          //内容三个按键对应的三个fragment
          controller: controller,
          children: <Widget>[
            new MusicPage(),
            new SquarePage(),
            new SettingPage(),
          ],
        ),
        //bottomNavigationBar:显示在底部的导航栏按钮栏
        bottomNavigationBar: new Material(
          color: Colors.white,
          child: new TabBar(
            controller: controller,
            //选中标签时的颜色
            labelColor: Colors.deepPurpleAccent,
            //没有选中标签时的颜色
            unselectedLabelColor: Colors.black26,
            //tabs也可以认为是一个Widget
            tabs: <Widget>[
              new Tab(
                text: "音乐",
                icon: new Icon(Icons.brightness_5),
              ),
              new Tab(
                text: "广场",
                icon: new Icon(Icons.map),
              ),
              new Tab(
                text: "设定",
                icon: new Icon(Icons.directions_run),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3.MusicNavigation.dart

import 'package:flutter/material.dart';

/*
* 音乐界面,相当于fragment
*/
//该界面创建有状态的组件
class MusicPage extends StatefulWidget {
  @override
  //状态
  PlaygroundState createState() => new PlaygroundState();
}

class PlaygroundState extends State<MusicPage> {
  @override
  Widget build(BuildContext context) {
    //MaterialApp-Scaffold
    return new MaterialApp(
      //Scaffold相当于布局的容器
      home: new Scaffold(
        //appBar是状态栏
        appBar: new AppBar(
          //设置文字
          title: new Text("音乐"),
          //设置appbar背景颜色
          backgroundColor: Color.fromARGB(255, 119, 136, 213),
          //设置标题是否局中
          centerTitle: true,
        ),
        //body就是写界面了
        body: new Center(
          child: new Text('音乐'),
        ),
      ),
    );
  }
}

4.SettingNavigation.dart

import 'package:flutter/material.dart';

/*
*设定界面,相当于fragment
*/
class SettingPage extends StatefulWidget {
  @override
  PlaygroundState createState() => new PlaygroundState();
}

class PlaygroundState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("设定"),
          backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
          centerTitle: true, //设置标题是否局中
        ),
        body: new Center(
          child: new Text('设定'),
        ),
      ),
    );
  }
}

5.SquareNavigation.dart

import 'package:flutter/material.dart';

/*
*广场界面,相当于fragment
*/
class SquarePage extends StatefulWidget {
  @override
  PlaygroundState createState() => new PlaygroundState();
}

class PlaygroundState extends State<SquarePage> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("广场"),
          backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
          centerTitle: true, //设置标题是否局中
        ),
        body: new Center(
          child: new Text('广场'),
        ),
      ),
    );
  }
}