From 82aed16ad403fe9b1b620b4e6f0bf789ea8abc8c Mon Sep 17 00:00:00 2001 From: laiiihz Date: Mon, 7 Dec 2020 14:36:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0NavigationBar=E5=92=8CItem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/lib/main.dart | 86 ++++++++------------------------- example/lib/main_extention.dart | 15 ++++++ example/lib/main_home.dart | 84 ++++++++++++++++++++++++++++++++ lib/ansu_ui.dart | 4 ++ lib/bar/as_navigation_bar.dart | 47 ++++++++++++++++++ lib/bar/as_navigation_item.dart | 19 ++++++++ 6 files changed, 189 insertions(+), 66 deletions(-) create mode 100644 example/lib/main_extention.dart create mode 100644 example/lib/main_home.dart create mode 100644 lib/bar/as_navigation_bar.dart create mode 100644 lib/bar/as_navigation_item.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index d0f3341..71604c2 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,24 +1,12 @@ import 'package:ansu_ui/ansu_ui.dart'; -import 'package:example/example_bottom_button.dart'; -import 'package:example/example_box.dart'; -import 'package:example/example_dialog.dart'; -import 'package:example/example_drawer.dart'; -import 'package:example/example_listtile.dart'; -import 'package:example/example_refresh.dart'; -import 'package:example/example_tag.dart'; -import 'package:example/example_text_field.dart'; +import 'package:ansu_ui/bar/as_navigation_bar.dart'; +import 'package:example/main_extention.dart'; +import 'package:example/main_home.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:get/get.dart'; -import 'example_numeric_button.dart'; -import 'example_scaffold.dart'; -import 'example_button.dart'; -import 'example_tab_bar.dart'; -import 'example_picker.dart'; -import 'example_style_color.dart'; - void main() { runApp(MyApp()); } @@ -57,13 +45,17 @@ class MyHomePage extends StatefulWidget { _MyHomePageState createState() => _MyHomePageState(); } -class _MyHomePageState extends State { +class _MyHomePageState extends State with TickerProviderStateMixin { + TabController _tabController; + @override void initState() { super.initState(); SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith( statusBarColor: Colors.transparent, )); + + _tabController = TabController(length: 2, vsync: this); } @override @@ -76,57 +68,19 @@ class _MyHomePageState extends State { ) : SizedBox(), title: '安速组件', - body: ListView( - padding: EdgeInsets.all(16.w), + body: TabBarView( + controller: _tabController, children: [ - Image.asset('assets/logo.webp', height: 50), - SizedBox(height: 16.w), - ASButton.info( - title: '颜色 Style Color', - onPressed: () => Get.to(ExampleStyleColor())), - ASButton.info( - title: '按钮 Button', onPressed: () => Get.to(ExampleButton())), - ASButton.info( - title: '框架 Scaffold', onPressed: () => Get.to(ExampleScaffold())), - ASButton.info( - title: '选项卡 Tabbar', onPressed: () => Get.to(ExampleTabBar())), - ASButton.info( - title: '数量选择器NumericButton', - onPressed: () => Get.to(ExampleNumericButton())), - ASButton.info( - title: '选择器 Pickers', onPressed: () => Get.to(ExamplePicker())), - ASButton.info( - title: '底部按钮 BottomButton', - onPressed: () => Get.to(ExampleBottomButton()), - ), - ASButton.info( - title: '标签 TAG', - onPressed: () => Get.to(ExampleTag()), - ), - ASButton.info( - title: '抽屉 DRAWER', - onPressed: () => Get.to(ExampleDrawer()), - ), - ASButton.info( - title: '对话框 Dialog', - onPressed: () => Get.to(ExampleDialog()), - ), - ASButton.info( - title: '列表内容项 ListTile', - onPressed: () => Get.to(ExampleListTile()), - ), - ASButton.info( - title: '文本框 TextField', - onPressed: () => Get.to(ExampleTextFiled()), - ), - ASButton.info( - title: '刷新组件 Refresh', - onPressed: () => Get.to(ExampleRefresh()), - ), - ASButton.info( - title: '选框 Box', - onPressed: () => Get.to(ExampleBox()), - ), + MainHome(), + MainExtention(), + ], + ), + bottomNavigationBar: ASNavigationBar( + controller: _tabController, + items: [ + BottomNavigationBarItem(icon: Icon(Icons.home), label: 'HOME'), + BottomNavigationBarItem( + icon: Icon(Icons.extension), label: 'EXTENSION'), ], ), ); diff --git a/example/lib/main_extention.dart b/example/lib/main_extention.dart new file mode 100644 index 0000000..fc58003 --- /dev/null +++ b/example/lib/main_extention.dart @@ -0,0 +1,15 @@ +import 'package:flutter/material.dart'; + +class MainExtention extends StatefulWidget { + MainExtention({Key key}) : super(key: key); + + @override + _MainExtentionState createState() => _MainExtentionState(); +} + +class _MainExtentionState extends State { + @override + Widget build(BuildContext context) { + return ListView(); + } +} diff --git a/example/lib/main_home.dart b/example/lib/main_home.dart new file mode 100644 index 0000000..f7362dc --- /dev/null +++ b/example/lib/main_home.dart @@ -0,0 +1,84 @@ +import 'package:ansu_ui/ansu_ui.dart'; +import 'package:example/example_bottom_button.dart'; +import 'package:example/example_box.dart'; +import 'package:example/example_dialog.dart'; +import 'package:example/example_drawer.dart'; +import 'package:example/example_listtile.dart'; +import 'package:example/example_refresh.dart'; +import 'package:example/example_tag.dart'; +import 'package:example/example_text_field.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; + +import 'example_numeric_button.dart'; +import 'example_scaffold.dart'; +import 'example_button.dart'; +import 'example_tab_bar.dart'; +import 'example_picker.dart'; +import 'example_style_color.dart'; + +class MainHome extends StatefulWidget { + MainHome({Key key}) : super(key: key); + + @override + _MainHomeState createState() => _MainHomeState(); +} + +class _MainHomeState extends State { + @override + Widget build(BuildContext context) { + return ListView( + padding: EdgeInsets.all(16.w), + children: [ + Image.asset('assets/logo.webp', height: 50), + SizedBox(height: 16.w), + ASButton.info( + title: '颜色 Style Color', + onPressed: () => Get.to(ExampleStyleColor())), + ASButton.info( + title: '按钮 Button', onPressed: () => Get.to(ExampleButton())), + ASButton.info( + title: '框架 Scaffold', onPressed: () => Get.to(ExampleScaffold())), + ASButton.info( + title: '选项卡 Tabbar', onPressed: () => Get.to(ExampleTabBar())), + ASButton.info( + title: '数量选择器NumericButton', + onPressed: () => Get.to(ExampleNumericButton())), + ASButton.info( + title: '选择器 Pickers', onPressed: () => Get.to(ExamplePicker())), + ASButton.info( + title: '底部按钮 BottomButton', + onPressed: () => Get.to(ExampleBottomButton()), + ), + ASButton.info( + title: '标签 TAG', + onPressed: () => Get.to(ExampleTag()), + ), + ASButton.info( + title: '抽屉 DRAWER', + onPressed: () => Get.to(ExampleDrawer()), + ), + ASButton.info( + title: '对话框 Dialog', + onPressed: () => Get.to(ExampleDialog()), + ), + ASButton.info( + title: '列表内容项 ListTile', + onPressed: () => Get.to(ExampleListTile()), + ), + ASButton.info( + title: '文本框 TextField', + onPressed: () => Get.to(ExampleTextFiled()), + ), + ASButton.info( + title: '刷新组件 Refresh', + onPressed: () => Get.to(ExampleRefresh()), + ), + ASButton.info( + title: '选框 Box', + onPressed: () => Get.to(ExampleBox()), + ), + ], + ); + } +} diff --git a/lib/ansu_ui.dart b/lib/ansu_ui.dart index 4ed0d75..8425621 100644 --- a/lib/ansu_ui.dart +++ b/lib/ansu_ui.dart @@ -9,7 +9,11 @@ export 'buttons/as_gradientbutton.dart'; export 'scaffold/as_scaffold.dart'; export 'styles/as_colors.dart'; + export 'bar/as_tabbar.dart'; +export 'bar/as_navigation_bar.dart'; +export 'bar/as_navigation_item.dart'; + export 'drawer/as_drawer.dart'; export 'pickers/as_date_picker.dart'; export 'pickers/as_picker_box.dart'; diff --git a/lib/bar/as_navigation_bar.dart b/lib/bar/as_navigation_bar.dart new file mode 100644 index 0000000..1ff14f9 --- /dev/null +++ b/lib/bar/as_navigation_bar.dart @@ -0,0 +1,47 @@ +import 'package:ansu_ui/styles/as_colors.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class ASNavigationBar extends StatefulWidget { + final List items; + final TabController controller; + ASNavigationBar({Key key, @required this.items, this.controller}) + : super(key: key); + + @override + _ASNavigationBarState createState() => _ASNavigationBarState(); +} + +class _ASNavigationBarState extends State { + int _currentIndex = 0; + updateBar() => setState(() => _currentIndex = widget.controller.index); + + @override + void initState() { + super.initState(); + widget.controller.addListener(updateBar); + } + + @override + void dispose() { + widget.controller.removeListener(updateBar); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return BottomNavigationBar( + items: widget.items, + elevation: 0, + backgroundColor: kBackgroundColor, + type: BottomNavigationBarType.fixed, + currentIndex: _currentIndex, + selectedLabelStyle: TextStyle(fontSize: 12.sp), + unselectedLabelStyle: TextStyle(fontSize: 12.sp), + selectedItemColor: kTextColor, + unselectedItemColor: kTextSubColor, + onTap: (index) => + widget.controller.animateTo(index, curve: Curves.easeInOutCubic), + ); + } +} diff --git a/lib/bar/as_navigation_item.dart b/lib/bar/as_navigation_item.dart new file mode 100644 index 0000000..c6df77d --- /dev/null +++ b/lib/bar/as_navigation_item.dart @@ -0,0 +1,19 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +BottomNavigationBarItem asNavigationItem( + String path1, String path2, String title) { + return BottomNavigationBarItem( + icon: Image.asset( + path1, + height: 24.w, + width: 24.w, + ), + activeIcon: Image.asset( + path2, + height: 24.w, + width: 24.w, + ), + label: title, + ); +}