Wigets学习之Tab

tab包含：TabBar、TabBarView

TabBar

• tabs：tabBar选项列表
• controller：控制器，一般需要指定
• isScrollable：是否可滚动，默认为false
• indicatorColor：当前激活项的底部指示颜色
• automaticIndicatorColorAdjustment：是否自动调整indicatorColor，默认为true，即：当indicatorColor和Material.color相同时，则自动调整indicatorColor=Colors.white
• indicatorWeight：底部指示器高度，默认为 2
• indicatorPadding：底部指示器内边距
• indicatorSize：底部指示器宽度，默认为TabBarIndicatorSize.tab(与tab选项一样宽)，还可指定：TabBarIndicatorSize.label(和文本一样宽)
• labelColor：文本颜色
• labelStyle：文本样式
• labelPadding：文本内边距
• unselectedLabelColor：未选中选项文本颜色
• unselectedLabelStyle：未选中选项文本样式
• dragStartBehavior：拖拽开始行为，默认：DragStartBehavior.start(拖动开始位置)，DragStartBehavior.down(点击位置)
• onTap：点击事件
• physics：滑动动画，禁止滑动可指定为NeverScrollableScrollPhysics

TabBarView

• children：选项对应的选项页(必填)
• controller：控制器，一般需要指定
• physics：滑动行为

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Tab学习', home: Home());
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  List<String> list = List.generate(10, (index) => '分类${index + 1}');

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: list.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tab学习'),
        bottom: TabBar(
          controller: _tabController,
          isScrollable: true,
          indicatorColor: Colors.orange,
          indicatorSize: TabBarIndicatorSize.tab,
          labelColor: Colors.black,
          labelStyle: TextStyle(fontWeight: FontWeight.bold),
          labelPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          unselectedLabelColor: Colors.black26,
          tabs: list.map((item) => Text(item)).toList(),
        ),
      ),
      body: TabBarView(
          controller: _tabController,
          children: list
              .map((item) => Container(
                    child: Text(
                      item,
                      textDirection: TextDirection.ltr,
                    ),
                  ))
              .toList()),
    );
  }
}

DefaultTabController

为子部件提供一个默认的tab controller，这样就不用指定tabBar、tabBarView的controller了

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Tab学习', home: Home());
  }
}

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

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  List<String> list = List.generate(10, (index) => '分类${index + 1}');

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: list.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tab学习'),
            bottom: TabBar(
              isScrollable: true,
              indicatorColor: Colors.orange,
              indicatorSize: TabBarIndicatorSize.tab,
              labelColor: Colors.black,
              labelStyle: TextStyle(fontWeight: FontWeight.bold),
              labelPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
              unselectedLabelColor: Colors.black26,
              tabs: list.map((item) => Text(item)).toList(),
            ),
          ),
          body: TabBarView(
              children: list
                  .map((item) => Container(
                        child: Text(
                          item,
                          textDirection: TextDirection.ltr,
                        ),
                      ))
                  .toList()),
        ));
  }
}