我尝试在选项卡或单击时删除选项卡栏上的波纹效果
TabBar这个答案：
删除背景以恢复正常状态，但单击或点击选项卡栏时仍显示效果
我也尝试这个答案： 如何禁用Flutter中默认的Widget启动效果？
但我认为这个答案只适用于按钮或其他小部件......不适用于
TabBar这是我的代码，正如你所看到的，我尝试了所有方法，但单击时仍然显示选项卡效果：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
title: "App",
home: Sample(),
),
);
class Sample extends StatefulWidget {
@override
_StackOverState createState() => _StackOverState();
}
class _StackOverState extends State<Sample>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
final yourTheme = ThemeData.light();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tab bar',
),
),
body:
Theme(
data: yourTheme.copyWith(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
),
child: Column(
children: [
// give the tab bar a height [can change hheight to preferred height]
Container(
width: MediaQuery.of(context).size.width/2,
height: 45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
25.0,
),
),
child:
Container(
color:Colors.transparent,
child:
TabBar(
splashFactory: NoSplash.splashFactory,
labelPadding: EdgeInsets.zero,
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator:
BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Colors.green,
),
indicatorColor: Colors.transparent,
dividerColor: Colors.transparent,
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child:
Container(
// width: MediaQuery.of(context).size.width,
child:
Align(
alignment: Alignment.center,
child:Text("Place Bid"),
)
),
),
// second tab [you can add an icon using the icon property]
Tab(
child:
Container(
// width: MediaQuery.of(context).size.width,
child:
Align(
alignment: Alignment.center,
child: Text("buy now"),
)
),
),
],
),
)
),
// tab bar view here
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Center(
child: Text(
'Place Bid',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Buy Now',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],),)
);
}
}
要在 TabBar 中实现透明的波纹效果，您需要覆盖应用程序 ThemeData 中的 tabBarTheme。具体来说：
设置splashFactory： 使用 InkRipple.splashFactory 或任何其他所需的飞溅工厂来定义波纹行为。 提供一个覆盖颜色： overlayColor 属性决定波纹和悬停效果。 为所有状态返回 null 可有效禁用颜色叠加，同时保持启动动画完整。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(
const MaterialApp(
title: "App",
home: Sample(),
),
);
class Sample extends StatefulWidget {
const Sample({super.key});
@override
_StackOverState createState() => _StackOverState();
}
class _StackOverState extends State<Sample>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = TabController(
length: 2,
vsync: this,
);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
final yourTheme = ThemeData.light();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tab bar',
),
),
body: Theme(
data: yourTheme.copyWith(
tabBarTheme: TabBarTheme(
overlayColor: WidgetStateProperty.resolveWith<Color?>(
(states) {
return null; // Default
},
),
splashFactory: InkRipple.splashFactory, // Ripple effect for TabBar
),
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
),
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width / 2,
height: 45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
25.0,
),
),
child: Container(
color: Colors.transparent,
child: TabBar(
onTap: (index) {
_tabController.animateTo(
index,
duration: Duration.zero, // Disables animation
curve: Curves.linear,
);
},
labelPadding: EdgeInsets.zero,
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Colors.green,
),
indicatorColor: Colors.transparent,
dividerColor: Colors.transparent,
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child: Container(
// width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.center,
child: Text("Place Bid"),
),
),
),
// second tab [you can add an icon using the icon property]
Tab(
child: Container(
// width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.center,
child: Text("buy now"),
),
),
),
],
),
),
),
// tab bar view here
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Center(
child: Text(
'Place Bid',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Buy Now',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),
);
}
}