Flutter-Tabs的使用


Flutter中使用tabs还是非常的简单的,可以用在顶部导航栏,也可以用在底部导航栏。

使用Tabs需要用到两个widget,一个是TabBar,用于顶导航或者底导航;一个是TabBarView,用于Tab下具体的内容。

TabBar

首先在AppBar中使用TabBar:

final TABS = [
    Tab(icon: Icon(Icons.book)),
    Tab(icon: Icon(Icons.videocam)),
    Tab(icon: Icon(Icons.games)),
];

  TabBar _buildTabBar() {
    return TabBar(
      tabs: TABS,
    );
  }

Indicator

可以看到,底下还有一个Indicator,如果看源码,会发现默认使用的Indicator为UnderlineTabIndicator

不过还是可以进行自定义:

  TabBar _buildTabBar() {
    return TabBar(
      controller: _tabController,
      tabs: TABS,
      indicatorColor: Colors.white,
      indicatorPadding: EdgeInsets.symmetric(horizontal: 20),
      indicatorWeight: 2,
      indicatorSize: TabBarIndicatorSize.label,
    );
  }

其中indicatorColor用来指定Indicator的颜色,IndicatorPadding用来指定内容四周的边距,IndicatorSize可以选择两个值:

enum TabBarIndicatorSize {
    /// 为tab时,Indicator撑满tab宽度
  tab,

  /// 为label时,Indicator宽度为tab的内容的宽度
  label,
}

TabBarView

TabBarView对应Tab下的内容视图:

  TabBarView _buildTabBarView() {
    return TabBarView(
      controller: _tabController,
      children: PAGES,
    );
  }

  final PAGES = [ArticleEntry(), PageEntry(), DemoEntry()];

可以看到TabBar和TabBarView中都有一个Controller,这个Controller用途比较大,比如你想知道当前选中的是哪个tab,默认选中哪个tab,都需要TabController的帮助,我们一般用DefaultTabController来包裹具体的视图。

来看一下全部的代码吧:

import 'package:flutter/material.dart';
import 'package:flutter_system/page/page_entry.dart';

class TabsDemo extends StatefulWidget {
  
  _TabsDemoState createState() {
    return _TabsDemoState();
  }
}

class _TabsDemoState extends State<TabsDemo>
    with SingleTickerProviderStateMixin {
  final TABS = [
    Tab(icon: Icon(Icons.book)),
    Tab(icon: Icon(Icons.videocam)),
    Tab(icon: Icon(Icons.games)),
  ];

  final PAGES = [ArticleEntry(), PageEntry(), DemoEntry()];

  TabController _tabController;

  
  void initState() {
    _tabController =
        TabController(initialIndex: 0, length: TABS.length, vsync: this);
    super.initState();
  }

  
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: TABS.length,
        child: Scaffold(
            appBar: AppBar(
              title: Text("Tabs Demo"),
              centerTitle: true,
              bottom: _buildTabBar(),
            ),
            body: _buildTabBarView(),
            floatingActionButton: Builder(
              builder: (BuildContext context) => FloatingActionButton(
                  child: Icon(Icons.info),
                  onPressed: () {
                    _showSnackBar(context);
                  }),
            )));
  }

  TabBarView _buildTabBarView() {
    return TabBarView(
      controller: _tabController,
      children: PAGES,
    );
  }

  TabBar _buildTabBar() {
    return TabBar(
      controller: _tabController,
      tabs: TABS,
      indicatorColor: Colors.white,
      indicatorPadding: EdgeInsets.symmetric(horizontal: 20),
      indicatorWeight: 2,
      indicatorSize: TabBarIndicatorSize.label,
    );
  }

  void _showSnackBar(BuildContext context) {
    Scaffold.of(context).showSnackBar(
        SnackBar(content: Text("当前选中index为${_tabController.index}")));
  }
}

源码

https://github.com/jiangkang/flutter-system


文章作者: 姜康
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 姜康 !
评论
 上一篇
Flutter-Text的使用 Flutter-Text的使用
关注 https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识 文本作为UI最基本的元素,最基本的用法有这些: 字体 文字大小、颜色 一些常用样式,比如倾斜,加粗,下划线
2020-05-08
下一篇 
Flutter时间处理 Flutter时间处理
Flutter 中在时间处理方面还是比较简单的,我们主要用到的有两个类: DateTime 表示一个指定的时间点,包括年月日时分秒 TimeOfDay 表示一天中的一个时间点,可以区分上午,下午,12小时制,24小时制等 获取当前时
2020-05-08
  目录