[Flutter 組件 ——Tabbar]#
使用#
使用 Tabar，設置indicator的樣式，長短，設置 tab 選中和未選中的樣式，根據數組創建 Tabbar。
代碼如下：
import 'package:flutter/material.dart';
class TabbarDemo extends StatefulWidget {
TabbarDemo({Key? key}) : super(key: key);
_TabbarDemoState createState() => _TabbarDemoState();
}
class _TabbarDemoState extends State<TabbarDemo>
with SingleTickerProviderStateMixin {
var tabTextList = <String>[];
var categoryTabs = <Tab>[
Tab(
text: "首頁",
),
];
var tempCategoryTabs = <Tab>[];
@override
void initState() {
super.initState();
tabTextList = ["首頁", "新聞", "熱門"];
tabTextList.forEach((text) {
tempCategoryTabs.add(
Tab(
text: text,
),
);
});
setState(() {
categoryTabs = tempCategoryTabs;
});
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,
length: categoryTabs.length,
child: Scaffold(
appBar: AppBar(title: Text("Tabbar")),
body: Column(
children: [
TabBar(
tabs: categoryTabs,
isScrollable: true,
labelStyle: TextStyle(
fontSize: 24.0,
),
labelColor: Colors.blueAccent,
unselectedLabelStyle: TextStyle(fontSize: 16.0),
unselectedLabelColor: Colors.grey,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.orangeAccent, width: 3.0),
insets: EdgeInsets.fromLTRB(20, 0, 20, 0),
),
),
Expanded(
child: TabBarView(
children:
tabTextList.map((e) => Center(child: Text(e))).toList(),
),
)
],
),
),
);
}
}