flutter 如何巧妙去掉TabBar点击带来的阴影及水波纹效果

最新推荐文章于 2023-09-07 16:03:04 发布
最新推荐文章于 2023-09-07 16:03:04 发布
阅读量2k 收藏
点赞数 1
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dryingup/article/details/114286431
版权

Theme
在进行自定义TabBar外层嵌套一层
我们只需要使用ThemeData中的属性便可以处理

Theme(
 data: ThemeData(
     ///点击的背景高亮颜色,处理阴影
     highlightColor: Colors.transparent,
     ///点击水波纹颜色
     splashColor: Colors.transparent,
    child: TabBar()
  ),

在child中就可以进行自定义设置了

消涸
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2024Flutter 去除 tabbar 点击后的高亮以及水波纹，SDK3^
qq_45927571的博客
03-13 605
去除Tabbar 的高亮和水波纹
Flutter 去除 tabbar 点击色
cilps的博客
04-30 478
Theme buildTheme() { return Theme( data: ThemeData( ///默认显示的背景颜色 backgroundColor: Colors.blue[500], ///点击的背景高亮颜色 highlightColor: Colors.blueGrey[600], ///点击水波纹颜色 splashColor: Color.fromRGBO(0, 0, ..
【Flutter 问题系列第 13 篇】Flutter 如何去掉 TabBar 点击时的阴影以及波纹效果
“Allen Su”的博客
04-17 3507
Flutter 如何去掉 TabBar 点击时的阴影以及波纹效果
Flutter TabBar 标签栏背景颜色、点击水波纹颜色配置
代码小疯子
10-29 3571
App 开发的很多默认的使用场景中，TabBar 默认使用的背景颜色、点击效果多多少少是满足不了我们的需要的，本文章就是个性颜色配置的
Flutter 取消按钮的动画效果
king6188的博客
07-06 775
(按钮)、(按钮)、(按钮)、FlatButton(扁平按钮)、IconButton(图标按钮)、弹出菜单按钮(弹出菜单按钮)、(轮廓按钮)、ButtonBar(轮廓按钮)、(浮动按钮)、Inkwell(墨水按钮)等，实际项目开发中可以按自己的需要或者习惯选择喜欢的控件。自己最常用的就是Inkwell和，感觉Inkwell可以实现所有的布局，基本上都在使用Inkwell。
Flutter中TextButton去除点击背景色
最新发布
qq_41209042的博客
09-07 510
,),),'保存',),),},),
Flutter—-去掉底部导航栏的水波纹效果
01-03
在群里有好几次被人问到了，Flutter自带的底部导航栏，点击会有水波纹的效果，要怎么去掉。当时我也很懵，不是觉得这应该很简单吗？怎么被问了好几次。现在我就把这个解决方法告诉你们。 其实处理问题的方式很简单。...
flutter InkWell实现水波纹点击效果
08-25
Flutter InkWell 实现水波纹点击效果 Flutter 中的 InkWell 是一个基本的组件，用于实现点击事件的水波纹效果。在实际开发中，我们经常需要在按钮、图片、文字等控件上添加点击事件，而 InkWell 正是实现这种效果的...
Flutter自定义TabBar的Indicator.zip
03-02
在本文中，我们将深入探讨如何在Flutter中自定义TabBar的Indicator，以便实现类似秒杀Tab的视觉效果。Flutter是一个由Google开发的开源UI工具包，用于构建高性能、高保真、多平台的移动应用程序。TabBar是Flutter中...
Flutter InkWell水波纹效果
10-26
Flutter InkWell水波纹效果。
flutter 自定义card阴影效果及card使用
01-03
最近在用flutter写web程序，简直是炼狱模式。。然后遇到个需求，原本的Card阴影无法满足产品需求，需要像IOS 那种超级高大上的，似影非影的效果。。（简直分分钟想打死产品） 一开始，当然都是百度了，于是百度到了一个方法：BoxShadow！ 于是高高兴兴开干了，代码如下 嗯。。。看上去好像没啥毛病，Y轴方向偏移7，blurRadius：模糊延申14，spreadRadius：不模糊的不要延申，为0 跑到安卓的浏览器上 简直Perfect！！！完工交差。。。（just我以为） 看到测试淫笑的眼神，我就知道了自己的图样图森破，他拿着自己高大上的iPhone给我截了个图： WTF？？？
flutter取消 点击的高亮，长按的水纹波
weixin_43453916的博客
08-05 810
Widget build(BuildContext context) { return Container( child: MaterialApp( title: '菜篮子', debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: Color(int.parse('0xfffa5956')), ...
flutter TabBar 实战使用技巧
智玲君
01-15 1317
Tabbar属性介绍： const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 thi
flutter 自定义Tabbar高度和背景色
一抹繁星
04-26 4471
最近在学习flutter相关的知识，在学到Tabbar的时候默认无法修改它的高度背景色，在网上查看被人的代码后自己封装了一下。你可以复制直接使用。（不排除有更好的实现方法，我也是刚接触flutter) 使用时如果指定有图标的高度要比无图标的高度大26 也可以自己再改下代码自定义。 bottom: CustomTabBar( // 背景色 ...
flutter之appbar阴影设置
热门推荐
weixin_43231352的博客
01-11 1万+
import 'package:flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build ...
Flutter 之去除AppBar 阴影
xixi
09-02 4123
页面本身是白色，所以我想将appbar 也设置成白色，并且需要去除阴影 child: Scaffold( appBar: AppBar( title: Text("xixi"), backgroundColor: Colors.white, elevation: 0, //默认是4， 设置成0 就是没有阴...
flutter 中顶部tabBar底色设置
冰天糖葫芦的博客
09-03 5836
由于flutter中顶部tabbar的底色用的是actionBar的底色，而且没有办法更改，如果想要一个不同颜色的底色，只能嵌套一个widget，通过实验，container是不行的，指示器会变成白色，设置的指示器颜色无法显示，如果底色是白色的话，就无法显示指示器。最后通过Material嵌套实现正常展示下面贴上代码： bottom: PreferredSize( p...
Flutter 创建底部Tabbar与子控制器,去除底部点击动画效果
wyyrls的博客
01-19 4884
Flutter 创建底部Tabbar与子控制器,去除底部点击动画效果 1. 底部Tabbar的创建 底部tabbar的创建和实现使用的是BottomNavigationBar（）函数来创建的，传入一个Items数组，里面存放的是BottomNavigationBarItem元素,类似于iOS， BottomNavigationBar常见属性： type：tabbar样式，默认为白色不显示； f...
flutter 滚动吸顶tabbar
07-30
Flutter是一种跨平台的移动应用开发框架，可以方便地创建漂亮且高性能的移动应用。滚动吸顶TabBar是指在页面滚动过程中，TabBar能够固定在页面的顶部，以保持在用户视野内，并且随着页面的滚动而切换选项卡。 为了实现滚动吸顶TabBar，我们可以使用Flutter提供的ScrollController来监听页面的滚动，并根据滚动的位置来决定TabBar的状态。 首先，我们需要创建一个ScrollController对象，并将其传递给滚动的可滚动组件（例如ListView、ScrollView等）的controller属性中。 然后，我们可以使用ScrollController的addListener方法来监听滚动过程中的位置变化。在listener中，我们可以根据滚动的位置来判断是否需要将TabBar固定在顶部，或者将其恢复到正常位置。 具体的实现步骤如下： 1. 创建一个滚动控制器对象：ScrollController _scrollController = ScrollController(); 2. 将滚动控制器对象传递给可滚动组件的controller属性：ListView(controller: _scrollController, ...) 3. 在页面构建方法中使用ScrollController的addListener方法：_scrollController.addListener(() { if (_scrollController.offset > 0) { // 需要吸顶处理 } else { // 恢复正常位置 } }); 4. 在需要吸顶处理的地方，将TabBar固定在顶部，例如将TabBar放在一个Stack组件中，并设置其alignment属性为Alignment.topCenter。 5. 在需要恢复正常位置的地方，将TabBar恢复到原始位置。 通过以上的步骤，我们就可以实现滚动吸顶TabBar的效果了。需要注意的是，根据实际情况，可能还需要处理一些细节，例如切换选项卡时的动画效果等。可以根据具体需求进行相应的调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值