Flutter----去掉底部导航栏的水波纹效果

在群里有好几次被人问到了,Flutter自带的底部导航栏,点击会有水波纹的效果,要怎么去掉。当时我也很懵,不是觉得这应该很简单吗?怎么被问了好几次。现在我就把这个解决方法告诉你们。

其实处理问题的方式很简单。

    1. 自己去copy源码找到地方自己修改
    1. 自己去想办法(当然这是说废话。。。你不想方法,感觉第二天可以去财务结账了!)

好了我就不说废话了,直接说正题了。

正常来说我们建立一个底部导航栏代码如下:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final List pages=[
    Text("1"),
    Text("2"),
  ];
  int _currentIndex = 0;
  var currentPage;

  @override
  void initState() {
    super.initState();
    currentPage = pages[_currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('去掉水波纹效果'),
        centerTitle: true,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index){
          setState(() {
            _currentIndex = index;
            currentPage = pages[_currentIndex];
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
          BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('设置')),
        ],
      ),
      body: currentPage,
    );
  }
}

这是按照官方给的方式,效果自然不用多说,会有水波纹的效果!

这时候我们就想了,水波纹效果是怎么出来的。如果你做过水波纹效果的Widget那么你自然能想到。我们在使用Inkwell的时候,设置了三个参数,分别为brightness,splashColor,highlightColor。那么这时候你会不会想到,让这三个参数,全部改一遍试试。

那么局部修改的方法是什么呢?有个Theme组件,在data属性里面改这参数。

Theme(
          data: ThemeData(
            brightness: Brightness.light,
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
          ),
          child: child,
        )

好了方法有了,我们来试试:

修改后的代码如下:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final List pages=[
    Text("1"),
    Text("2"),
  ];
  int _currentIndex = 0;
  var currentPage;

  @override
  void initState() {
    super.initState();
    currentPage = pages[_currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('去掉水波纹效果'),
        centerTitle: true,
      ),
      bottomNavigationBar: Theme(
        data: ThemeData(
          brightness: Brightness.light,
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index){
            setState(() {
              _currentIndex = index;
              currentPage = pages[_currentIndex];
            });
          },
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
            BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('设置')),
          ],
        ),
      ),
      body: currentPage,
    );
  }
}

现在就没问题了! 效果自己去实践!

附上另一种搞笑方法: 你可以将BottomNavigationBar用CupertinoTabBar包起来效果也是一样的!!!哈哈当然不建议啊,毕竟看名字就知道这是ios适配的组件!

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页