Skip to content

C
cool_ui
提交 6d55157a authored 作者: Kevin's avatar Kevin
浏览文件
操作

添加了WeuiToast效果,完善了文档信息

上级 d6781102
隐藏空白字符变更
内嵌 并排
正在显示 包含 508 行增加 和 166 行删除
CHANGELOG.md
浏览文件 @ 6d55157a
## [0.1.1] - TODO:添加了WeuiToast效果,完善了文档信息
* TODO: 添加了WeuiToast效果
* TODO: 完善了文档信息
* TODO: 添加了PaintEvent事件,具体请看Demo
## [0.1.0] - TODO: 改进了CupertionPopover和添加了CupertinoPopoverMenuItem
* TODO: 改进了CupertionPopover箭头的位置
......
README.md
浏览文件 @ 6d55157a
......@@ -6,15 +6,48 @@ Usage
Add this to your package's pubspec.yaml file:
``` yaml
dependencies:
cool_ui: "^0.1.0"
cool_ui: "^0.1.1"
```
## CupertinoPopover
仿iOS的UIPopover
# 控件
![Image text](./images/popover_demo.gif)
- [CupertinoPopover](#CupertinoPopover)
- [CupertinoPopoverMenuList](#CupertinoPopoverMenuList)
- [CupertinoPopoverMenuItem](#CupertinoPopoverMenuItem)
- [showWeuiToast](#showWeuiToast)
- [showWeuiSuccessToast](#showWeuiSuccessToast)
- [showWeuiLoadingToast](#showWeuiLoadingToast)
## CupertinoPopoverButton
仿iOS的UIPopover效果
用于弹窗的按钮
```dart
CupertinoPopoverButton({
this.child,
this.popoverBuild,
this.popoverColor=Colors.white,
@required this.popoverWidth,
@required this.popoverHeight,
this.transitionDuration=const Duration(milliseconds: 200),
this.radius=8.0});
```
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| child | <code>Widget</code> | | 按钮的内容 |
| popoverBuild | <code>WidgetBuilder</code> | | 生成弹出框的内容 |
| popoverWidth | <code>double</code> | | 弹出框的宽度 |
| popoverHeight | <code>double</code> | | 弹出框的高度 |
| [popoverColor] | <code>Color</code> | 白色 | 弹出框的背景颜色 |
| [transitionDuration] | <code>Duration</code> | 0.2s | 过度动画时间 |
| [radius] | <code>double</code> | 8.0 | 弹出框的圆角弧度 |
**Example**
#### 案例核心代码
```dart
CupertinoPopoverButton(
child: Container(
......@@ -28,16 +61,46 @@ CupertinoPopoverButton(
),
child: Center(child:Text('左上角')),
),
popoverBody:Container(
width: 100.0,
height: 100.0,
child: Text('左上角内容'),
),
popoverBuild:(BuildContext context){
return Container(
width: 100.0,
height: 100.0,
child: Text('左上角内容'),
)
},
popoverWidth: 100.0,
popoverHeight: 100.0);
```
## CupertinoPopoverMenuList,CupertinoPopoverMenuItem
用于快速搭建一个弹出的菜单项
![Image text](./images/popover_demo.gif)
## CupertinoPopoverMenuList
Popover弹出的菜单样式列表,一般与[CupertinoPopoverMenuItem](#CupertinoPopoverMenuItem)一起用,会给两个Item加间隔线
```dart
CupertinoPopoverMenuList({this.children})
```
| Param | Type | Description |
| --- | --- | --- |
| children | <code>List<Widget></code> | 子元素,一般是CupertinoPopoverMenuItem |
## CupertinoPopoverMenuItem
单个菜单项
```dart
const CupertinoPopoverMenuItem({
this.leading,
this.child,
this.onTap,
this.isTapClosePopover=true
});
```
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [leading] | <code>Widget<Widget></code> | | 菜单左边,一般放图标 |
| [child] | <code>Widget<Widget></code> | | 菜单内容 |
| [onTap] | <code>VoidCallback<Widget></code> | |菜单点击事件 |
| [isTapClosePopover] | <code>bool<Widget></code> | | 是否点击关闭 |
#### 案例核心代码
```dart
......@@ -49,3 +112,62 @@ CupertinoPopoverButton(
],
)
```
## showWeuiToast
仿Weui的Toast效果
```dart
VoidCallback showWeuiToast({
@required BuildContext context,
@required Widget message,
@required Widget icon,
RouteTransitionsBuilder transitionBuilder})
```
| Param | Type | Description |
| --- | --- | --- |
| [context] | <code>BuildContext<Widget></code> | 上下文 |
| [message] | <code>Widget<Widget></code> | 提示消息 |
| [icon] | <code>Widget<Widget></code> | 图标 |
| [transitionBuilder] | <code>RouteTransitionsBuilder<Widget></code> | 自定义过度动画 |
返回参数:VoidCallback,用于关闭Toast
![Image text](./images/toast_demo.gif)
## showWeuiSuccessToast
仿Weui的SuccessToast效果
```dart
Future showWeuiSuccessToast({
@required BuildContext context,
@required Widget message=const Text("成功"),
RouteTransitionsBuilder transitionBuilder,
Duration closeDuration = const Duration(seconds: 3)
})
```
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [context] | <code>BuildContext<Widget></code> | | 上下文 |
| [transitionBuilder] | <code>RouteTransitionsBuilder<Widget></code> | | 自定义过度动画 |
| [message] | <code>Widget<Widget></code> | 成功| 提示消息 |
| [closeDuration] | <code>Duration<Widget></code> | 3s | 关闭时间 |
返回参数:Future dart 异步操作,代表Toast已关闭
## showWeuiLoadingToast
仿Weui的LoadingToast效果
```dart
VoidCallback showWeuiToast({
@required BuildContext context,
@required Widget message,
RouteTransitionsBuilder transitionBuilder
})
```
| Param | Type | Description |
| --- | --- | --- |
| [context] | <code>BuildContext<Widget></code> | 上下文 |
| [message] | <code>Widget<Widget></code> | 提示消息 |
| [transitionBuilder] | <code>RouteTransitionsBuilder<Widget></code> | 自定义过度动画 |
返回参数:VoidCallback,用于关闭Toast
example/lib/main.dart
浏览文件 @ 6d55157a
import 'package:cool_ui_example/cool_u_i_example_icons.dart';
import 'package:cool_ui_example/pages/PaintEventDemo.dart';
import 'package:cool_ui_example/pages/PopoverDemo.dart';
import 'package:cool_ui_example/pages/paint_event_demo.dart';
import 'package:cool_ui_example/pages/popover_demo.dart';
import 'package:cool_ui_example/pages/weui_toast_demo.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
......@@ -87,6 +88,12 @@ class _MyHomePageState extends State<MyHomePage> {
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>PaintEventDemo()));
},
),
ListTile(
title: Text("WeuiToastEvent"),
onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>WeuiToastDemo()));
},
)
],
)
......
example/lib/pages/PaintEventDemo.dart → example/lib/pages/paint_event_demo.dart
浏览文件 @ 6d55157a
......@@ -51,34 +51,4 @@ class PaintEventDemoState extends State<PaintEventDemo>{
);
}
Widget _buildPopoverButton(String btnTitle,String bodyMessage){
return Padding(
padding: EdgeInsets.all(20.0),
child:CupertinoPopoverButton(
child: Container(
width: 80.0,
height: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
boxShadow: [BoxShadow(color: Colors.black12,blurRadius: 5.0)]
),
child: Center(child:Text(btnTitle)),
),
popoverBuild: (context) {
return CupertinoPopoverMenuList(
children: <Widget>[
CupertinoPopoverMenuItem(leading: Icon(Icons.add),child: Text("新增"),),
CupertinoPopoverMenuItem(leading: Icon(Icons.edit),child: Text("修改"),),
CupertinoPopoverMenuItem(leading: Icon(Icons.delete),child: Text("删除"),)
],
);
},
popoverWidth: 150.0,
popoverHeight: 123.0)
);
}
}
\ No newline at end of file
example/lib/pages/PopoverDemo.dart → example/lib/pages/popover_demo.dart
浏览文件 @ 6d55157a
......@@ -29,17 +29,25 @@ class PopoverDemoState extends State<PopoverDemo>{
mainAxisSize: MainAxisSize.max,
children: <Widget>[
_buildPopoverButton("左上角","左上角内容"),
_buildPopoverButton("中间上方","中间上方内容"),
_buildPopoverButton("右上角","右上角内容")
],
),
Center(
child:_buildPopoverButton("中间","中间内容")
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children:<Widget>[
_buildPopoverButton("中间左方","中间左方内容"),
_buildPopoverButton("正中间","正中间内容"),
_buildPopoverButton("中间左方","中间左方内容")
]
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
_buildPopoverButton("左下角","左下角内容"),
_buildPopoverButton("中间下方","中间下方内容"),
_buildPopoverButton("右下角","右下角内容")
],
)
......
example/lib/pages/weui_toast_demo.dart 0 → 100644
浏览文件 @ 6d55157a
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cool_ui/cool_ui.dart';
class WeuiToastDemo extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return WeuiToastDemoState();
}
}
class WeuiToastDemoState extends State<WeuiToastDemo>{
bool isPaintBackgroud = false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("WeuiToast Demo"),
),
body: ListView(
padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 72.0),
children: <Widget>[
RaisedButton(
color: Colors.blue[400],
child: Text("成功",style: TextStyle(color: Colors.white),),
onPressed: ()=>showWeuiSuccessToast(context:context,message: Text("成功啦!")),
),
RaisedButton(
color: Colors.blue[400],
child: Text("加载中",style: TextStyle(color: Colors.white),),
onPressed: (){
var hide = showWeuiLoadingToast(context:context, message:Text("加载中"));
Future.delayed(Duration(seconds: 5),(){
hide();
});
},
),
].map((Widget button) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: button
);
})
.toList(),
)
);
}
}
\ No newline at end of file
lib/cool_ui.dart
浏览文件 @ 6d55157a
library cool_ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flustars/flustars.dart';
import 'dart:async';
import 'package:flutter_spinkit/flutter_spinkit.dart';
part 'utils/screen_utils.dart';
part 'utils/widget_utils.dart';
part 'icons/cool_ui_icons.dart';
part 'widgets/popover/cupertino_popover.dart';
part 'widgets/popover/cupertino_popover_menu_item.dart';
part 'widgets/utils/paint_event.dart';
part 'dialogs/weui_toast.dart';
lib/dialogs/weui_toast.dart 0 → 100644
浏览文件 @ 6d55157a
part of cool_ui;
class WeuiToast extends TransitionRoute{
OverlayEntry _toastBarrier;
final Widget message;
final Widget icon;
final RouteTransitionsBuilder _transitionBuilder;
final Duration closeDuration;
WeuiToast({
@required this.message,
@required this.icon,
Duration transitionDuration = const Duration(milliseconds: 100),
RouteTransitionsBuilder transitionBuilder,
this.closeDuration
}):assert(icon != null),
assert(message!=null),
_transitionDuration = transitionDuration,
_transitionBuilder = transitionBuilder;
@override
void didChangePrevious(Route<dynamic> previousRoute) {
super.didChangePrevious(previousRoute);
changedInternalState();
}
@override
void changedInternalState() {
super.changedInternalState();
_toastBarrier.markNeedsBuild();
}
@override
Iterable<OverlayEntry> createOverlayEntries() sync* {
yield _toastBarrier = OverlayEntry(builder: _buildToastBarrier);
yield OverlayEntry(builder: _buildToastScope, maintainState: true);
}
// TODO: implement opaque
@override
bool get opaque => false;
// TODO: implement transitionDuration
@override
Duration get transitionDuration => _transitionDuration;
final Duration _transitionDuration;
Widget _buildToastBarrier(BuildContext context){
return IgnorePointer(
ignoring: true,
);
}
Widget _buildToastScope(BuildContext context){
return Material(
color: Colors.transparent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 180.0),
child: AnimatedBuilder(
animation: animation,
builder: (context,child){
return _buildTransition(context,animation,secondaryAnimation,child);
},
child: Container(
width: 122.0,
decoration: BoxDecoration(
color: Color.fromRGBO(17, 17, 17, 0.7),
borderRadius: BorderRadius.circular(5.0)
),
constraints: BoxConstraints(
minHeight: 122.0,
),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 22.0),
constraints:BoxConstraints(
minHeight: 55.0
) ,
child: IconTheme(data: IconThemeData(color: Colors.white,size: 55.0), child: icon),
),
DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 16.0
),
child: message,
),
],
),
),
),
)
],
),
);
}
Widget _buildTransition( BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child){
if (_transitionBuilder == null) {
return FadeTransition(
opacity: CurvedAnimation(
parent: animation,
curve: Curves.linear,
),
child: child);
} // Some default transition
return _transitionBuilder(context, animation, secondaryAnimation, child);
}
}
Future showWeuiSuccessToast({
@required BuildContext context,
@required Widget message=const Text("成功"),
RouteTransitionsBuilder transitionBuilder,
Duration closeDuration = const Duration(seconds: 3)
}){
var hide = showWeuiToast(
context: context,
message: message,
icon: Icon(CoolUIIcons.success_no_circle),
transitionBuilder:transitionBuilder);
return Future.delayed(closeDuration,(){
hide();
});
}
VoidCallback showWeuiLoadingToast({
@required BuildContext context,
@required Widget message,
RouteTransitionsBuilder transitionBuilder
}){
return showWeuiToast(
context: context,
message: message,
icon: WeuiLoadingIcon(),
transitionBuilder:transitionBuilder);
}
VoidCallback showWeuiToast({
@required BuildContext context,
@required Widget message,
@required Widget icon,
RouteTransitionsBuilder transitionBuilder}){
Completer<VoidCallback> result = Completer<VoidCallback>();
Navigator.of(context,rootNavigator: true).push(
WeuiToast(
message: Builder(builder: (context){
result.complete(()=>Navigator.pop(context));
return message;
}),
icon: icon,
transitionBuilder:transitionBuilder));
return (){
result.future.then((hide){
hide();
});
};
}
class WeuiLoadingIcon extends StatefulWidget{
final double size;
WeuiLoadingIcon({this.size = 50.0});
@override
State<StatefulWidget> createState() => WeuiLoadingIconState();
}
class WeuiLoadingIconState extends State<WeuiLoadingIcon>
with SingleTickerProviderStateMixin
{
AnimationController _controller;
Animation<double> _doubleAnimation;
@override
void initState() {
super.initState();
_controller = new AnimationController(
vsync: this, duration: Duration(milliseconds: 1000))
..repeat();
_doubleAnimation= Tween(begin: 0.0,end: 360.0).animate(_controller)..addListener((){
setState(() {
});
});
}
@override
void dispose() {
// TODO: implement dispose
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: (_doubleAnimation.value / 30).toInt() * 30.0 * 0.0174533,
child: Image.asset("assets/images/loading.png",
package: "cool_ui",
width: widget.size,
height: widget.size)
);
}
}
\ No newline at end of file
lib/icons/cool_ui_icons.dart 0 → 100644
浏览文件 @ 6d55157a
/// Flutter icons CoolUI
/// Copyright (C) 2018 by original authors @ fluttericon.com, fontello.com
/// This font was generated by FlutterIcon.com, which is derived from Fontello.
///
/// To use this font, place it in your fonts/ directory and include the
/// following in your pubspec.yaml
///
/// flutter:
/// fonts:
/// - family: CoolUI
/// fonts:
/// - asset: fonts/CoolUI.ttf
///
///
///
part of cool_ui;
class CoolUIIcons {
CoolUIIcons._();
static const _kFontFam = 'CoolUIIcons';
static const IconData success_no_circle = const IconData(0xea08, fontFamily: _kFontFam,fontPackage: "cool_ui");
}
lib/utils/screen_utils.dart deleted 100644 → 0
浏览文件 @ d6781102
part of cool_ui;
class ScreenUtil {
static double _screenWidth;
static double _screenHeight;
static double _screenDensity;
static double _statusBarHeight;
static double _appBarHeight;
static MediaQueryData _mediaQueryData;
static ScreenUtil singleton = new ScreenUtil();
static ScreenUtil getInstance() {
return singleton;
}
void init(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
_mediaQueryData = mediaQuery;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_screenDensity = mediaQuery.devicePixelRatio;
_statusBarHeight = mediaQuery.padding.top;
_appBarHeight = kToolbarHeight;
}
///screen width
static double get screenWidth => _screenWidth;
///screen height
static double get screenHeight => _screenHeight;
///appBar height
static double get appBarHeight => _appBarHeight;
///screen density
static double get screenDensity => _screenDensity;
///status bar Height
static double get statusBarHeight => _statusBarHeight;
static MediaQueryData get mediaQueryData => _mediaQueryData;
static double getScreenWidth(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
return mediaQuery.size.width;
}
static double getScreenHeight(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
return mediaQuery.size.height;
}
static Orientation getOrientation(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
return mediaQuery.orientation;
}
}
\ No newline at end of file
lib/utils/widget_utils.dart deleted 100644 → 0
浏览文件 @ d6781102
part of cool_ui;
class WidgetUtils {
bool _hasMeasured = false;
double _width;
double _height;
/// Widget rendering listener.
/// Widget渲染监听
/// context: Widget context
/// isOnce: true,Continuous monitoring false,Listen only once.
/// onCallBack: Widget Rect CallBack
void asyncPrepare(
BuildContext context, bool isOnce, ValueChanged<Rect> onCallBack) {
if (_hasMeasured) return;
WidgetsBinding.instance.addPostFrameCallback((Duration timeStamp) {
RenderBox box = context.findRenderObject();
if (box != null && box.semanticBounds != null) {
if (isOnce) _hasMeasured = true;
double width = box.semanticBounds.width;
double height = box.semanticBounds.height;
if (_width != width || _height != height) {
_width = width;
_height = height;
if (onCallBack != null) onCallBack(box.semanticBounds);
}
}
});
}
///get Widget Bounds (width, height, left, top, right, bottom and so on).Widgets must be rendered completely.
///获取widget Rect
static Rect getWidgetBounds(BuildContext context) {
RenderBox box = context.findRenderObject();
return (box != null && box.semanticBounds != null)
? box.semanticBounds
: Rect.zero;
}
///Get the coordinates of the widget on the screen.Widgets must be rendered completely.
///获取widget在屏幕上的坐标,widget必须渲染完成
static Offset getWidgetLocalToGlobal(BuildContext context) {
RenderBox box = context.findRenderObject();
return box == null ? Offset.zero : box.localToGlobal(Offset.zero);
}
}
\ No newline at end of file
lib/widgets/popover/cupertino_popover.dart
浏览文件 @ 6d55157a
......@@ -32,8 +32,8 @@ class CupertinoPopoverButton extends StatelessWidget{
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: (){
var offset = WidgetUtils.getWidgetLocalToGlobal(context);
var bounds = WidgetUtils.getWidgetBounds(context);
var offset = WidgetUtil.getWidgetLocalToGlobal(context);
var bounds = WidgetUtil.getWidgetBounds(context);
var body = popoverBody;
showGeneralDialog(
context: context,
......
pubspec.lock
浏览文件 @ 6d55157a
......@@ -64,11 +64,25 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.14.5"
flustars:
dependency: "direct main"
description:
name: flustars
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.1.3"
flutter:
dependency: "direct main"
description: flutter
source: sdk
version: "0.0.0"
flutter_spinkit:
dependency: "direct main"
description:
name: flutter_spinkit
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.0"
flutter_test:
dependency: "direct dev"
description: flutter
......@@ -235,6 +249,13 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.0+1"
shared_preferences:
dependency: transitive
description:
name: shared_preferences
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.4.3"
shelf:
dependency: transitive
description:
......@@ -310,6 +331,13 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.4"
synchronized:
dependency: transitive
description:
name: synchronized
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.5.3"
term_glyph:
dependency: transitive
description:
......@@ -374,4 +402,5 @@ packages:
source: hosted
version: "2.1.15"
sdks:
dart: ">=2.0.0-dev.68.0 <3.0.0"
dart: ">=2.0.0 <3.0.0"
flutter: ">=0.1.4 <2.0.0"
pubspec.yaml
浏览文件 @ 6d55157a
......@@ -11,6 +11,10 @@ dependencies:
flutter:
sdk: flutter
flustars: 0.1.3
flutter_spinkit: "^2.1.0"
dev_dependencies:
flutter_test:
sdk: flutter
......@@ -22,8 +26,8 @@ dev_dependencies:
flutter:
# To add assets to your package, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
assets:
- assets/images/loading.png
# - images/a_dot_ham.jpeg
#
# For details regarding assets in packages, see
......@@ -37,10 +41,10 @@ flutter:
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
fonts:
- family: CoolUIIcons
fonts:
- asset: assets/fonts/CoolUI.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论