您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-12( BottomNavigationBar 自定义底部导航条、以及实现页面切换)

2020-04-30【Flutter】920人已围观

简介## 一、Flutter BottomNavigationBar 组件 `BottomNavigationBar` 是底部导航条，可以让我们定义底部 `Tab` 切换，`bottomNavigationBar` 是 `Scaffold` 组件的参数。 **BottomNavigationBar** 属性名 | 说明 ---|--- items | List 底部导航条按钮集合 iconSize | icon currentIndex | 默认选中第几个 onTap | 选中变

## 一、Flutter BottomNavigationBar  组件

`BottomNavigationBar` 是底部导航条，可以让我们定义底部 `Tab` 切换，`bottomNavigationBar` 是 `Scaffold` 组件的参数。

**BottomNavigationBar**

属性名 | 说明
---|---
items | List<BottomNavigationBarItem> 底部导航条按钮集合
iconSize | icon
currentIndex | 默认选中第几个
onTap | 选中变化回调函数
fixedColor | 选中的颜色
type | BottomNavigationBarType.fixed<br>BottomNavigationBarType.shifting

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302235148.png)

> main.dart

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

import 'pages/Tabs.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Tabs()
    );
  }
}

```

> Tabs.dart

```
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

_TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

int _currentIndex=0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (int index){
              setState(() {  //改变状态
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //选中的颜色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs可以有多个按钮
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      );
  }
}
```

> Home.dart

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

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Text("我是首页组件");
  }
}
```

> Category.dart

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

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);

_CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Text("分类");
  }
}
```

> Setting.dart

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

class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);

_SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        ),
         ListTile(
          title: Text("我是一个文本"),
        )
      ],
    );
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-11(StatefulWidget 件有状态组件、页面上绑定数据、改变页面数据)

下一篇：flutter-13(中的普通路由、普通路由传值、命名路由、命名路由传值)