[+] tab配置通过传btmNavbar进行配置，优化按钮添加隐藏操作

XuYanci · Jul 23, 2019 · 3f95ac0 · 3f95ac0
1 parent 1be789c
commit 3f95ac0
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 18 deletions.
diff --git a/lib/TapWaterTabbar.dart b/lib/TapWaterTabbar.dart
@@ -27,8 +27,20 @@ class NavigationIconView {
 
 class TapWaterTabbar extends StatefulWidget {
   final bool isButton;
-  TapWaterTabbar({Key key, this.isButton = false}) : super(key: key);
-
+  final List<Map<String, dynamic>> btmNavbar;
+  TapWaterTabbar({this.btmNavbar, this.isButton = false}) {
+    final int _len = this.btmNavbar.length;
+    // final int _len = 5;
+    if (this.isButton) {
+      if (_len % 2 == 0) {
+        this.btmNavbar.insert(_len ~/ 2, null);
+      } else {
+        this.btmNavbar.insert(_len ~/ 2 + 1, null);
+        this.btmNavbar.insert(_len ~/ 2 + 2, null);
+      }
+    }
+  }
+
   @override
   _TapWaterTabbarState createState() => _TapWaterTabbarState();
 }
@@ -45,10 +57,20 @@ class _TapWaterTabbarState extends State<TapWaterTabbar> {
   void initState() {
     super.initState();
     _navgationViews = [
-      NavigationIconView(title: '微信', icon: Icon(Icons.ac_unit), avtiveIcon: Icon(Icons.backspace)),
-      NavigationIconView(title: '通讯录', icon: Icon(Icons.backup), avtiveIcon: Icon(Icons.cached)),
-      NavigationIconView(title: '', icon: Icon(Icons.publish), avtiveIcon: Icon(Icons.public)),
-      NavigationIconView(title: '发现', icon: Icon(Icons.dashboard), avtiveIcon: Icon(Icons.edit)),
+      NavigationIconView(
+          title: '微信',
+          icon: Icon(Icons.ac_unit),
+          avtiveIcon: Icon(Icons.backspace)),
+      NavigationIconView(
+          title: '通讯录',
+          icon: Icon(Icons.backup),
+          avtiveIcon: Icon(Icons.cached)),
+      NavigationIconView(
+          title: '', icon: Icon(Icons.publish), avtiveIcon: Icon(Icons.public)),
+      NavigationIconView(
+          title: '发现',
+          icon: Icon(Icons.dashboard),
+          avtiveIcon: Icon(Icons.edit)),
       NavigationIconView(
         title: '我的',
         icon: Icon(Icons.memory),
@@ -87,7 +109,9 @@ class _TapWaterTabbarState extends State<TapWaterTabbar> {
   Widget build(BuildContext context) {
     final botNavbar = new BottomNavigationBar(
       fixedColor: Colors.green,
-      items: _navgationViews.map((NavigationIconView navigationView) => navigationView.item).toList(),
+      items: _navgationViews
+          .map((NavigationIconView navigationView) => navigationView.item)
+          .toList(),
       currentIndex: _currentIndex,
       type: BottomNavigationBarType.fixed,
       onTap: onTap,
@@ -172,7 +196,8 @@ class _TapWaterTabbarState extends State<TapWaterTabbar> {
           ),
           Align(
             alignment: Alignment.bottomCenter,
-            child: WaterTabBar(isButton: widget.isButton),
+            child: WaterTabBar(
+                isButton: widget.isButton, btmNavbar: widget.btmNavbar),
           ),
 //          Align(
 //            child: Padding(

diff --git a/lib/main.dart b/lib/main.dart
@@ -13,7 +13,12 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: TapWaterTabbar(isButton: true),
+      home: TapWaterTabbar(isButton: true, btmNavbar: [
+              {'title': '微信', 'icon': Icon(Icons.ac_unit)},
+              {'title': '微信', 'icon': Icon(Icons.ac_unit)},
+              {'title': '微信', 'icon': Icon(Icons.ac_unit)},
+              {'title': '微信', 'icon': Icon(Icons.ac_unit)}
+            ]),
     );
   }
 }
diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart
@@ -5,7 +5,8 @@ const String bigImg = 'images/post_normal.png';
 
 class WaterTabBar extends StatefulWidget {
   final bool isButton;
-  WaterTabBar({Key key, this.isButton = false}) : super(key: key);
+  List<Map<String, dynamic>> btmNavbar = [];
+  WaterTabBar({this.btmNavbar, this.isButton = false});
   @override
   State<StatefulWidget> createState() => _WaterTabBarState();
 }
@@ -21,27 +22,35 @@ class _WaterTabBarState extends State<WaterTabBar> {
           height: 60,
           decoration: BoxDecoration(
             color: Colors.white,
-            boxShadow: [BoxShadow(color: Colors.black12, offset: Offset(0, -1), blurRadius: 8)],
+            boxShadow: [
+              BoxShadow(
+                  color: Colors.black12, offset: Offset(0, -1), blurRadius: 8)
+            ],
           ),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             mainAxisSize: MainAxisSize.max,
             crossAxisAlignment: CrossAxisAlignment.center,
-            children: <Widget>[
+            children: widget.btmNavbar
+                .map((v) =>  v != null ? TabItem(title: v['title'], icon: v['icon']) : (widget.isButton ? TabItem() : Text('')))
+                .toList() /* [
               TabItem(title: '微信', icon: Icon(Icons.ac_unit)),
               TabItem(title: '微信', icon: Icon(Icons.ac_unit)),
               widget.isButton ? TabItem() : Text(''),
               TabItem(title: '微信', icon: Icon(Icons.ac_unit)),
               TabItem(title: '微信', icon: Icon(Icons.ac_unit))
-            ],
+            ] */
+            ,
           ),
         ),
         Positioned(
-          child: widget.isButton ? Container(
-            margin: const EdgeInsets.only(bottom: 10),
-            width: 60,
-            child: Image.asset(bigImg),
-          ): Text(''),
+          child: widget.isButton
+              ? Container(
+                  margin: const EdgeInsets.only(bottom: 10),
+                  width: 60,
+                  child: Image.asset(bigImg),
+                )
+              : Text(''),
         )
 //        IgnorePointer(
 //          child: Container(