Merge pull request #23 from wjun94/master

[!] 底部单击添加颜色变化，暴露tab单击事件，封装AppBar，底部tab通过传参数配置
iteatimeteam · Jul 25, 2019 · ef54730 · ef54730
2 parents 2207ff4 + 23a04f7
commit ef54730
Show file tree

Hide file tree

Showing 5 changed files with 350 additions and 157 deletions.
diff --git a/lib/TapWaterTabbar.dart b/lib/TapWaterTabbar.dart
@@ -1,3 +1,5 @@
+/** 该页面以废弃 */
+
 import 'package:flutter/material.dart';
 import 'package:tap_water_tab_bar/tab_item.dart';
 import 'package:tap_water_tab_bar/tap_water_tab_bar.dart';
@@ -28,7 +30,7 @@ class NavigationIconView {
 
 class TapWaterTabbar extends StatefulWidget {
   final bool isButton;
-  final List<TabItemInfo> tabItems;
+  final List<TabItem> tabItems;
   TapWaterTabbar({this.tabItems, this.isButton = false}) {
 //    final int _len = this.btmNavbar.length;
 //    // final int _len = 5;

diff --git a/lib/main.dart b/lib/main.dart
@@ -1,26 +1,96 @@
 import 'package:flutter/material.dart';
-import 'package:tap_water_tab_bar/tab_item.dart';
-
-import 'TapWaterTabbar.dart';
+import 'widget/navigation_bar.dart';
+// import 'TapWaterTabbar.dart';
+import 'tap_water_tab_bar.dart';
+import './tab_item.dart';
 
 void main() => runApp(MyApp());
 
 class MyApp extends StatelessWidget {
   // This widget is the root of your application.
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      home: TapWaterTabbar(isButton: true, tabItems: [
-        TabItemInfo(title: '微信', icon: Icons.ac_unit, selectedColor: Colors.blue),
-        TabItemInfo(title: '微信', icon: Icons.ac_unit, selectedColor: Colors.blue),
-        TabItemInfo(title: ''),
-        TabItemInfo(title: '微信', icon: Icons.ac_unit, selectedColor: Colors.blue),
-        TabItemInfo(title: '微信', icon: Icons.ac_unit, selectedColor: Colors.blue),
-      ]),
-    );
+        title: 'Flutter Demo',
+        theme: ThemeData(
+          primarySwatch: Colors.blue,
+        ),
+        home: _MyAppPage());
+  }
+}
+
+class _MyAppPage extends StatefulWidget {
+  _MyAppPage({Key key}) : super(key: key);
+
+  @override
+  _MyAppPageState createState() => new _MyAppPageState();
+}
+
+class _MyAppPageState extends State<_MyAppPage> {
+  int _index = 0;
+  var _pages = [
+    Align(
+      alignment: Alignment.center,
+      child: Text('页面1'),
+    ),
+    Align(
+      alignment: Alignment.center,
+      child: Text('页面2'),
+    ),
+    Align(
+      alignment: Alignment.center,
+      child: Text('页面3'),
+    ),
+    Align(
+      alignment: Alignment.center,
+      child: Text('页面4'),
+    ),
+    Align(
+      alignment: Alignment.center,
+      child: Text('页面5'),
+    ),
+  ];
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: NavigationBar(),
+        body: Stack(
+          children: <Widget>[
+            _pages[_index],
+            WaterTabBar(
+                isButton: true,
+                btmNavbar: [
+                  TabItemInfo(
+                      title: '微信1',
+                      icon: Icons.ac_unit,
+                      activeIcon: Icons.backspace,
+                      selectedColor: Colors.green),
+                  TabItemInfo(
+                      title: '微信2',
+                      icon: Icons.ac_unit,
+                      activeIcon: Icons.cached,
+                      selectedColor: Colors.green),
+                  TabItemInfo(
+                      title: '微信3',
+                      icon: Icons.ac_unit,
+                      activeIcon: Icons.edit,
+                      selectedColor: Colors.green),
+                  TabItemInfo(
+                      title: '微信4',
+                      icon: Icons.ac_unit,
+                      activeIcon: Icons.cached,
+                      selectedColor: Colors.green),
+                ],
+                onTabClick: onTabClick),
+          ],
+        ));
+  }
+
+  void onTabClick(TabItemInfo node) {
+    setState(() {
+      _index = node.index;
+    });
+    print('$node');
   }
 }
