Flutter学习-底部导航

介绍

Flutter是Google使用Dart语言开发的移动应用开发框架，只需一套Dart代码就能构建高性能、高保真的iOS和Android应用程序，并且在排版、图标、滚动、点击等方面实现零差异。

如果上面官网打不开这里有Flutter 中文网

搭建环境

推荐两个(反正我是参考这两篇文章的)：

• Flutter 中文网快速开始
• CSDN Flutter 安装和初体验

效果

实现

1. 首先把 main.dart 里面自动生成代码删除

import 'package:flutter/material.dart';

import 'douban/app.dart';

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

2. 创建 app.dart 作为主入口

class DoubanApp extends StatefulWidget {

  @override
  DoubanAppState createState() => new DoubanAppState();
}

class DoubanAppState extends State<DoubanApp>{
  @override
  Widget build(BuildContext context) {
      
  }
}

3. 在创建 movie.dart、book.dart、music.dart 三个页面

import 'package:flutter/material.dart';

class Movie extends StatefulWidget {
  @override
  MovieState createState() => new MovieState();
}

class MovieState extends State<Movie> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("电影"),
        ),
        body: new Center(
          child: new Text('Hello Movie'),
        ),
      ),
    );
  }
}

4. 在 app.dart 中使用 TabBarView 和 bottomNavigationBar中TabBar 实现

new TabBarView(
  controller: controller,
    children: [
      new Movie(),
      new Book(),
      new Music(),
    ],
)

new TabBar(
  controller: controller,
  tabs: [
    new Tab(
      text: "电影",
      icon: new Icon(Icons.movie)),
    new Tab(
      text: "图书",
      icon: new Icon(Icons.book)),
    new Tab(
      text: "音乐",
      icon: new Icon(Icons.music_video)),
  ],
),

5. app.dart 完整代码

import 'package:flutter/material.dart';

import 'package:flutter_douban/douban/movie.dart';
import 'package:flutter_douban/douban/book.dart';
import 'package:flutter_douban/douban/music.dart';

class DoubanApp extends StatefulWidget {

  @override
  DoubanAppState createState() => new DoubanAppState();
}

class DoubanAppState extends State<DoubanApp>
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    controller = new TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new TabBarView(
          controller: controller,
          children: [
            new Movie(),
            new Book(),
            new Music(),
          ],
        ),
        bottomNavigationBar: new Material(
          color: Colors.blue,
          child: new TabBar(
            controller: controller,
            tabs: [
              new Tab(
                text: "电影",
                icon: new Icon(
                  Icons.movie,
                ),
              ),
              new Tab(
                text: "图书",
                icon: new Icon(
                  Icons.book,
                ),
              ),
              new Tab(
                text: "音乐",
                icon: new Icon(
                  Icons.music_video,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}