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

flutter-15(AppBar 自定义顶部导航按钮以及 TabBar 定义顶部 Tab 切换)

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

简介## 一、Flutter AppBar 自定义顶部按钮图标、颜色 **AppBar 基本属性** 属性 | 描述 ---|--- leading | 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮 title | 标题，通常显示为当前界面的标题文字，可以放组件 actions | 通常使用 IconButton 来表示，可以放按钮组 bottom | 通常放 tabBar，标题下面显示一个 Tab 导航栏 backgroundColor

## 一、Flutter AppBar  自定义顶部按钮 图标、颜色

**AppBar 基本属性**

属性 | 描述
---|---
leading | 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
title | 标题，通常显示为当前界面的标题文字，可以放组件
actions | 通常使用 IconButton 来表示，可以放按钮组
bottom | 通常放 tabBar，标题下面显示一个 Tab 导航栏
backgroundColor | 导航背景颜色
iconTheme | 图标样式
textTheme | 文字样式
centerTitle | 标题是否居中显示

> AppbatDamePage.dart

**非`appbar` 页面设置**

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

class AppbarDemoPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("AppbarDemo"),// 标题
        backgroundColor: Colors.red, // 背景色
        centerTitle:true,// 标题居中
        leading: IconButton(// 左边图标
          icon: Icon(Icons.menu),
          onPressed: (){
            print('menu');
          },
        ), 
        actions: <Widget>[// 右侧按钮组
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              print('search');
            },
          ),
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: (){
              print('settings');
            },
          )
        ],
      ),
      body: Text('1111'),
    );
  }
}
```

## 二、Flutter AppBar  中自定义 TabBar  实现 顶部 Tab  切换

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

**TabBar  常见属性**

属性 | 描述
---|---
tabs | 显示的标签内容，一般使用 Tab 对象,也可以是其他的 Widget
controller | TabController 对象
isScrollable | 是否可滚动
indicatorColor | 指示器颜色
indicatorWeight | 指示器高度
indicatorPadding | 底部指示器的 Padding
indicator | 指示器 decoration，例如边框等
indicatorSize | 指示器大小计算方式，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
labelColor | 选中 label 颜色
labelStyle | 选中 label 的 Style
labelPadding | 每个 label 的 padding 值
unselectedLabelColor | 未选中 label 颜色
unselectedLabelStyle | 未选中 label 的 Style

**Tab切换**

1. 在 `MaterialApp` 下的设置 `DefaultTabController` 包含 `Scaffold`
2. 在 `DefaultTabController` 下设置 `length`
3. 在 `body` 中设置 `TabBarView` 组件来显示对应的页面
4. 如果路由中有 `MaterialApp` 则不设置。

> AppbarDemo.dart

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

class AppbarDemoPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 
      DefaultTabController(
        length: 2, 
        child: Scaffold(
          appBar: AppBar(
            title: Text("AppbarDemo"),// 标题
            backgroundColor: Colors.red, // 背景色
            centerTitle:true,// 标题居中
            leading: IconButton(// 左边图标
              icon: Icon(Icons.menu),
              onPressed: (){
                print('menu');
              },
            ), 
            actions: <Widget>[// 右侧按钮组
              IconButton(
                icon: Icon(Icons.search),
                onPressed: (){
                  print('search');
                },
              ),
              IconButton(
                icon: Icon(Icons.settings),
                onPressed: (){
                  print('settings');
                },
              )
            ],
            bottom: TabBar(
                indicatorSize: TabBarIndicatorSize.label, // 设置label跟文字等宽
                // indicatorSize: TabBarIndicatorSize.label, // 跟每个 Tab 等宽
                tabs: [
                  Tab(text:'热门'),
                  Tab(text:'推荐'),
                ]
            ),
          ),
          body: TabBarView(children: [
            Text("热门页面"),
            Text("推荐页面"),
          ]),
        ),
    );
  }
}

```

## 三、 Flutter 把TabBar 放在导航最顶部

1. 不使用 `AppBar` 下的 `bottom` 进行指定 `TabBar`
2. 在 `AppBar` 下的 `title` 中使用 `Row` 指定 `TabBar`

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

class AppbarDemoPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 
      DefaultTabController(
        length: 2, 
        child: Scaffold(
          appBar: AppBar(
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children:<Widget>[
                Expanded(
                  flex: 1,
                  child: TabBar(
                  tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")]
                  ),
                )
              ]
            ),// 标题
            backgroundColor: Colors.red, // 背景色
            centerTitle:true,// 标题居中
            leading: IconButton(// 左边图标
              icon: Icon(Icons.menu),
              onPressed: (){
                print('menu');
              },
            ), 
          ),
          body: TabBarView(children: [
            Text("热门页面"),
            Text("推荐页面"),
          ]),
        ),
    );
  }
}

```

## 四、在 TabBar 页面设置Tabs

> 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 DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: TabBar(
                        tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")]),
                  )
                ]),
          ),
          body: TabBarView(children: [
            Text("热门页面"),
            Text("推荐页面"),
          ]),
        ));
  }
}

```

## 五、Flutter AppBar  中自定义 TabBar  实现 Tabs  的另一种方法

1. 使用 `StatefulWidget` 组件
2. 多继承 `SingleTickerProviderStateMixin`
3. 定义 `TabController _tabController;`
4. 配置生命周期函数，初始化
5. 在 `TabBar` 和 `TabBarView` 中调用 `controller: _tabController,`

> 配置生命周期函数

```
void initState() {// 生命週期函數
    super.initState();
    _tabController = new TabController(vsync: this, length: 4);
    // 自定義方法,監聽切換
    _tabController.addListener((){
      print(_tabController.index);
    });
}
```

> AppbarDemo2.dart

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

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

_AppbarDemo2PageState createState() => _AppbarDemo2PageState();
}

class _AppbarDemo2PageState extends State<AppbarDemo2Page> with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void dispose() {// 組件銷毀時，觸發的生命週期函數
    _tabController.dispose();// 銷毀
    super.dispose();
  }
  void initState() {// 生命週期函數
    super.initState();
    _tabController = new TabController(vsync: this, length: 4);
    // 自定義方法,監聽切換
    _tabController.addListener((){
      print(_tabController.index);
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title:Text("顶部 tab 切换"),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
            icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
            icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
            icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
            icon: new Icon(Icons.directions_boat),
            ),
          ],
          controller: _tabController,
        )
      ),
      body: new TabBarView(
        children: <Widget>[
        new Center(child: new Text('自行车')),
        new Center(child: new Text('船')),
        new Center(child: new Text('巴士')),
        new Center(child: new Text('巴d士')),
        ],
        controller: _tabController,
      ),
    );
  }
}
```

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

Tags：

很赞哦！ (0)

上一篇：flutter-14（路由中的路由换路返回到根路由)

下一篇：flutter-16(Drawer 侧边栏、、以及侧边栏内容布局)