diff --git a/lib/tab_item.dart b/lib/tab_item.dart
@@ -5,84 +5,120 @@ class TabItemInfo {
   final IconData icon;
   final IconData activeIcon;
   final Color normalColor;
+  int index;
   final Color selectedColor;
-  TabItemInfo({this.title, this.icon, this.activeIcon, this.normalColor, this.selectedColor});
+  TabItemInfo(
+      {this.title,
+      this.index,
+      this.icon,
+      this.activeIcon,
+      this.normalColor = Colors.grey,
+      this.selectedColor = Colors.blue});
 }
 
 class TabItem extends StatefulWidget {
   final TabItemInfo itemInfo;
+  String get title {
+    if (itemInfo != null) {
+      return itemInfo.title;
+    }
+  }
 
-  Color get normalColor => itemInfo.normalColor;
-  Color get selectedColor => itemInfo.selectedColor;
-  String get title => itemInfo.title;
-  IconData get icon => itemInfo.icon;
-  IconData get activeIcon => itemInfo.activeIcon;
-  final bool selected;
-  final VoidCallback callback;
-  TabItem({this.itemInfo, this.selected = false, this.callback});
+  IconData get icon {
+    if (itemInfo != null) {
+      return itemInfo.icon;
+    }
+  }
 
+  IconData get activeIcon {
+    if (itemInfo != null) {
+      return itemInfo.activeIcon;
+    }
+  }
+
+  Color get selectedColor {
+    if (itemInfo != null) {
+      return itemInfo.selectedColor;
+    }
+  }
+
+  Color get normalColor {
+    if (itemInfo != null) {
+      return itemInfo.normalColor;
+    }
+  }
+
+  int get index {
+    if (itemInfo != null) {
+      return itemInfo.index;
+    }
+  }
+
+  final Function onTabClick;
+  final bool isSelected;
+  TabItem({
+    this.itemInfo,
+    this.onTabClick,
+    this.isSelected,
+  });
   @override
   State<StatefulWidget> createState() => _TabItem();
 }
 
 class _TabItem extends State<TabItem> {
   @override
   Widget build(BuildContext context) {
-    final Color themeColor = widget.selected ? widget.selectedColor : widget.normalColor;
-    final Icon icon = widget.icon != null
-        ? widget.selected
-            ? Icon(
-                widget.activeIcon ?? widget.icon,
-                color: widget.selectedColor,
-              )
-            : Icon(
-                widget.icon,
-                color: widget.normalColor,
-              )
-        : null;
+    // final _themeColor = widget.isSelected ? widget.selectedColor : widget.normalColor;
     return Expanded(
       child: GestureDetector(
-        onTap: () {
-          if (widget.callback != null) {
-            widget.callback();
-          }
-        },
-        child: Stack(
-          fit: StackFit.expand,
-          children: <Widget>[
-            Column(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              mainAxisSize: MainAxisSize.min,
-              children: <Widget>[
-                Flexible(
-                  child: icon != null
-                      ? Container(
-                          child: Padding(padding: const EdgeInsets.only(top: 5), child: icon),
-                        )
-                      : Container(),
-                ),
-                Flexible(
-                  child: Container(
-                    child: Align(
-                      alignment: Alignment(0, 0),
-                      child: Padding(
-                        padding: const EdgeInsets.all(0),
-                        child: widget.title != null
-                            ? Text(
-                                widget.title,
-                                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 10, color: themeColor),
-                              )
-                            : Container(),
-                      ),
+          onTap: _onTab,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              Flexible(
+                child: widget.icon != null
+                    ? Container(
+                        child: Padding(
+                          padding: const EdgeInsets.only(top: 5),
+                          child: Icon(
+                            widget.isSelected ? widget.activeIcon : widget.icon,
+                            color: widget.isSelected
+                                ? widget.selectedColor
+                                : widget.normalColor,
+                          ),
+                        ),
+                      )
+                    : Container(),
+              ),
+              Flexible(
+                child: Container(
+                  child: Align(
+                    alignment: Alignment(0, 0),
+                    child: Padding(
+                      padding: const EdgeInsets.all(0),
+                      child: widget.title != null
+                          ? Text(
+                              widget.title,
+                              style: TextStyle(
+                                  color: widget.isSelected
+                                      ? widget.selectedColor
+                                      : widget.normalColor,
+                                  fontWeight: FontWeight.w600,
+                                  fontSize: 10),
+                            )
+                          : Container(),
                     ),
                   ),
-                )
-              ],
-            )
-          ],
-        ),
-      ),
+                ),
+              )
+            ],
+          )),
     );
   }
+
+  void _onTab() {
+    widget.onTabClick(widget.itemInfo);
+  }
 }