是否可以更改 Flutter 中所选标签栏图标的大小?
Posted
技术标签:
【中文标题】是否可以更改 Flutter 中所选标签栏图标的大小?【英文标题】:Is it possible to change the size of the selected tab bar icon in Flutter? 【发布时间】:2021-11-26 08:34:41 【问题描述】:我正在处理一个 Flutter 项目,但我的 TabBar 出现了问题。 我想增加所选图标 tabBar 的大小。有可能吗?我看到我们可以增加文本大小,但它当然不能使用图标。
这是我正在使用的代码:
return DefaultTabController(
length: 5,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Theme.of(context).primaryColor,
const Color.fromRGBO(0, 60, 99, 1.0)
]),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
TabBar(
tabs: [
Tab(
icon: Icon(
CupertinoIcons.add,
),
),
Tab(
icon: Icon(CupertinoIcons.add),
),
Tab(
icon: Icon(CupertinoIcons.add),
),
Tab(
icon: Icon(CupertinoIcons.add),
),
Tab(
icon: Icon(CupertinoIcons.add),
)
],
unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
labelColor: Color.fromRGBO(0, 60, 255, 1),
unselectedLabelStyle: TextStyle(fontSize: 15), // Test with text
labelStyle: TextStyle(
fontSize: 20,
),
),
],
),
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
FirstScreen(),
SecondScreen(),
ThirdScreen(),
FourthScreen(),
FifthScreen()
],
),
),
),
);
我真的卡住了,希望有解决办法!
【问题讨论】:
【参考方案1】:试试这个:
int _selectedTab = 0;
return DefaultTabController(
length: 5,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Theme.of(context).primaryColor,
const Color.fromRGBO(0, 60, 99, 1.0)
]),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
TabBar(
onTap: (index)
_selectedTab = index;
setState(());
,
tabs: [
Tab(
icon: Icon(
CupertinoIcons.add,
size: _selectedTab == 0 ? 30 : 18
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: _selectedTab == 1 ? 30 : 18
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: _selectedTab == 2 ? 30 : 18
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: _selectedTab == 3 ? 30 : 18
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: _selectedTab == 4 ? 30 : 18
),
)
],
unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
labelColor: Color.fromRGBO(0, 60, 255, 1),
unselectedLabelStyle: TextStyle(fontSize: 15), // Test with text
labelStyle: TextStyle(
fontSize: 20,
),
),
],
),
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
FirstScreen(),
SecondScreen(),
ThirdScreen(),
FourthScreen(),
FifthScreen()
],
),
),
),
);
【讨论】:
【参考方案2】:您需要一个 TabController,为此您应该将 TickerProviderStateMixin
添加到您的类中。然后将控制器设置为 Tabbar 并在条件下使用 tabController.index 来调整图标的大小。但是当你切换选项卡时它不起作用,所以你应该添加一个监听器和 setState。
这是代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:task_manager_v3/Utilities/CBase.dart';
class Test extends StatefulWidget
const Test(Key? key) : super(key: key);
@override
_TestState createState() => _TestState();
class _TestState extends State<Test> with TickerProviderStateMixin
TabController? tabController;
@override
void initState()
super.initState();
tabController = TabController(length: 5, vsync: this);
tabController!.addListener(()
setState(() );
);
@override
Widget build(BuildContext context)
return DefaultTabController(
length: 5,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Theme.of(context).primaryColor,
const Color.fromRGBO(0, 60, 99, 1.0)
]),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TabBar(
controller: tabController,
tabs: [
Tab(
icon: Icon(
CupertinoIcons.add,
size: tabController!.index == 0 ? 20 : 10,
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: tabController!.index == 1 ? 20 : 10,
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: tabController!.index == 2 ? 20 : 10,
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: tabController!.index == 3 ? 20 : 10,
),
),
Tab(
icon: Icon(
CupertinoIcons.add,
size: tabController!.index == 4 ? 20 : 10,
),
)
],
unselectedLabelColor: Color.fromRGBO(142, 142, 147, 1),
labelColor: Color.fromRGBO(0, 60, 255, 1),
unselectedLabelStyle:
TextStyle(fontSize: 15), // Test with text
labelStyle: TextStyle(
fontSize: 20,
),
),
],
),
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
FirstScreen(),
SecondScreen(),
ThirdScreen(),
FourthScreen(),
FifthScreen()
],
),
),
),
);
【讨论】:
谢谢!看起来与其他答案的推理相同(使用 tabIndex !) 不客气 ;)以上是关于是否可以更改 Flutter 中所选标签栏图标的大小?的主要内容,如果未能解决你的问题,请参考以下文章