From 9df9833435d88b7726550b8349cd52ad1449624f Mon Sep 17 00:00:00 2001 From: X-Liang <1129584401@qq.com> Date: Wed, 24 Jul 2019 11:39:22 +0800 Subject: [PATCH 01/12] no message --- lib/TapWaterTabbar.dart | 72 +++++++----------------- lib/main.dart | 14 +++-- lib/tab_item.dart | 110 +++++++++++++++++++++++-------------- lib/tap_water_tab_bar.dart | 90 ++++++++++++++++++++---------- 4 files changed, 159 insertions(+), 127 deletions(-) diff --git a/lib/TapWaterTabbar.dart b/lib/TapWaterTabbar.dart index 39de6cb..627db97 100644 --- a/lib/TapWaterTabbar.dart +++ b/lib/TapWaterTabbar.dart @@ -1,4 +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'; import 'firstvc.dart'; @@ -27,18 +28,18 @@ class NavigationIconView { class TapWaterTabbar extends StatefulWidget { final bool isButton; - final List> 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); - } - } + final List tabItems; + TapWaterTabbar({this.tabItems, 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 @@ -56,27 +57,6 @@ class _TapWaterTabbarState extends State { @override 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.memory), - avtiveIcon: Icon(Icons.drive_eta), - ) - ]; _pageController = PageController(initialPage: _currentIndex); _pages = [ @@ -107,15 +87,6 @@ class _TapWaterTabbarState extends State { @override Widget build(BuildContext context) { - final botNavbar = new BottomNavigationBar( - fixedColor: Colors.green, - items: _navgationViews - .map((NavigationIconView navigationView) => navigationView.item) - .toList(), - currentIndex: _currentIndex, - type: BottomNavigationBarType.fixed, - onTap: onTap, - ); return Scaffold( appBar: AppBar( elevation: 0.0, @@ -197,18 +168,13 @@ class _TapWaterTabbarState extends State { Align( alignment: Alignment.bottomCenter, child: WaterTabBar( - isButton: widget.isButton, btmNavbar: widget.btmNavbar), + isButton: widget.isButton, + tabItemInfos: widget.tabItems, + selectedCallback: (int index) { + print(index); + }, + ), ), -// Align( -// child: Padding( -// padding: const EdgeInsets.only(bottom: 50.0), -// child: FloatingActionButton( -// child: new Image.asset(bigImg), -// onPressed: onBigImgTap, -// ), -// ), -// alignment: Alignment.bottomCenter, -// ), ], ), ); diff --git a/lib/main.dart b/lib/main.dart index 194e50b..1ea1915 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:tap_water_tab_bar/tab_item.dart'; import 'TapWaterTabbar.dart'; @@ -13,12 +14,13 @@ class MyApp extends StatelessWidget { theme: ThemeData( primarySwatch: Colors.blue, ), - 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)} - ]), + 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), + ]), ); } } diff --git a/lib/tab_item.dart b/lib/tab_item.dart index e77a2ea..ae54767 100644 --- a/lib/tab_item.dart +++ b/lib/tab_item.dart @@ -1,10 +1,26 @@ import 'package:flutter/material.dart'; -class TabItem extends StatefulWidget { +class TabItemInfo { final String title; - final Icon icon; - final double width; - TabItem({this.title, this.icon, this.width}); + final IconData icon; + final IconData activeIcon; + final Color normalColor; + final Color selectedColor; + TabItemInfo({this.title, this.icon, this.activeIcon, this.normalColor, this.selectedColor}); +} + +class TabItem extends StatefulWidget { + final TabItemInfo itemInfo; + + 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}); + @override State createState() => _TabItem(); } @@ -12,46 +28,60 @@ class TabItem extends StatefulWidget { class _TabItem extends State { @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; return Expanded( - child: Stack( - fit: StackFit.expand, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - mainAxisSize: MainAxisSize.min, - children: [ - Flexible( - child: widget.icon != null - ? Container( - child: Padding( - padding: const EdgeInsets.only(top: 5), - child: IconButton(icon: widget.icon, color: Color(0xFF8c77ec), onPressed: null), - ), - ) - : Container( - width: widget.width, + child: GestureDetector( + onTap: () { + if (widget.callback != null) { + widget.callback(); + } + }, + child: Stack( + fit: StackFit.expand, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisSize: MainAxisSize.min, + children: [ + 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(), ), - ), - 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), - ) - : Container(), ), ), - ), - ) - ], - ) - ], + ) + ], + ) + ], + ), ), ); } diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index 27df318..7b36411 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -1,17 +1,47 @@ import 'package:flutter/material.dart'; import 'package:tap_water_tab_bar/tab_item.dart'; +const double TabBarHeight = 60.0; const String bigImg = 'images/post_normal.png'; +typedef WaterTabBarSelectedCallback = Function(int selectedPos); + +class WaterTabBarController extends ValueNotifier { + WaterTabBarController(int selectedIndex) : super(selectedIndex); +} class WaterTabBar extends StatefulWidget { final bool isButton; - List> btmNavbar = []; - WaterTabBar({this.btmNavbar, this.isButton = false}); + final List tabItemInfos; + final int selectedIndex; + final WaterTabBarController waterTabBarController; + final WaterTabBarSelectedCallback selectedCallback; + WaterTabBar( + {this.tabItemInfos = const [], + this.isButton = false, + this.waterTabBarController, + this.selectedIndex = 0, + this.selectedCallback}); + @override State createState() => _WaterTabBarState(); } class _WaterTabBarState extends State { + WaterTabBarController _controller; + int _selectedIndex; + int _prevSelectedIndex; + + void _changeSelectedIndex() => _setSelectedIndex(_controller.value); + + @override + void initState() { + super.initState(); + _selectedIndex = _prevSelectedIndex = widget.selectedIndex; + _controller = + widget.waterTabBarController != null ? widget.waterTabBarController : WaterTabBarController(_selectedIndex); + _controller.addListener(_changeSelectedIndex); + } + @override Widget build(BuildContext context) { return Stack( @@ -19,28 +49,29 @@ class _WaterTabBarState extends State { alignment: Alignment.bottomCenter, children: [ Container( - height: 60, + height: TabBarHeight, 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.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)) - ] */ - , + children: widget.tabItemInfos + .asMap() + .map((int index, TabItemInfo item) => MapEntry( + index, + TabItem( + itemInfo: item, + selected: _controller.value == index, + callback: () { + _controller.value = index; + setState(() {}); + }, + ))) + .values + .toList(), ), ), Positioned( @@ -52,18 +83,21 @@ class _WaterTabBarState extends State { ) : Text(''), ) -// IgnorePointer( -// child: Container( -// decoration: const BoxDecoration(color: Colors.transparent), -// child: Align( -// heightFactor: 1, -// child: OverflowBox( -// child: , -// ), -// ), -// ), -// ) ], ); } + + void _setSelectedIndex(int index) { + _prevSelectedIndex = _selectedIndex; + _selectedIndex = index; + if (widget.selectedCallback != null) { + widget.selectedCallback(_selectedIndex); + } + } + + @override + void dispose() { + super.dispose(); + _controller.removeListener(_changeSelectedIndex); + } } From 111e8fa5894d733ec2ff67a4c6aa37be5c0c8dc1 Mon Sep 17 00:00:00 2001 From: wjun94 Date: Wed, 24 Jul 2019 15:44:50 +0800 Subject: [PATCH 02/12] =?UTF-8?q?[!]=20=E5=BA=95=E9=83=A8=E5=8D=95?= =?UTF-8?q?=E5=87=BB=E6=B7=BB=E5=8A=A0=E9=A2=9C=E8=89=B2=E5=8F=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E6=9A=B4=E9=9C=B2tab=E5=8D=95=E5=87=BB=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=B0=81=E8=A3=85AppBar=EF=BC=8C=E5=BA=95?= =?UTF-8?q?=E9=83=A8tab=E9=80=9A=E8=BF=87=E4=BC=A0=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/TapWaterTabbar.dart | 111 ++------------------------ lib/main.dart | 98 ++++++++++++++++++++--- lib/tab_item.dart | 42 +++++++--- lib/tap_water_tab_bar.dart | 142 +++++++++++++++++++++------------ lib/widget/navigation_bar.dart | 85 ++++++++++++++++++++ 5 files changed, 299 insertions(+), 179 deletions(-) create mode 100644 lib/widget/navigation_bar.dart diff --git a/lib/TapWaterTabbar.dart b/lib/TapWaterTabbar.dart index 39de6cb..18b999f 100644 --- a/lib/TapWaterTabbar.dart +++ b/lib/TapWaterTabbar.dart @@ -28,7 +28,8 @@ class NavigationIconView { class TapWaterTabbar extends StatefulWidget { final bool isButton; final List> btmNavbar; - TapWaterTabbar({this.btmNavbar, this.isButton = false}) { + final Function onTabClick; + TapWaterTabbar({this.btmNavbar, this.isButton = false, this.onTabClick}) { final int _len = this.btmNavbar.length; // final int _len = 5; if (this.isButton) { @@ -88,22 +89,7 @@ class _TapWaterTabbarState extends State { ]; } - _buildPopupMenuItem(Widget icon, String title) { - return Row( - children: [ - icon, - Container( - width: 20, - ), - Text( - title, - style: TextStyle( - color: Colors.white, - ), - ) - ], - ); - } + @override Widget build(BuildContext context) { @@ -116,102 +102,15 @@ class _TapWaterTabbarState extends State { type: BottomNavigationBarType.fixed, onTap: onTap, ); - return Scaffold( - appBar: AppBar( - elevation: 0.0, - title: Text('微信'), - actions: [ - IconButton( - icon: Icon(Icons.search), - onPressed: () { - print('xxx'); - }, - ), - Container(width: 5.0), - PopupMenuButton( - icon: Icon(Icons.add), - itemBuilder: (BuildContext context) { - return >[ - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.search, - color: Colors.white, - ), - "发起群聊"), - value: "group_chat", - ), - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.add_circle, - color: Colors.white, - ), - "添加朋友"), - value: "add_friend", - ), - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.scanner, - color: Colors.white, - ), - "扫一扫"), - value: "scan", - ), - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.payment, - color: Colors.white, - ), - "收付款"), - value: "pay", - ), - ]; - }, - onSelected: (String selected) { - print('点击了$selected'); - }, - ), - Container(width: 5.0) - ], - ), - body: Stack( + return Stack( children: [ - Padding( - padding: const EdgeInsets.only(bottom: 50), - child: PageView.builder( - itemBuilder: (BuildContext context, int index) { - return _pages[index]; - }, - controller: _pageController, - itemCount: _pages.length, - onPageChanged: (int index) { - setState(() { - _currentIndex = index; - }); - }, - ), - ), Align( alignment: Alignment.bottomCenter, child: WaterTabBar( isButton: widget.isButton, btmNavbar: widget.btmNavbar), ), -// Align( -// child: Padding( -// padding: const EdgeInsets.only(bottom: 50.0), -// child: FloatingActionButton( -// child: new Image.asset(bigImg), -// onPressed: onBigImgTap, -// ), -// ), -// alignment: Alignment.bottomCenter, -// ), ], - ), - ); + ); } void onTap(int index) { diff --git a/lib/main.dart b/lib/main.dart index 194e50b..cccca25 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,24 +1,96 @@ import 'package:flutter/material.dart'; - -import 'TapWaterTabbar.dart'; +import 'widget/navigation_bar.dart'; +// import 'TapWaterTabbar.dart'; +import 'tap_water_tab_bar.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, 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)} - ]), - ); + 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.topLeft, + child: Text('1'), + ), + Align( + alignment: Alignment.topLeft, + child: Text('2'), + ), + Align( + alignment: Alignment.topLeft, + child: Text('3'), + ), + Align( + alignment: Alignment.topLeft, + child: Text('4'), + ), + Align( + alignment: Alignment.topLeft, + child: Text('5'), + ), + ]; + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: NavigationBar(), + body: Stack( + children: [ + _pages[_index], + WaterTabBar( + isButton: true, + btmNavbar: [ + { + 'title': '微信1', + 'icon': Icon(Icons.ac_unit), + 'avtiveIcon': Icon(Icons.backspace, color: Colors.green) + }, + { + 'title': '微信2', + 'icon': Icon(Icons.ac_unit), + 'avtiveIcon': Icon(Icons.cached, color: Colors.green) + }, + { + 'title': '微信3', + 'icon': Icon(Icons.ac_unit), + 'avtiveIcon': Icon(Icons.edit, color: Colors.green) + }, + { + 'title': '微信4', + 'icon': Icon(Icons.ac_unit), + 'avtiveIcon': Icon(Icons.cached, color: Colors.green) + }, + ], + onTabClick: onTabClick), + ], + )); + } + + void onTabClick(node, i) { + setState(() { + _index = i; + }); + print('$node $i'); + // print('$node $index'); } } diff --git a/lib/tab_item.dart b/lib/tab_item.dart index e77a2ea..b9b97e9 100644 --- a/lib/tab_item.dart +++ b/lib/tab_item.dart @@ -4,7 +4,18 @@ class TabItem extends StatefulWidget { final String title; final Icon icon; final double width; - TabItem({this.title, this.icon, this.width}); + final Function onTabClick; + final int index; + final Icon activeIcon; + final bool isActive; + TabItem( + {this.title, + this.icon, + this.width, + this.onTabClick, + this.index, + this.activeIcon, + this.isActive}); @override State createState() => _TabItem(); } @@ -13,10 +24,9 @@ class _TabItem extends State { @override Widget build(BuildContext context) { return Expanded( - child: Stack( - fit: StackFit.expand, - children: [ - Column( + child: GestureDetector( + onTap: _onTab, + child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.min, @@ -26,7 +36,11 @@ class _TabItem extends State { ? Container( child: Padding( padding: const EdgeInsets.only(top: 5), - child: IconButton(icon: widget.icon, color: Color(0xFF8c77ec), onPressed: null), + child: IconButton( + icon: widget.isActive + ? widget.activeIcon + : widget.icon, + onPressed: null), ), ) : Container( @@ -42,7 +56,12 @@ class _TabItem extends State { child: widget.title != null ? Text( widget.title, - style: TextStyle(fontWeight: FontWeight.w600, fontSize: 10), + style: TextStyle( + color: widget.isActive + ? Colors.green + : Colors.grey, + fontWeight: FontWeight.w600, + fontSize: 10), ) : Container(), ), @@ -50,9 +69,12 @@ class _TabItem extends State { ), ) ], - ) - ], - ), + )), ); } + + void _onTab() { + widget + .onTabClick({'icon': widget.icon, 'title': widget.title}, widget.index); + } } diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index 27df318..b812457 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -1,69 +1,111 @@ import 'package:flutter/material.dart'; import 'package:tap_water_tab_bar/tab_item.dart'; -const String bigImg = 'images/post_normal.png'; - class WaterTabBar extends StatefulWidget { final bool isButton; List> btmNavbar = []; - WaterTabBar({this.btmNavbar, this.isButton = false}); + final Function onTabClick; + int len = 0; + WaterTabBar({Key key, this.btmNavbar, this.isButton = false, this.onTabClick}) + : super(key: key) { + this.btmNavbar.asMap().map((i, v) => MapEntry(i, v['index'] = i)); + this.len = this.btmNavbar.length; + 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 State createState() => _WaterTabBarState(); } class _WaterTabBarState extends State { + int _activeIndex = 0; + String _bigImg = 'images/post_normal.png'; + @override Widget build(BuildContext context) { return Stack( - overflow: Overflow.visible, - alignment: Alignment.bottomCenter, children: [ - Container( - height: 60, - decoration: BoxDecoration( - color: Colors.white, - boxShadow: [ - BoxShadow( - color: Colors.black12, offset: Offset(0, -1), blurRadius: 8) - ], - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.center, - 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(''), - ) -// IgnorePointer( -// child: Container( -// decoration: const BoxDecoration(color: Colors.transparent), -// child: Align( -// heightFactor: 1, -// child: OverflowBox( -// child: , -// ), -// ), -// ), -// ) + Align( + alignment: Alignment.bottomCenter, + child: Stack( + overflow: Overflow.visible, + alignment: Alignment.bottomCenter, + children: [ + Container( + height: 60, + decoration: BoxDecoration( + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.black12, + offset: Offset(0, -1), + blurRadius: 8) + ], + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.center, + children: widget.btmNavbar + .asMap() + .map((i, v) => MapEntry( + i, + v != null + ? TabItem( + title: v['title'], + icon: v['icon'], + activeIcon: v['avtiveIcon'], + isActive: v['index'] == _activeIndex, + index: v['index'], + onTabClick: _onTabClick) + : (widget.isButton ? TabItem() : Text('')))) + .values + .toList(), + ), + ), + Positioned( + child: widget.isButton + ? Container( + margin: const EdgeInsets.only(bottom: 10), + width: 60, + child: GestureDetector( + onTap: () { + _onTabClick(null, widget.len); + }, + child: Image.asset(_bigImg)), + ) + : Text(''), + ), + // IgnorePointer( + // child: Container( + // decoration: const BoxDecoration(color: Colors.transparent), + // child: Align( + // heightFactor: 1, + // child: OverflowBox( + // // child: , + // ), + // ), + // ), + // ) + ], + )), ], ); } + + void _onTabClick(node, i) { + print(i); + setState(() { + _activeIndex = i; + _bigImg = + node == null ? 'images/post_highlight.png' : 'images/post_normal.png'; + }); + widget.onTabClick(node, i); + } } diff --git a/lib/widget/navigation_bar.dart b/lib/widget/navigation_bar.dart new file mode 100644 index 0000000..4c28d57 --- /dev/null +++ b/lib/widget/navigation_bar.dart @@ -0,0 +1,85 @@ +import 'package:flutter/material.dart'; + +class NavigationBar extends StatelessWidget implements PreferredSizeWidget { + @override + Widget build(BuildContext context) { + return AppBar( + elevation: 0.0, + title: Text('微信'), + actions: [ + IconButton( + icon: Icon(Icons.search), + onPressed: () { + print('xxx'); + }, + ), + Container(width: 5.0), + PopupMenuButton( + icon: Icon(Icons.add), + itemBuilder: (BuildContext context) { + return >[ + PopupMenuItem( + child: _buildPopupMenuItem( + Icon( + Icons.search, + color: Colors.white, + ), + "发起群聊"), + value: "group_chat", + ), + PopupMenuItem( + child: _buildPopupMenuItem( + Icon( + Icons.add_circle, + color: Colors.white, + ), + "添加朋友"), + value: "add_friend", + ), + PopupMenuItem( + child: _buildPopupMenuItem( + Icon( + Icons.scanner, + color: Colors.white, + ), + "扫一扫"), + value: "scan", + ), + PopupMenuItem( + child: _buildPopupMenuItem( + Icon( + Icons.payment, + color: Colors.white, + ), + "收付款"), + value: "pay", + ), + ]; + }, + onSelected: (String selected) { + print('点击了$selected'); + }, + ), + Container(width: 5.0) + ], + ); + } + + _buildPopupMenuItem(Widget icon, String title) { + return Row( + children: [ + icon, + Container( + width: 20, + ), + Text( + title, + style: TextStyle( + color: Colors.white, + ), + ) + ], + ); + } + Size get preferredSize => new Size.fromHeight(kToolbarHeight); +} From ab26899095078769fda8e6dda139e393594c8bda Mon Sep 17 00:00:00 2001 From: wjun94 Date: Wed, 24 Jul 2019 23:36:34 +0800 Subject: [PATCH 03/12] =?UTF-8?q?btmNavbar=20map=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BAitem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/main.dart | 45 ++++++++++++++++++-------------------- lib/tab_item.dart | 10 +++++++++ lib/tap_water_tab_bar.dart | 16 +++++++------- 3 files changed, 39 insertions(+), 32 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index ded12c4..7f2d652 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'widget/navigation_bar.dart'; // import 'TapWaterTabbar.dart'; import 'tap_water_tab_bar.dart'; +import './tab_item.dart'; void main() => runApp(MyApp()); @@ -60,30 +61,26 @@ class _MyAppPageState extends State<_MyAppPage> { WaterTabBar( isButton: true, btmNavbar: [ - { - 'title': '微信1', - 'icon': Icons.ac_unit, - 'avtiveIcon': Icons.backspace, - 'selectedColor': Colors.green - }, - { - 'title': '微信2', - 'icon': Icons.ac_unit, - 'avtiveIcon': Icons.cached, - 'selectedColor': Colors.green - }, - { - 'title': '微信3', - 'icon': Icons.ac_unit, - 'avtiveIcon': Icons.edit, - 'selectedColor': Colors.green - }, - { - 'title': '微信4', - 'icon': Icons.ac_unit, - 'avtiveIcon': Icons.cached, - 'selectedColor': Colors.green - }, + 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), ], diff --git a/lib/tab_item.dart b/lib/tab_item.dart index d0b3722..52c0c7c 100644 --- a/lib/tab_item.dart +++ b/lib/tab_item.dart @@ -1,5 +1,15 @@ import 'package:flutter/material.dart'; +class TabItemInfo { + final String title; + final IconData icon; + final IconData activeIcon; + final Color normalColor; + int index; + final Color selectedColor; + TabItemInfo({this.title, this.index, this.icon, this.activeIcon, this.normalColor, this.selectedColor}); +} + class TabItem extends StatefulWidget { final String title; final IconData icon; diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index deddc33..feb1718 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -3,13 +3,13 @@ import 'package:tap_water_tab_bar/tab_item.dart'; class WaterTabBar extends StatefulWidget { final bool isButton; - List> btmNavbar = []; + List btmNavbar = []; final Function onTabClick; int len = 0; WaterTabBar({Key key, this.btmNavbar, this.isButton = false, this.onTabClick}) : super(key: key) { // 解决点击页面问题 - this.btmNavbar.asMap().map((i, v) => MapEntry(i, v['index'] = i)); + this.btmNavbar.asMap().map((i, v) => MapEntry(i, v.index = i)); this.len = this.btmNavbar.length; /// 解决基数问题 @@ -61,12 +61,12 @@ class _WaterTabBarState extends State { i, v != null ? TabItem( - title: v['title'], - icon: v['icon'], - activeIcon: v['avtiveIcon'], - isSelected: v['index'] == _activeIndex, - index: v['index'], - selectedColor: v['selectedColor'], + title: v.title, + icon: v.icon, + activeIcon: v.activeIcon, + isSelected: v.index == _activeIndex, + index: v.index, + selectedColor: v.selectedColor, onTabClick: _onTabClick) : (widget.isButton ? TabItem() : Text('')))) .values From 945ffc8abda3ffc767ad747b2a2425065c3cd4d1 Mon Sep 17 00:00:00 2001 From: wjun94 Date: Thu, 25 Jul 2019 01:02:07 +0800 Subject: [PATCH 04/12] =?UTF-8?q?=E6=B7=BB=E5=8A=A0Function=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=EF=BC=8C=E5=AE=8C=E5=96=84=E4=BB=A3=E7=A0=81=E8=A7=84?= =?UTF-8?q?=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/main.dart | 2 +- lib/tab_item.dart | 74 ++++++++++++++++++++++++++------------ lib/tap_water_tab_bar.dart | 14 +++----- 3 files changed, 57 insertions(+), 33 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 7f2d652..fbc2057 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -87,7 +87,7 @@ class _MyAppPageState extends State<_MyAppPage> { )); } - void onTabClick(node, i) { + void onTabClick(TabItemInfo node, int i) { setState(() { _index = i; }); diff --git a/lib/tab_item.dart b/lib/tab_item.dart index 52c0c7c..930612a 100644 --- a/lib/tab_item.dart +++ b/lib/tab_item.dart @@ -7,29 +7,60 @@ class TabItemInfo { final Color normalColor; int index; final Color selectedColor; - TabItemInfo({this.title, this.index, this.icon, this.activeIcon, this.normalColor, this.selectedColor}); -} - -class TabItem extends StatefulWidget { - final String title; - final IconData icon; - final double width; - final Function onTabClick; - final int index; - final IconData activeIcon; - final bool isSelected; - final Color selectedColor; - final Color normalColor; - TabItem( + TabItemInfo( {this.title, - this.icon, - this.width, - this.onTabClick, this.index, + this.icon, this.activeIcon, - this.isSelected, this.normalColor = Colors.grey, this.selectedColor = Colors.blue}); +} + +class TabItem extends StatefulWidget { + final TabItemInfo itemInfo; + String get title { + if (itemInfo != null) { + return itemInfo.title; + } + } + + 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 createState() => _TabItem(); } @@ -59,9 +90,7 @@ class _TabItem extends State { ), ), ) - : Container( - width: widget.width, - ), + : Container(), ), Flexible( child: Container( @@ -90,7 +119,6 @@ class _TabItem extends State { } void _onTab() { - widget - .onTabClick({'icon': widget.icon, 'title': widget.title}, widget.index); + widget.onTabClick(widget.itemInfo, widget.index); } } diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index feb1718..7511c6d 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -9,10 +9,10 @@ class WaterTabBar extends StatefulWidget { WaterTabBar({Key key, this.btmNavbar, this.isButton = false, this.onTabClick}) : super(key: key) { // 解决点击页面问题 - this.btmNavbar.asMap().map((i, v) => MapEntry(i, v.index = i)); + this.btmNavbar.asMap().map((int i, TabItemInfo v) => MapEntry(i, v.index = i)); this.len = this.btmNavbar.length; - /// 解决基数问题 + /// 解决tab为基数问题 if (this.isButton) { if (len % 2 == 0) { this.btmNavbar.insert(len ~/ 2, null); @@ -57,16 +57,12 @@ class _WaterTabBarState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: widget.btmNavbar .asMap() - .map((i, v) => MapEntry( + .map((int i, TabItemInfo v) => MapEntry( i, v != null ? TabItem( - title: v.title, - icon: v.icon, - activeIcon: v.activeIcon, + itemInfo: v, isSelected: v.index == _activeIndex, - index: v.index, - selectedColor: v.selectedColor, onTabClick: _onTabClick) : (widget.isButton ? TabItem() : Text('')))) .values @@ -92,7 +88,7 @@ class _WaterTabBarState extends State { ); } - void _onTabClick(node, i) { + void _onTabClick(TabItemInfo node, int i) { print(i); setState(() { _activeIndex = i; From 23a04f7a585f11e64263c4c10ac6e3d06abdc92d Mon Sep 17 00:00:00 2001 From: wjun94 Date: Thu, 25 Jul 2019 10:23:43 +0800 Subject: [PATCH 05/12] =?UTF-8?q?button=E5=B1=85=E4=B8=AD=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=95=E5=87=BB=E8=BF=94=E5=9B=9E=E6=95=B0?= =?UTF-8?q?=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/main.dart | 7 +++---- lib/tab_item.dart | 2 +- lib/tap_water_tab_bar.dart | 19 +++++++++++-------- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index fbc2057..b149f5e 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -87,11 +87,10 @@ class _MyAppPageState extends State<_MyAppPage> { )); } - void onTabClick(TabItemInfo node, int i) { + void onTabClick(TabItemInfo node) { setState(() { - _index = i; + _index = node.index; }); - print('$node $i'); - // print('$node $index'); + print('$node'); } } diff --git a/lib/tab_item.dart b/lib/tab_item.dart index 930612a..9c3e462 100644 --- a/lib/tab_item.dart +++ b/lib/tab_item.dart @@ -119,6 +119,6 @@ class _TabItem extends State { } void _onTab() { - widget.onTabClick(widget.itemInfo, widget.index); + widget.onTabClick(widget.itemInfo); } } diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index 7511c6d..3f52fd3 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -9,7 +9,10 @@ class WaterTabBar extends StatefulWidget { WaterTabBar({Key key, this.btmNavbar, this.isButton = false, this.onTabClick}) : super(key: key) { // 解决点击页面问题 - this.btmNavbar.asMap().map((int i, TabItemInfo v) => MapEntry(i, v.index = i)); + this + .btmNavbar + .asMap() + .map((int i, TabItemInfo v) => MapEntry(i, v.index = i)); this.len = this.btmNavbar.length; /// 解决tab为基数问题 @@ -72,11 +75,12 @@ class _WaterTabBarState extends State { Positioned( child: widget.isButton ? Container( - margin: const EdgeInsets.only(bottom: 10), + margin: const EdgeInsets.only(bottom: 30), width: 60, child: GestureDetector( onTap: () { - _onTabClick(null, widget.len); + _onTabClick(TabItemInfo( + title: 'onButton', index: widget.len)); }, child: Image.asset(_bigImg)), ) @@ -88,13 +92,12 @@ class _WaterTabBarState extends State { ); } - void _onTabClick(TabItemInfo node, int i) { - print(i); + void _onTabClick(TabItemInfo node) { setState(() { - _activeIndex = i; + _activeIndex = node.index; _bigImg = - node == null ? 'images/post_highlight.png' : 'images/post_normal.png'; + node.title == 'onButton' ? 'images/post_highlight.png' : 'images/post_normal.png'; }); - widget.onTabClick(node, i); + widget.onTabClick(node); } } From fdd61569b94931043f724242387ad02434e287dd Mon Sep 17 00:00:00 2001 From: Elon Chan Date: Thu, 25 Jul 2019 10:33:41 +0800 Subject: [PATCH 06/12] [update][dev]update pr template --- .github/pull_request_template.md | 8 ++++++++ README.md | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 01f5218..c62a2d4 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -10,6 +10,14 @@ Thanks for considering to this repository. Before you submit your issue, please - [ ] I have read [《[EN]Style guide for Flutter repo [CN]Flutter项目代码规范、规约选型》](https://github.com/iteatimeteam/tap_water/issues/1). - [ ] 我遵守以下 Merge 规则：PR提交后，邀请群组中任意一人进行 review，即可合并。让 reviewer 在 PR 所在页面写下 review 意见表示通过，即可合并。最简单写一句 LGTM 也可以。不按照本规则执行，自己 PR 自己 Merge 并引入问题，会被收回 Merge 权限。 +- [ ] I have added screenshots for main devices. + +## screenshots + + + iPhoneX+ | iPhone (except for iPhoneX+) | android + :-------------:|:-------------:|:-------------: +![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) | ![](http://ww1.sinaimg.cn/large/006tNc79gy1g5bvpae0u8j30ku112dj9.jpg) | ![](http://ww3.sinaimg.cn/large/006tNc79gy1g5bv6com75j30ks11sjsh.jpg) diff --git a/README.md b/README.md index 982e065..faf41a3 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,6 @@ updated 演示 | 主要代码贡献方及介绍 :-------------:|:-------------: -| ![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) |

[**@DargonLee**]( https://github.com/DargonLee )

[《TabBar基础版本，不带加号按钮 issue#11》]( https://github.com/iteatimeteam/tap_water/issues/11 ) +![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) |

[**@DargonLee**]( https://github.com/DargonLee )

[《TabBar基础版本，不带加号按钮 issue#11》]( https://github.com/iteatimeteam/tap_water/issues/11 ) ![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) |

[@苏筱雅]( https://github.com/SuXiaoya )

[《TabBar 加号按钮未封装版本，带加号按钮 #8》]( https://github.com/iteatimeteam/tap_water/issues/8 ) From 5a302216f60d30d03fbecb4b8c7297dbd9ebfbb2 Mon Sep 17 00:00:00 2001 From: Elon Chan Date: Thu, 25 Jul 2019 10:33:41 +0800 Subject: [PATCH 07/12] [update][dev]update pr template --- .github/pull_request_template.md | 8 ++++++++ README.md | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 01f5218..c62a2d4 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -10,6 +10,14 @@ Thanks for considering to this repository. Before you submit your issue, please - [ ] I have read [《[EN]Style guide for Flutter repo [CN]Flutter项目代码规范、规约选型》](https://github.com/iteatimeteam/tap_water/issues/1). - [ ] 我遵守以下 Merge 规则：PR提交后，邀请群组中任意一人进行 review，即可合并。让 reviewer 在 PR 所在页面写下 review 意见表示通过，即可合并。最简单写一句 LGTM 也可以。不按照本规则执行，自己 PR 自己 Merge 并引入问题，会被收回 Merge 权限。 +- [ ] I have added screenshots for main devices. + +## screenshots + + + iPhoneX+ | iPhone (except for iPhoneX+) | android + :-------------:|:-------------:|:-------------: +![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) | ![](http://ww1.sinaimg.cn/large/006tNc79gy1g5bvpae0u8j30ku112dj9.jpg) | ![](http://ww3.sinaimg.cn/large/006tNc79gy1g5bv6com75j30ks11sjsh.jpg) diff --git a/README.md b/README.md index 982e065..faf41a3 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,6 @@ updated 演示 | 主要代码贡献方及介绍 :-------------:|:-------------: -| ![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) |

[**@DargonLee**]( https://github.com/DargonLee )

[《TabBar基础版本，不带加号按钮 issue#11》]( https://github.com/iteatimeteam/tap_water/issues/11 ) +![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) |

[**@DargonLee**]( https://github.com/DargonLee )

[《TabBar基础版本，不带加号按钮 issue#11》]( https://github.com/iteatimeteam/tap_water/issues/11 ) ![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) |

[@苏筱雅]( https://github.com/SuXiaoya )

[《TabBar 加号按钮未封装版本，带加号按钮 #8》]( https://github.com/iteatimeteam/tap_water/issues/8 ) From d3642cea359e70c82df101691d14cac255823ad8 Mon Sep 17 00:00:00 2001 From: Elon Chan Date: Thu, 25 Jul 2019 11:30:36 +0800 Subject: [PATCH 08/12] [update][dev]update pr template. --- .github/pull_request_template.md | 6 ++---- ios/Runner.xcodeproj/project.pbxproj | 4 ++++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c62a2d4..7d62d3d 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -5,16 +5,14 @@ ## CheckList - Thanks for considering to this repository. Before you submit your issue, please confirm these boxes are checked. - [ ] I have read [《[EN]Style guide for Flutter repo [CN]Flutter项目代码规范、规约选型》](https://github.com/iteatimeteam/tap_water/issues/1). -- [ ] 我遵守以下 Merge 规则：PR提交后，邀请群组中任意一人进行 review，即可合并。让 reviewer 在 PR 所在页面写下 review 意见表示通过，即可合并。最简单写一句 LGTM 也可以。不按照本规则执行，自己 PR 自己 Merge 并引入问题，会被收回 Merge 权限。 -- [ ] I have added screenshots for main devices. +- [ ] [EN]I have added screenshots for main devices if this PR includes UI updates. [CN]UI改动，需要将主要设备截图，表明本此 PR 的 UI 改动。 +- [ ] [CN]我遵守以下 Merge 规则：PR 提交后，邀请群组中任意一人进行 review，即可合并。让 reviewer 在 PR 所在页面写下 review 意见表示通过，即可合并。最简单写一句 LGTM 也可以。不按照本规则执行，自己 PR 自己 Merge 并引入问题，会被收回 Merge 权限。如无 merge 权限，请联系 @ChenYilong 执行 merge 操作。 ## screenshots - iPhoneX+ | iPhone (except for iPhoneX+) | android :-------------:|:-------------:|:-------------: ![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) | ![](http://ww1.sinaimg.cn/large/006tNc79gy1g5bvpae0u8j30ku112dj9.jpg) | ![](http://ww3.sinaimg.cn/large/006tNc79gy1g5bv6com75j30ks11sjsh.jpg) diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj index fedb2ce..9a0c872 100644 --- a/ios/Runner.xcodeproj/project.pbxproj +++ b/ios/Runner.xcodeproj/project.pbxproj @@ -9,6 +9,7 @@ /* Begin PBXBuildFile section */ 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; + 2D5378261FAA1A9400D5DBA9 /* flutter_assets in Resources */ = {isa = PBXBuildFile; fileRef = 2D5378251FAA1A9400D5DBA9 /* flutter_assets */; }; 3B80C3941E831B6300D905FE /* App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; }; 3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; }; 9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; }; @@ -40,6 +41,7 @@ 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; + 2D5378251FAA1A9400D5DBA9 /* flutter_assets */ = {isa = PBXFileReference; lastKnownFileType = folder; name = flutter_assets; path = Flutter/flutter_assets; sourceTree = SOURCE_ROOT; }; 3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = ""; }; 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 7AFFD8ED1D35381100E5BB4D /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = ""; }; @@ -73,6 +75,7 @@ children = ( 3B80C3931E831B6300D905FE /* App.framework */, 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, + 2D5378251FAA1A9400D5DBA9 /* flutter_assets */, 9740EEBA1CF902C7004384FC /* Flutter.framework */, 9740EEB21CF90195004384FC /* Debug.xcconfig */, 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, @@ -185,6 +188,7 @@ files = ( 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, + 2D5378261FAA1A9400D5DBA9 /* flutter_assets in Resources */, 9740EEB41CF90195004384FC /* Debug.xcconfig in Resources */, 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, From 8bcbfda152c68b629e3d77029d03287b73a1d67e Mon Sep 17 00:00:00 2001 From: Elon Chan Date: Thu, 25 Jul 2019 11:53:20 +0800 Subject: [PATCH 09/12] [update][dev]update pr template --- .github/pull_request_template.md | 2 +- README.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 7d62d3d..feb6b3c 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -15,7 +15,7 @@ Thanks for considering to this repository. Before you submit your issue, please iPhoneX+ | iPhone (except for iPhoneX+) | android :-------------:|:-------------:|:-------------: -![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) | ![](http://ww1.sinaimg.cn/large/006tNc79gy1g5bvpae0u8j30ku112dj9.jpg) | ![](http://ww3.sinaimg.cn/large/006tNc79gy1g5bv6com75j30ks11sjsh.jpg) +![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) | ![](http://ww1.sinaimg.cn/large/006tNc79gy1g5bvpae0u8j30ku112dj9.jpg) | ![](http://ww3.sinaimg.cn/large/006tNc79gy1g5bv6com75j30ks11sjsh.jpg) diff --git a/README.md b/README.md index faf41a3..5803bdf 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,6 @@ updated 演示 | 主要代码贡献方及介绍 :-------------:|:-------------: -![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) |

[**@DargonLee**]( https://github.com/DargonLee )

[《TabBar基础版本，不带加号按钮 issue#11》]( https://github.com/iteatimeteam/tap_water/issues/11 ) -![](http://ww4.sinaimg.cn/large/006tNc79gy1g59kad16rdg30b20kzn29.gif) |

[@苏筱雅]( https://github.com/SuXiaoya )

[《TabBar 加号按钮未封装版本，带加号按钮 #8》]( https://github.com/iteatimeteam/tap_water/issues/8 ) +![](http://ww2.sinaimg.cn/large/006tNc79gy1g544k1fcdjg30b20kzn2q.gif) |

[**@DargonLee**]( https://github.com/DargonLee )

[《TabBar基础版本，不带加号按钮 issue#11》]( https://github.com/iteatimeteam/tap_water/issues/11) +![](http://ww2.sinaimg.cn/large/006tNc79gy1g5by04hgd9g30b20kz786.gif) |

[@苏筱雅]( https://github.com/SuXiaoya )

[《TabBar 加号按钮未封装版本，带加号按钮 #8》]( https://github.com/iteatimeteam/tap_water/issues/8 ) From fa4e8f9d54bb1bdaee5559f992f9b46816e4373c Mon Sep 17 00:00:00 2001 From: wjun94 Date: Thu, 1 Aug 2019 13:34:40 +0800 Subject: [PATCH 10/12] =?UTF-8?q?[!]=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E6=96=87=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0iphonex?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ios/Runner.xcodeproj/project.pbxproj | 4 - lib/TapWaterTabbar.dart | 213 --------------------------- lib/main.dart | 73 ++++----- lib/tab_item.dart | 124 ---------------- lib/tap_water_tab_bar.dart | 163 ++++++++++---------- 5 files changed, 125 insertions(+), 452 deletions(-) delete mode 100644 lib/TapWaterTabbar.dart delete mode 100644 lib/tab_item.dart diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj index 9a0c872..fedb2ce 100644 --- a/ios/Runner.xcodeproj/project.pbxproj +++ b/ios/Runner.xcodeproj/project.pbxproj @@ -9,7 +9,6 @@ /* Begin PBXBuildFile section */ 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; - 2D5378261FAA1A9400D5DBA9 /* flutter_assets in Resources */ = {isa = PBXBuildFile; fileRef = 2D5378251FAA1A9400D5DBA9 /* flutter_assets */; }; 3B80C3941E831B6300D905FE /* App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; }; 3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; }; 9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; }; @@ -41,7 +40,6 @@ 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; - 2D5378251FAA1A9400D5DBA9 /* flutter_assets */ = {isa = PBXFileReference; lastKnownFileType = folder; name = flutter_assets; path = Flutter/flutter_assets; sourceTree = SOURCE_ROOT; }; 3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = ""; }; 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 7AFFD8ED1D35381100E5BB4D /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = ""; }; @@ -75,7 +73,6 @@ children = ( 3B80C3931E831B6300D905FE /* App.framework */, 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, - 2D5378251FAA1A9400D5DBA9 /* flutter_assets */, 9740EEBA1CF902C7004384FC /* Flutter.framework */, 9740EEB21CF90195004384FC /* Debug.xcconfig */, 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, @@ -188,7 +185,6 @@ files = ( 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, - 2D5378261FAA1A9400D5DBA9 /* flutter_assets in Resources */, 9740EEB41CF90195004384FC /* Debug.xcconfig in Resources */, 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, diff --git a/lib/TapWaterTabbar.dart b/lib/TapWaterTabbar.dart deleted file mode 100644 index 2d6f70c..0000000 --- a/lib/TapWaterTabbar.dart +++ /dev/null @@ -1,213 +0,0 @@ -/** 该页面以废弃 */ - -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'; - -import 'firstvc.dart'; - -//enum ActionsItems { -// Group_chat, -// Add_friend, -// Scan, -// Payment, -//} - -class NavigationIconView { - final BottomNavigationBarItem item; - NavigationIconView({ - Key key, - String title, - Widget icon, - Widget avtiveIcon, - }) : item = new BottomNavigationBarItem( - icon: icon, - activeIcon: avtiveIcon, - title: new Text(title), - backgroundColor: Colors.white, - ); -} - -class TapWaterTabbar extends StatefulWidget { - final bool isButton; - final List tabItems; - TapWaterTabbar({this.tabItems, 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(); -} - -class _TapWaterTabbarState extends State { - PageController _pageController; - int _currentIndex = 0; - List _navgationViews; - List _pages; - //添加图片地址,需要动态更换图片 - String bigImg = 'images/post_normal.png'; - int page = 0; - @override - void initState() { - super.initState(); - - _pageController = PageController(initialPage: _currentIndex); - _pages = [ - DemoWidget("first"), - DemoWidget("two"), - DemoWidget("five"), - DemoWidget("three"), - DemoWidget("four"), - ]; - } - - _buildPopupMenuItem(Widget icon, String title) { - return Row( - children: [ - icon, - Container( - width: 20, - ), - Text( - title, - style: TextStyle( - color: Colors.white, - ), - ) - ], - ); - } - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - elevation: 0.0, - title: Text('微信'), - actions: [ - IconButton( - icon: Icon(Icons.search), - onPressed: () { - print('xxx'); - }, - ), - Container(width: 5.0), - PopupMenuButton( - icon: Icon(Icons.add), - itemBuilder: (BuildContext context) { - return >[ - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.search, - color: Colors.white, - ), - "发起群聊"), - value: "group_chat", - ), - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.add_circle, - color: Colors.white, - ), - "添加朋友"), - value: "add_friend", - ), - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.scanner, - color: Colors.white, - ), - "扫一扫"), - value: "scan", - ), - PopupMenuItem( - child: _buildPopupMenuItem( - Icon( - Icons.payment, - color: Colors.white, - ), - "收付款"), - value: "pay", - ), - ]; - }, - onSelected: (String selected) { - print('点击了$selected'); - }, - ), - Container(width: 5.0) - ], - ), - body: Stack( - children: [ - Padding( - padding: const EdgeInsets.only(bottom: 50), - child: PageView.builder( - itemBuilder: (BuildContext context, int index) { - return _pages[index]; - }, - controller: _pageController, - itemCount: _pages.length, - onPageChanged: (int index) { - setState(() { - _currentIndex = index; - }); - }, - ), - ), - Align( - alignment: Alignment.bottomCenter, - child: WaterTabBar( - isButton: widget.isButton, - tabItemInfos: widget.tabItems, - selectedCallback: (int index) { - print(index); - }, - ), - ), - ], - ), - ); - } - - void onTap(int index) { - if (index != 2) { - setState(() { - this.bigImg = 'images/post_normal.png'; - }); - } else { - setState(() { - this.bigImg = 'images/post_highlight.png'; - }); - } - - _pageController.jumpToPage(index); - } - - //添加图片的点击事件 - void onBigImgTap() { - setState(() { - this.page = 2; - this.bigImg = 'images/post_highlight.png'; - onTap(2); - }); - } - - void onPageChanged(int page) { - setState(() { - this.page = page; - }); - } -} diff --git a/lib/main.dart b/lib/main.dart index b149f5e..a7528aa 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'widget/navigation_bar.dart'; // import 'TapWaterTabbar.dart'; import 'tap_water_tab_bar.dart'; -import './tab_item.dart'; void main() => runApp(MyApp()); @@ -50,47 +49,51 @@ class _MyAppPageState extends State<_MyAppPage> { alignment: Alignment.center, child: Text('页面5'), ), + Align( + alignment: Alignment.center, + child: Text('页面6'), + ), ]; @override Widget build(BuildContext context) { - return Scaffold( + return WaterTabBar( + isButton: true, appBar: NavigationBar(), - body: Stack( - children: [ - _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), - ], - )); + body: _pages[_index], + btmNavbar: [ + NavigationIconView( + title: '微信1', + icon: Icon(Icons.ac_unit), + activeIcon: Icon(Icons.backspace), + ), + NavigationIconView( + title: '微信2', + icon: Icon(Icons.ac_unit), + activeIcon: Icon(Icons.cached), + ), + NavigationIconView( + title: '微信3', + icon: Icon(Icons.ac_unit), + activeIcon: Icon(Icons.edit), + ), + NavigationIconView( + title: '微信4', + icon: Icon(Icons.ac_unit), + activeIcon: Icon(Icons.cached), + ), + // NavigationIconView( + // title: '微信6', + // icon: Icon(Icons.ac_unit), + // activeIcon: Icon(Icons.cached), + // ), + ], + onTabClick: onTabClick); } - void onTabClick(TabItemInfo node) { + void onTabClick(int index) { setState(() { - _index = node.index; + _index = index; }); - print('$node'); + print('$index'); } } diff --git a/lib/tab_item.dart b/lib/tab_item.dart deleted file mode 100644 index 9c3e462..0000000 --- a/lib/tab_item.dart +++ /dev/null @@ -1,124 +0,0 @@ -import 'package:flutter/material.dart'; - -class TabItemInfo { - final String title; - final IconData icon; - final IconData activeIcon; - final Color normalColor; - int index; - final Color 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; - } - } - - 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 createState() => _TabItem(); -} - -class _TabItem extends State { - @override - Widget build(BuildContext context) { - // final _themeColor = widget.isSelected ? widget.selectedColor : widget.normalColor; - return Expanded( - child: GestureDetector( - onTap: _onTab, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - mainAxisSize: MainAxisSize.min, - children: [ - 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); - } -} diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index 3f52fd3..193297d 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -1,27 +1,54 @@ import 'package:flutter/material.dart'; -import 'package:tap_water_tab_bar/tab_item.dart'; + +class NavigationIconView { + final BottomNavigationBarItem item; + NavigationIconView({ + Key key, + final String title = '', + final Widget icon, + final Widget activeIcon, + }) : item = BottomNavigationBarItem( + icon: icon, + activeIcon: activeIcon, + title: Text( + title, + ), + backgroundColor: Colors.white, + ); +} class WaterTabBar extends StatefulWidget { final bool isButton; - List btmNavbar = []; + final Widget appBar; + final Widget body; + List btmNavbar = []; final Function onTabClick; - int len = 0; - WaterTabBar({Key key, this.btmNavbar, this.isButton = false, this.onTabClick}) + int btnIndex; + int len; + WaterTabBar( + {Key key, + this.body, + this.appBar, + this.btmNavbar, + this.isButton = false, + this.onTabClick}) : super(key: key) { - // 解决点击页面问题 - this - .btmNavbar - .asMap() - .map((int i, TabItemInfo v) => MapEntry(i, v.index = i)); - this.len = this.btmNavbar.length; - - /// 解决tab为基数问题 + // 解决tab为基数问题 if (this.isButton) { - if (len % 2 == 0) { - this.btmNavbar.insert(len ~/ 2, null); + this.len = this.btmNavbar.length; + if (this.len % 2 == 0) { + // btmNavbar偶数 + this.btnIndex = this.len ~/ 2; + this.btmNavbar.insert(this.len ~/ 2, + NavigationIconView(icon: Icon(Icons.ac_unit, size: 0))); } else { - this.btmNavbar.insert(len ~/ 2 + 1, null); - this.btmNavbar.insert(len ~/ 2 + 2, null); + // btmNavbar基数 + this.btnIndex = this.len ~/ 2 + 1; + this.btmNavbar.insert(this.len ~/ 2 + 1, + NavigationIconView(icon: Icon(Icons.ac_unit, size: 0))); + this + .btmNavbar + .add(NavigationIconView(icon: Icon(Icons.ac_unit, size: 0))); } } } @@ -31,73 +58,57 @@ class WaterTabBar extends StatefulWidget { class _WaterTabBarState extends State { int _activeIndex = 0; - String _bigImg = 'images/post_normal.png'; + Color _addBgc = Colors.grey; @override Widget build(BuildContext context) { - return Stack( - children: [ - Align( - alignment: Alignment.bottomCenter, - child: Stack( - overflow: Overflow.visible, - alignment: Alignment.bottomCenter, - children: [ - Container( - height: 60, - decoration: BoxDecoration( - color: Colors.white, - boxShadow: [ - BoxShadow( - color: Colors.black12, - offset: Offset(0, -1), - blurRadius: 8) - ], - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.center, - children: widget.btmNavbar - .asMap() - .map((int i, TabItemInfo v) => MapEntry( - i, - v != null - ? TabItem( - itemInfo: v, - isSelected: v.index == _activeIndex, - onTabClick: _onTabClick) - : (widget.isButton ? TabItem() : Text('')))) - .values - .toList(), - ), - ), - Positioned( - child: widget.isButton - ? Container( - margin: const EdgeInsets.only(bottom: 30), - width: 60, - child: GestureDetector( - onTap: () { - _onTabClick(TabItemInfo( - title: 'onButton', index: widget.len)); - }, - child: Image.asset(_bigImg)), - ) - : Text(''), - ), - ], - )), - ], + var _items = BottomNavigationBar( + // 底部导航栏 + items: widget.btmNavbar + .map((NavigationIconView navigationIconView) => + navigationIconView.item) + .toList(), + currentIndex: _activeIndex, + fixedColor: Colors.blue, + type: BottomNavigationBarType.fixed, + onTap: _onTabClick, + ); + return Scaffold( + appBar: widget.appBar, + body: widget.body, + bottomNavigationBar: _items, + floatingActionButton: widget.isButton + ? FloatingActionButton( + elevation: 6, + highlightElevation: 6, + child: Icon( + Icons.add, + color: Colors.white, + size: 36, + ), + onPressed: () { + _onTabClick(widget.btnIndex); + }, + shape: CircleBorder( + side: BorderSide(color: Colors.white, width: 3.5)), + backgroundColor: _addBgc) + : Text(''), + floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, ); } - void _onTabClick(TabItemInfo node) { + void _onTabClick(int index) { + if (widget.isButton) { + if (index == widget.len + 1) { + index -= 1; + } + setState(() { + _addBgc = index == widget.btnIndex ? Colors.blue : Colors.grey; + }); + } setState(() { - _activeIndex = node.index; - _bigImg = - node.title == 'onButton' ? 'images/post_highlight.png' : 'images/post_normal.png'; + _activeIndex = index; }); - widget.onTabClick(node); + widget.onTabClick(_activeIndex); } } From c8b7dfa4b4756e53abba40d423349fc170211b45 Mon Sep 17 00:00:00 2001 From: wjun94 Date: Thu, 1 Aug 2019 14:38:55 +0800 Subject: [PATCH 11/12] =?UTF-8?q?[!]=20=E6=B7=BB=E5=8A=A0=E5=BA=95?= =?UTF-8?q?=E9=83=A8=E9=80=89=E4=B8=AD=E9=A2=9C=E8=89=B2=E5=92=8Cbuttom?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/main.dart | 1 + lib/tap_water_tab_bar.dart | 21 ++++++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index a7528aa..8e82442 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -58,6 +58,7 @@ class _MyAppPageState extends State<_MyAppPage> { Widget build(BuildContext context) { return WaterTabBar( isButton: true, + selectedColor: Colors.green, appBar: NavigationBar(), body: _pages[_index], btmNavbar: [ diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index 193297d..6e13f65 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -19,10 +19,20 @@ class NavigationIconView { class WaterTabBar extends StatefulWidget { final bool isButton; + + /// 是否有加号按钮 final Widget appBar; + + /// appBar Widget final Widget body; + + /// body Widget List btmNavbar = []; final Function onTabClick; + + /// 组件通信 + final Color selectedColor; + final Color buttonSelectedColor; int btnIndex; int len; WaterTabBar( @@ -30,6 +40,8 @@ class WaterTabBar extends StatefulWidget { this.body, this.appBar, this.btmNavbar, + this.selectedColor = Colors.blue, + this.buttonSelectedColor = Colors.blue, this.isButton = false, this.onTabClick}) : super(key: key) { @@ -69,7 +81,7 @@ class _WaterTabBarState extends State { navigationIconView.item) .toList(), currentIndex: _activeIndex, - fixedColor: Colors.blue, + fixedColor: widget.selectedColor, type: BottomNavigationBarType.fixed, onTap: _onTabClick, ); @@ -103,12 +115,15 @@ class _WaterTabBarState extends State { index -= 1; } setState(() { - _addBgc = index == widget.btnIndex ? Colors.blue : Colors.grey; + _addBgc = + index == widget.btnIndex ? widget.buttonSelectedColor : Colors.grey; }); } setState(() { _activeIndex = index; }); - widget.onTabClick(_activeIndex); + if (widget.onTabClick != null) { + widget.onTabClick(_activeIndex); + } } } From 1f825e2824db17d4484bde2bccfda178d2344a51 Mon Sep 17 00:00:00 2001 From: wjun94 Date: Thu, 1 Aug 2019 14:45:56 +0800 Subject: [PATCH 12/12] =?UTF-8?q?[!]=20=E6=B7=BB=E5=8A=A0=E6=B3=A8?= =?UTF-8?q?=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/tap_water_tab_bar.dart | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/lib/tap_water_tab_bar.dart b/lib/tap_water_tab_bar.dart index 6e13f65..80c3f20 100644 --- a/lib/tap_water_tab_bar.dart +++ b/lib/tap_water_tab_bar.dart @@ -18,22 +18,31 @@ class NavigationIconView { } class WaterTabBar extends StatefulWidget { + /// 是否有加号按钮 final bool isButton; - /// 是否有加号按钮 + /// appBar Widget final Widget appBar; - /// appBar Widget + /// 主体内容 final Widget body; - /// body Widget + /// 底部按钮配置 List btmNavbar = []; - final Function onTabClick; /// 组件通信 + final Function onTabClick; + + /// 底部button选中颜色 final Color selectedColor; + + /// +号按钮选中颜色 final Color buttonSelectedColor; + + /// +号按钮索引 int btnIndex; + + /// btmNavbar数组长度 int len; WaterTabBar( {Key key, @@ -69,13 +78,15 @@ class WaterTabBar extends StatefulWidget { } class _WaterTabBarState extends State { + /// 选中的索引 int _activeIndex = 0; + /// +号按钮背景色 Color _addBgc = Colors.grey; @override Widget build(BuildContext context) { var _items = BottomNavigationBar( - // 底部导航栏 + /// 底部导航栏 items: widget.btmNavbar .map((NavigationIconView navigationIconView) => navigationIconView.item) @@ -109,6 +120,7 @@ class _WaterTabBarState extends State { ); } + /// 单击事件 void _onTabClick(int index) { if (widget.isButton) { if (index == widget.len + 1) {