Flutter 创建底部Tabbar与子控制器,去除底部点击动画效果

作者:jcmp      发布时间:2021-05-05      浏览量:0
一、Flutter 创建底部Tabbar

一、Flutter 创建底部Tabbar与子控制器,去除底部点击动画效果。

1. 底部Tabbar的创建

底部tabbar的创建和实现使用的是BottomNavigationBar()函数来创建的,传入一个Items数组,里面存放的是BottomNavigationBarItem元素,类似于iOS,

2 子控制器的创建

子控制器的实现原理是在Scaffold的body中,传入对应_currenIndex的控制器实例就; rootpage中的代码如下:

class _RootPageState extends State { int _cuttentIndex = 0; List pages = [WeChatPage(),FriendsPage(),FindPage(),MinePage()]; @override Widget build(BuildContext context) { return Container( child: Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, fixedColor: Colors.greenAccent, currentIndex: _cuttentIndex, selectedFontSize: 12.0, items: [ BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('微信')), BottomNavigationBarItem( icon: Icon(Icons.bookmark), title: Text('通讯录')), BottomNavigationBarItem( icon: Icon(Icons.history), title: Text('发现')), BottomNavigationBarItem( icon: Icon(Icons.person_outline), title: Text('我的')), ], onTap: (int index) { _cuttentIndex = index; print('index = $index'); setState(() {}); //刷新状态 }, ), body: pages[_cuttentIndex],//传入数据源数组中对应index的控制器即可 ), ); }}

子控制器需要返回一个有状态的Scaffold,创建不同的Appbar即可,代码如下:

import 'package:flutter/material.dart';class WeChatPage extends StatefulWidget { @override _WeChatPageState createState() => _WeChatPageState();}class _WeChatPageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('微信'), ), body: Center( child: Text('Wechat'), )); }}

3 去除底部Item点击默认的波纹效果

在点击底部的Item时,会出现一个选中的波纹动画效果,这实际上是MaterialApp的一个属性设置,我们可以将这个属性的色值改成透明色即可,代码如下:

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'WeChat', theme: ThemeData( primaryColor: Colors.greenAccent, highlightColor: Color.fromRGBO(0, 0, 0, 0), splashColor: Color.fromRGBO(0, 0, 0, 0)), home: RootPage(), ); }}