Flutter学习01-底部导航

介绍

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

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

搭建环境

如何搭建环境已经有很多文章了,这里就不再说了。

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

效果

实现

  1. 首先把 main.dart 里面自动生成代码删除
import 'package:flutter/material.dart';

import 'douban/app.dart';

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

  1. 创建 app.dart 作为主入口
class DoubanApp extends StatefulWidget {

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

class DoubanAppState extends State<DoubanApp>{
  @override
  Widget build(BuildContext context) {
      
  }
}
  1. 在创建 movie.dartbook.dartmusic.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'),
        ),
      ),
    );
  }
}
  1. app.dart 中使用 TabBarViewbottomNavigationBarTabBar 实现
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)),
  ],
),

  1. 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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


作者:晓锋残月
如果喜欢请关注打赏我
版权声明:本文为博主原创文章,转载请注明出处,谢谢!

推荐阅读更多精彩内容

  • 在上一篇教程中说了Flutter使用Dart语言开发。本篇教程整体介绍一下Dart语言,注意,本篇不会介绍Dart...
    lazydu阅读 3,079评论 2 12
  • 2018年1月18日 星期四 天气晴 忙忙碌碌的一天很快又要过去了,陪着女儿做完作业,还有几天就要考试了,孩子们...
    太阳玥玥阅读 41评论 0 0
  • 打了一个电话,朋友说要看孩子。 发了一个微信,朋友说在家宅不想动。 于是,出去湖边走走的念头荡了荡,最后拿起了手机...
    井三少年阅读 20评论 0 0
  • 简书的各位朋友: 大家好!我是楚桥读唐诗,一个80后的非典型斜杠中年。 转眼在简书码字已超过半年,从最初的3个读者...
    楚桥读唐诗阅读 14,819评论 50 320