Flutter浏览器标签页管理插件chrome_tab_bar的使用
Flutter浏览器标签页管理插件chrome_tab_bar的使用
Chrome Tab Bar
是一个可以自定义圆角半径、背景颜色、选中标签的颜色、标签文本等属性的浏览器标签栏组件。
安装
- 在你的
pubspec.yaml
文件中添加该包的最新版本(并运行dart pub get
):
dependencies:
chrome_tab_bar: ^1.0.3
- 导入该包并在你的 Flutter 应用中使用它:
import 'package:chrome_tab_bar/chrome_tab_bar.dart';
以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:chrome_tab_bar/chrome_tab_bar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// 这个小部件是你的应用的根节点。
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
[@override](/user/override)
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: ChromeTabBar(
tabSelectedColor: Colors.white,
backgroundColor: Colors.blue,
tabsList: const [
SizedBox(),
SizedBox(),
SizedBox(),
SizedBox(),
SizedBox(),
],
tabText: const [
"Tab One",
"Tab Two",
"Tab Three",
"Tab Four",
"Tab Five",
],
),
);
}
}
更多关于Flutter浏览器标签页管理插件chrome_tab_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复