From cf1d2d5f71af3a64ccce8d2b3f9a29b941769fce Mon Sep 17 00:00:00 2001 From: laiiihz Date: Tue, 24 Nov 2020 09:43:02 +0800 Subject: [PATCH 1/4] add tabbar indicator --- example/lib/example_scaffold.dart | 21 +++++++- lib/ansu_ui.dart | 1 + lib/tabbar/as_tab_indicator.dart | 84 +++++++++++++++++++++++++++++++ lib/tabbar/as_tabbar.dart | 46 +++++++++++++++++ 4 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 lib/tabbar/as_tab_indicator.dart create mode 100644 lib/tabbar/as_tabbar.dart diff --git a/example/lib/example_scaffold.dart b/example/lib/example_scaffold.dart index 73145ea..85c367c 100644 --- a/example/lib/example_scaffold.dart +++ b/example/lib/example_scaffold.dart @@ -8,11 +8,30 @@ class ExampleScaffold extends StatefulWidget { _ExampleScaffoldState createState() => _ExampleScaffoldState(); } -class _ExampleScaffoldState extends State { +class _ExampleScaffoldState extends State + with TickerProviderStateMixin { + TabController _tabController; + List tabs; + + @override + void initState() { + super.initState(); + tabs = List.generate(10, (index) => 'Tab $index'); + _tabController = TabController( + length: tabs.length, + vsync: this, + ); + } + @override Widget build(BuildContext context) { return ASScaffold( title: '标题', + appBarBottom: ASTabBar( + items: tabs, + isScrollable: true, + controller: _tabController, + ), ); } } diff --git a/lib/ansu_ui.dart b/lib/ansu_ui.dart index 07c84a5..c59dbd8 100644 --- a/lib/ansu_ui.dart +++ b/lib/ansu_ui.dart @@ -3,6 +3,7 @@ library ansu_ui; export 'buttons/as_button.dart'; export 'scaffold/as_scaffold.dart'; export 'styles/as_colors.dart'; +export 'tabbar/as_tabbar.dart'; //`BOTTOM` is external lib export 'package:flutter_screenutil/flutter_screenutil.dart'; diff --git a/lib/tabbar/as_tab_indicator.dart b/lib/tabbar/as_tab_indicator.dart new file mode 100644 index 0000000..bc03bdd --- /dev/null +++ b/lib/tabbar/as_tab_indicator.dart @@ -0,0 +1,84 @@ +import 'package:flutter/material.dart'; + +///渐变indicator +/// +///fork from TabIndicator +/// +///仅仅在发现页面中使用 +class ASTabIndicator extends Decoration { + const ASTabIndicator({ + this.borderSide = const BorderSide(width: 4.0, color: Colors.white), + this.insets = EdgeInsets.zero, + }) : assert(borderSide != null), + assert(insets != null); + + final BorderSide borderSide; + final EdgeInsetsGeometry insets; + + @override + Decoration lerpFrom(Decoration a, double t) { + if (a is ASTabIndicator) { + return ASTabIndicator( + borderSide: BorderSide.lerp(a.borderSide, borderSide, t), + insets: EdgeInsetsGeometry.lerp(a.insets, insets, t), + ); + } + return super.lerpFrom(a, t); + } + + @override + Decoration lerpTo(Decoration b, double t) { + if (b is ASTabIndicator) { + return ASTabIndicator( + borderSide: BorderSide.lerp(borderSide, b.borderSide, t), + insets: EdgeInsetsGeometry.lerp(insets, b.insets, t), + ); + } + return super.lerpTo(b, t); + } + + @override + _UnderlinePainter createBoxPainter([VoidCallback onChanged]) { + return _UnderlinePainter(this, onChanged); + } +} + +class _UnderlinePainter extends BoxPainter { + _UnderlinePainter(this.decoration, VoidCallback onChanged) + : assert(decoration != null), + super(onChanged); + + final ASTabIndicator decoration; + + BorderSide get borderSide => decoration.borderSide; + EdgeInsetsGeometry get insets => decoration.insets; + + Rect _indicatorRectFor(Rect rect, TextDirection textDirection) { + assert(rect != null); + assert(textDirection != null); + final Rect indicator = insets.resolve(textDirection).deflateRect(rect); + return Rect.fromLTWH( + indicator.left, + indicator.bottom - borderSide.width, + indicator.width, + borderSide.width, + ); + } + + @override + void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { + assert(configuration != null); + assert(configuration.size != null); + final Rect rect = offset & configuration.size; + final TextDirection textDirection = configuration.textDirection; + final Rect indicator = + _indicatorRectFor(rect, textDirection).deflate(borderSide.width / 2.0); + final Paint paint = borderSide.toPaint() + ..strokeCap = StrokeCap.square + ..shader = LinearGradient(colors: [ + Color(0xFFE50112), + Color(0xFFFFB1B1), + ]).createShader(rect); + canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint); + } +} diff --git a/lib/tabbar/as_tabbar.dart b/lib/tabbar/as_tabbar.dart new file mode 100644 index 0000000..da8e891 --- /dev/null +++ b/lib/tabbar/as_tabbar.dart @@ -0,0 +1,46 @@ +import 'package:ansu_ui/styles/as_colors.dart'; +import 'package:ansu_ui/tabbar/as_tab_indicator.dart'; +import 'package:flutter/material.dart'; + +class ASTabBar extends StatefulWidget implements PreferredSizeWidget { + final List items; + final TabController controller; + + ///可滚动 + final bool isScrollable; + ASTabBar( + {Key key, + @required this.items, + @required this.controller, + this.isScrollable = false}) + : super(key: key); + + @override + _ASTabBarState createState() => _ASTabBarState(); + + @override + Size get preferredSize => Size.fromHeight(46); +} + +class _ASTabBarState extends State { + @override + Widget build(BuildContext context) { + return TabBar( + isScrollable: widget.isScrollable, + controller: widget.controller, + tabs: widget.items.map((e) => Tab(text: e)).toList(), + labelStyle: TextStyle( + fontSize: 14, + fontWeight: FontWeight.bold, + ), + unselectedLabelStyle: TextStyle( + fontWeight: FontWeight.normal, + ), + labelColor: kTextColor, + unselectedLabelColor: kTextSubColor, + indicatorSize: TabBarIndicatorSize.label, + indicatorPadding: EdgeInsets.zero, + indicator: ASTabIndicator(), + ); + } +} From a37be431e1e078956d1731ea6930da03d4ff235b Mon Sep 17 00:00:00 2001 From: laiiihz Date: Tue, 24 Nov 2020 09:49:50 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/buttons/as_back_button.dart | 5 +++++ lib/tabbar/as_tabbar.dart | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/lib/buttons/as_back_button.dart b/lib/buttons/as_back_button.dart index 0746457..91208c7 100644 --- a/lib/buttons/as_back_button.dart +++ b/lib/buttons/as_back_button.dart @@ -2,6 +2,11 @@ import 'package:ansu_ui/ansu_ui.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +///安速返回按钮 +/// +///ASBackButton 黑色返回按钮 +/// +///ASBackButton.white 白色返回按钮 class ASBackButton extends StatelessWidget { final Color color; const ASBackButton({Key key, this.color = kDarkColor}) : super(key: key); diff --git a/lib/tabbar/as_tabbar.dart b/lib/tabbar/as_tabbar.dart index da8e891..f34f0b2 100644 --- a/lib/tabbar/as_tabbar.dart +++ b/lib/tabbar/as_tabbar.dart @@ -2,6 +2,11 @@ import 'package:ansu_ui/styles/as_colors.dart'; import 'package:ansu_ui/tabbar/as_tab_indicator.dart'; import 'package:flutter/material.dart'; +/// ## 安速Tabbar +/// +/// [items] +/// +/// [controller] see more TabController class ASTabBar extends StatefulWidget implements PreferredSizeWidget { final List items; final TabController controller; From acbc775c06059422d280ae588144c6cf9df36881 Mon Sep 17 00:00:00 2001 From: laiiihz Date: Tue, 24 Nov 2020 10:26:54 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0drawer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/lib/example_scaffold.dart | 20 ++++++++++++- lib/ansu_ui.dart | 4 ++- lib/{tabbar => bar}/as_tab_indicator.dart | 0 lib/{tabbar => bar}/as_tabbar.dart | 2 +- lib/drawer/as_drawer.dart | 34 +++++++++++++++++++++++ lib/scaffold/as_scaffold.dart | 7 +++++ lib/utils/screen_adapter.dart | 5 ++++ 7 files changed, 69 insertions(+), 3 deletions(-) rename lib/{tabbar => bar}/as_tab_indicator.dart (100%) rename lib/{tabbar => bar}/as_tabbar.dart (95%) create mode 100644 lib/drawer/as_drawer.dart create mode 100644 lib/utils/screen_adapter.dart diff --git a/example/lib/example_scaffold.dart b/example/lib/example_scaffold.dart index 85c367c..072a3d7 100644 --- a/example/lib/example_scaffold.dart +++ b/example/lib/example_scaffold.dart @@ -1,5 +1,6 @@ import 'package:ansu_ui/ansu_ui.dart'; import 'package:flutter/material.dart'; +import 'package:get/get.dart'; class ExampleScaffold extends StatefulWidget { ExampleScaffold({Key key}) : super(key: key); @@ -26,12 +27,29 @@ class _ExampleScaffoldState extends State @override Widget build(BuildContext context) { return ASScaffold( - title: '标题', + title: '标题 SCaffold', appBarBottom: ASTabBar( items: tabs, isScrollable: true, controller: _tabController, ), + endDrawer: ASDrawer( + child: Text('DRAWER'), + ), + body: ListView( + children: [ + Builder( + builder: (context) { + return TextButton( + onPressed: () { + Scaffold.of(context).openEndDrawer(); + }, + child: Text('open drawer'), + ); + }, + ) + ], + ), ); } } diff --git a/lib/ansu_ui.dart b/lib/ansu_ui.dart index c59dbd8..f90392d 100644 --- a/lib/ansu_ui.dart +++ b/lib/ansu_ui.dart @@ -3,7 +3,9 @@ library ansu_ui; export 'buttons/as_button.dart'; export 'scaffold/as_scaffold.dart'; export 'styles/as_colors.dart'; -export 'tabbar/as_tabbar.dart'; +export 'bar/as_tabbar.dart'; +export 'drawer/as_drawer.dart'; +export 'utils/screen_adapter.dart'; //`BOTTOM` is external lib export 'package:flutter_screenutil/flutter_screenutil.dart'; diff --git a/lib/tabbar/as_tab_indicator.dart b/lib/bar/as_tab_indicator.dart similarity index 100% rename from lib/tabbar/as_tab_indicator.dart rename to lib/bar/as_tab_indicator.dart diff --git a/lib/tabbar/as_tabbar.dart b/lib/bar/as_tabbar.dart similarity index 95% rename from lib/tabbar/as_tabbar.dart rename to lib/bar/as_tabbar.dart index f34f0b2..9da69d4 100644 --- a/lib/tabbar/as_tabbar.dart +++ b/lib/bar/as_tabbar.dart @@ -1,5 +1,5 @@ import 'package:ansu_ui/styles/as_colors.dart'; -import 'package:ansu_ui/tabbar/as_tab_indicator.dart'; +import 'package:ansu_ui/bar/as_tab_indicator.dart'; import 'package:flutter/material.dart'; /// ## 安速Tabbar diff --git a/lib/drawer/as_drawer.dart b/lib/drawer/as_drawer.dart new file mode 100644 index 0000000..cdb0f1b --- /dev/null +++ b/lib/drawer/as_drawer.dart @@ -0,0 +1,34 @@ +import 'package:ansu_ui/utils/screen_adapter.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +///安速抽屉 +class ASDrawer extends StatefulWidget { + ///子组件 + final Widget child; + ASDrawer({Key key, @required this.child}) : super(key: key); + + @override + _ASDrawerState createState() => _ASDrawerState(); +} + +class _ASDrawerState extends State { + @override + Widget build(BuildContext context) { + return Align( + alignment: Alignment.bottomRight, + child: SizedBox( + height: screenHeight - statusBarHeight, + width: screenWidth - 44.w, + child: Material( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(34.w), + ), + ), + child: widget.child, + ), + ), + ); + } +} diff --git a/lib/scaffold/as_scaffold.dart b/lib/scaffold/as_scaffold.dart index 9c59ca2..2bca3e9 100644 --- a/lib/scaffold/as_scaffold.dart +++ b/lib/scaffold/as_scaffold.dart @@ -25,6 +25,11 @@ class ASScaffold extends StatefulWidget { /// `AppBar` appBarBottom final PreferredSizeWidget appBarBottom; + + /// `EndDrawer` endDrawer + /// + /// 右方向的抽屉 + final Widget endDrawer; ASScaffold({ Key key, @required this.title, @@ -32,6 +37,7 @@ class ASScaffold extends StatefulWidget { this.body, this.bottomNavigationBar, this.appBarBottom, + this.endDrawer, }) : super(key: key); @override @@ -42,6 +48,7 @@ class _ASScaffoldState extends State { @override Widget build(BuildContext context) { return Scaffold( + endDrawer: widget.endDrawer, backgroundColor: kBackgroundColor, bottomNavigationBar: widget.bottomNavigationBar, appBar: AppBar( diff --git a/lib/utils/screen_adapter.dart b/lib/utils/screen_adapter.dart new file mode 100644 index 0000000..8f91862 --- /dev/null +++ b/lib/utils/screen_adapter.dart @@ -0,0 +1,5 @@ +import 'package:ansu_ui/ansu_ui.dart'; + +double statusBarHeight = ScreenUtil().statusBarHeight; +double screenHeight = ScreenUtil().screenHeight; +double screenWidth = ScreenUtil().screenWidth; From 716db3e0470d66ae8b9bb4ca172c3cae17e6b112 Mon Sep 17 00:00:00 2001 From: laiiihz Date: Tue, 24 Nov 2020 10:33:03 +0800 Subject: [PATCH 4/4] update example --- example/lib/example_button.dart | 29 +++++++++++++++++++++++++++++ example/lib/main.dart | 23 +++++------------------ lib/ansu_ui.dart | 2 ++ 3 files changed, 36 insertions(+), 18 deletions(-) create mode 100644 example/lib/example_button.dart diff --git a/example/lib/example_button.dart b/example/lib/example_button.dart new file mode 100644 index 0000000..91c190f --- /dev/null +++ b/example/lib/example_button.dart @@ -0,0 +1,29 @@ +import 'package:ansu_ui/ansu_ui.dart'; +import 'package:flutter/material.dart'; + +class ExampleButton extends StatefulWidget { + ExampleButton({Key key}) : super(key: key); + + @override + _ExampleButtonState createState() => _ExampleButtonState(); +} + +class _ExampleButtonState extends State { + @override + Widget build(BuildContext context) { + return ASScaffold( + title: 'Button', + body: ListView( + children: [ + ASButton.delete('删除 DELETE', () {}), + ASButton.info('信息 INFO', () {}), + ASButton.warn('警告 WARNING', () {}), + ASButton.opration('操作 OPERATION', () {}), + SizedBox(height: 12.w), + ASLongButton.solid('确认', () {}), + ASLongButton.hollow('确认', () {}), + ], + ), + ); + } +} diff --git a/example/lib/main.dart b/example/lib/main.dart index 60c74d3..6a776f4 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,10 +1,9 @@ import 'package:ansu_ui/ansu_ui.dart'; -import 'package:ansu_ui/buttons/as_button.dart'; -import 'package:ansu_ui/buttons/as_longbutton.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'example_scaffold.dart'; +import 'example_button.dart'; void main() { runApp(MyApp()); @@ -39,24 +38,12 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State { @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text('title'), - ), + return ASScaffold( + title: '安速组件', body: ListView( children: [ - ASButton.delete('删除订单', () {}), - ASButton.info('删除订单', () {}), - ASButton.warn('删除订单', () {}), - ASButton.opration('删除订单', (){}), - SizedBox(height: 12.w), - ASLongButton.solid('确认', () {}), - ASLongButton.hollow('确认', () {}), - TextButton( - onPressed: () { - Get.to(ExampleScaffold()); - }, - child: Text('SCAFFOLD')), + ASButton.info('Button', () => Get.to(ExampleButton())), + ASButton.info('Scaffold', () => Get.to(ExampleScaffold())), ], ), ); diff --git a/lib/ansu_ui.dart b/lib/ansu_ui.dart index f90392d..3753cd6 100644 --- a/lib/ansu_ui.dart +++ b/lib/ansu_ui.dart @@ -1,6 +1,8 @@ library ansu_ui; export 'buttons/as_button.dart'; +export 'buttons/as_longbutton.dart'; +export 'buttons/as_back_button.dart'; export 'scaffold/as_scaffold.dart'; export 'styles/as_colors.dart'; export 'bar/as_tabbar.dart';