Flutter Material风格组件(TabBar)

TabBar是一排水平的标签，可以来回切换。酷客教程也有介绍CupertinoTabBar，请大家参考。

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) {
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(),
  ),
);
  }
}

运行效果如图所示：

酷客网相关文章：

• Flutter Material风格组件(BottomNavigationBar)
• Flutter Material风格组件(AppBar)
• Flutter Material风格组件(Scaffold)
• Flutter Material风格组件(MaterialApp)