フラッターTabBarのタブを表示

フラッターシリーズ全体のディレクトリ

TabBarには、ラベル、あなたが前後に切り替えることができ、レンダリングの横の列です。

プロパティ	説明
タブ	ラベルコントロールのシリーズ
コントローラ	ラベルの変更コントローラを選択
isScrollable	スクロール、デフォルトはfalseかどうか
indicatorColor	インジケータの色
indicatorWeight	厚さの指標
インジケータ	インジケータ、形状などのスタイルをカスタマイズすることができます
indicatorSize	インジケータの長さ、タブ：タブと限り、ラベル：限りラベルとラベル
labelColor	ラベルカラー
labelStyle	ラベルスタイル
ラベルのパディング	タグのパディング
unselectedLabelColor	選択されていないラベルの色
unselectedLabelStyle	未確認のラベルスタイル

TabBarの一般的な使用とTabBarView、TabBarViewとは異なるのTabBarを選択するには、対応するTabBarViewビュー表示
TabBarViewプロパティ説明：

子供達	同じ注意を払っている場合、使用の長さとにTabBar TabBarの子コントロールのシリーズ、
コントローラ	コントローラー、注意を払って使用して、コントロールやTabBar TabBarの場合と同じコントローラを使用します

使用します。

import 'package:flutter/material.dart';

class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabBar();
}

class _TabBar extends State<TabBarDemo> {
  final List<String> _tabValues = [
    '语文',
    '英语',
    '化学',
    '物理',
    '数学',
    '生物',
    '体育',
    '经济',
  ];

  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(
      length: _tabValues.length,
      vsync: ScrollableState(),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar'),
        bottom: TabBar(
          tabs: _tabValues.map((f) {
            return Text(f);
          }).toList(),
          controller: _controller,
          indicatorColor: Colors.red,
          indicatorSize: TabBarIndicatorSize.tab,
          isScrollable: true,
          labelColor: Colors.red,
          unselectedLabelColor: Colors.black,
          indicatorWeight: 5.0,
          labelStyle: TextStyle(height: 2),
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: _tabValues.map((f) {
          return Center(
            child: Text(f),
          );
        }).toList(),
      ),
    );
  }
}

効果：