Flutter中底部导航栏具体实现方式

## 老规矩,先看图

```

是是是

```

![]

![]https://img-blog.csdnimg.cn/20190121114138526.png?x-oss-process=image/watermark)

## 项目结构如下:

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190121114138526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVreHg=,size_16,color_FFFFFF,t_70)

**1.main.dart**

```java

import 'package:flutter/material.dart';

import 'tab_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'tab_demo',

      theme: ThemeData.light(),

      home: TabDemo(),

    );

  }

}

class TabDemo extends StatefulWidget {

  _TabDemoState createState() => _TabDemoState();

}

class _TabDemoState extends State<TabDemo> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override

  void initState() {

    super.initState();

    _tabController = TabController(length: 3,vsync: this);

  }

  @override

  void dispose() {

    _tabController.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('TabDemo'),

        bottom: TabBar(

          controller: _tabController,

          tabs: <Widget>[

            Tab(icon: Icon(Icons.assignment_ind),),

            Tab(icon: Icon(Icons.assignment_late),),

            Tab(icon: Icon(Icons.assignment_return),),

          ],        ),

      ),

      body: TabBarView(

        controller: _tabController,

        children: <Widget>[

          TabPage(),

          TabPage(),

          TabPage()

        ],

      ),

    );

  }

}

```

**2.tab_page.dart**

```java

import 'package:flutter/material.dart';

class TabPage extends StatefulWidget {

  @override

  _TabPageState createState() => new _TabPageState();

}

class _TabPageState extends State<TabPage> with AutomaticKeepAliveClientMixin{

  @override

  bool get wantKeepAlive => true;//是否保存状态

  int _indexCount = 0;

  void _addCount(){

    setState(() {

      _indexCount ++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      floatingActionButton: FloatingActionButton(

      onPressed: _addCount,tooltip: '点击相加',

      child: Icon(Icons.add,color: Colors.white,),

      ),

        body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text("这是界面"),

            Text('$_indexCount',style: Theme.of(context).textTheme.display2,)

          ],

        ),

      ),

    );

  }

}

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址 Flutter是谷歌推出的一款全新的移动app SDK。它旨在帮助开发人员和设计师为Android和IO...
    Sper_CL阅读 721评论 0 1
  • 第1步:创建初始Flutter应用 创建一个简单的 Flutter 应用。主要编辑 Dart 代码所在的 lib ...
    小白_Sing阅读 973评论 0 0
  • 犹记得我还是个无知的少年 匆忙地学着成长 回头才发现 一路磕磕绊绊 虽已成年 却依旧无知 只是懂得了装饰 懂得了隐...
    千何阅读 193评论 0 1
  • 《敏捷文化》这本书已经买了一两个月了吧,今天终于看完,相对别人一周看一本书的速度,真心自惭形秽,不过看完了总是一件...
    吴颖华阅读 1,083评论 0 0
  • 前几天看了几部好看的电影,它们都赚足了我的眼泪,所以也忍不住推荐给大家。上图是电影《小花的味增汤》中的片段,说的是...
    星禾灿烂阅读 311评论 0 0