Flutter TabBar


简介

SnackBarAction 来实现并行界面的横向滑动展示

  • TabBar，是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示，在Flutter的世界中，TabBar有着相同的作用。通常，我们会在AppBar的底部部分结合TabBarView来使用TabBar;

基本用法

在容器顶部或者底部配置, TabBar组件, 横向切换视口窗口中的内容

TabBar 有以下几项属性

  • tabs 一般使用Tab对象,当然也可以是其他的Widget
  • controller TabController对象
  • isScrollable 是否可滚动
  • indicatorColor 指示器颜色
  • indicatorWeight 指示器厚度
  • indicatorPadding 底部指示器的Padding
  • indicator 指示器decoration，例如边框等
  • indicatorSize 指示器大小计算方式
  • labelColor 选中Tab文字颜色
  • labelStyle 选中Tab文字Style
  • unselectedLabelColor 未选中Tab中文字颜色
  • unselectedLabelStyle 未选中Tab中文字style

TabBarView 有以下几项属性

  • children tabBar中对象分别对应的视图窗口内容, children的长度通常与tabs中的tab对象长度相同
  • controller TabController对象

实例演示

import 'package:flutter/material.dart';

class TabBarDemo extends StatefulWidget {
  const TabBarDemo() : super();

  @override
  State<StatefulWidget> createState() => _TabBarDemo();
}

/*
* AppBar 默认的实例,有状态
* */
class _TabBarDemo extends State with SingleTickerProviderStateMixin {
  ScrollController _scrollViewController;
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _scrollViewController =  ScrollController();
    _tabController =  TabController(vsync: this, length: 6);// 和下面的 TabBar.tabs 数量对应
  }

  @override
  void dispose() {
    _scrollViewController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。
    // 否则，如果最近的 Navigator 具有任何先前的 router ，则会插入BackButton。
    // 这种行为可以通过设置来关闭automaticallyImplyLeading 为false。在这种情况下，空的 leading widget 将导致 middle/title widget 拉伸开始。
    return  SizedBox(
      height: 500,
      child: Scaffold(
        appBar:  AppBar( // 大量配置属性参考 SliverAppBar 示例
          title:  Text('TabBar'),
          leading:  Icon(Icons.home),
          backgroundColor: Colors.amber[1000],
          bottom:  TabBar(
            isScrollable: true,
            controller: _tabController,
            tabs: <Widget>[
               Tab(text: "Tabs 1"),
               Tab(text: "Tabs 2"),
               Tab(text: "Tabs 3"),
               Tab(text: "Tabs 4"),
               Tab(text: "Tabs 5"),
               Tab(text: "Tabs 6"),
            ],
          ),
        ),
        body:  TabBarView(controller: _tabController, children: <Widget>[
          Text('TabsView 1'),
          Text('TabsView 2'),
          Text('TabsView 3'),
          Text('TabsView 4'),
          Text('TabsView 5'),
          Text('TabsView 6'),
        ]),
      )

    );
  }
}