Skip to content

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

发布0.0.9版本

上级 419141d6
隐藏空白字符变更
内嵌 并排
正在显示 包含 149 行增加 和 76 行删除
CHANGELOG.md
浏览文件 @ 060afb58
......@@ -2,6 +2,8 @@
* TODO: Describe initial release.
## [0.0.9] - TODO: 修改了CupertionPopover动画
## [0.0.9] - TODO: 添加了一些控件,改进了CupertionPopover
* TODO: 修改了修改了CupertionPopover动画,添加了CupertinoPopoverMenuItem控件
\ No newline at end of file
* TODO: 添加了CupertinoPopoverMenuList
* TODO: 添加了CupertinoPopoverMenuItem
* TODO: 修改了CupertionPopover动画,
\ No newline at end of file
README.md
浏览文件 @ 060afb58
......@@ -6,7 +6,7 @@ Usage
Add this to your package's pubspec.yaml file:
``` yaml
dependencies:
cool_ui: "^0.0.8"
cool_ui: "^0.0.9"
```
## CupertinoPopover
......@@ -36,3 +36,16 @@ CupertinoPopoverButton(
popoverWidth: 100.0,
popoverHeight: 100.0);
```
## CupertinoPopoverMenuList,CupertinoPopoverMenuItem
用于快速搭建一个弹出的菜单项
#### 案例核心代码
```dart
CupertinoPopoverMenuList(
children: <Widget>[
CupertinoPopoverMenuItem(leading: Icon(Icons.add),child: Text("新增"),),
CupertinoPopoverMenuItem(leading: Icon(Icons.edit),child: Text("修改"),),
CupertinoPopoverMenuItem(leading: Icon(Icons.delete),child: Text("删除"),)
],
)
```
example/lib/main.dart
浏览文件 @ 060afb58
......@@ -19,7 +19,7 @@ class MyApp extends StatelessWidget {
// "hot reload" (press "r" in the console where you ran "flutter run",
// or press Run > Flutter Hot Reload in IntelliJ). Notice that the
// counter didn't reset back to zero; the application is not restarted.
primarySwatch: Colors.blue,
primarySwatch: Colors.blue
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
......
example/lib/pages/PopoverDemo.dart
浏览文件 @ 060afb58
import 'package:cool_ui_example/cool_u_i_example_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cool_ui/cool_ui.dart';
class PopoverDemo extends StatefulWidget{
@override
State<StatefulWidget> createState() {
......@@ -49,25 +49,30 @@ class PopoverDemoState extends State<PopoverDemo>{
}
Widget _buildPopoverButton(String btnTitle,String bodyMessage){
return CupertinoPopoverButton(
child: Container(
margin: EdgeInsets.all(20.0),
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)),
),
popoverBody:Container(
// color: Colors.lightBlue,
width: 100.0,
height: 100.0,
child: Text(bodyMessage),
),
popoverWidth: 100.0,
popoverHeight: 100.0);
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
lib/cool_ui.dart
浏览文件 @ 060afb58
......@@ -4,4 +4,5 @@ import 'package:flutter/material.dart';
part 'utils/screen_utils.dart';
part 'utils/widget_utils.dart';
part 'popover/cupertino_popover.dart';
\ No newline at end of file
part 'popover/cupertino_popover.dart';
part 'popover/cupertino_popover_menu_item.dart';
\ No newline at end of file
lib/popover/cupertino_popover.dart
浏览文件 @ 060afb58
......@@ -3,6 +3,7 @@ part of cool_ui;
class CupertinoPopoverButton extends StatelessWidget{
final Widget child;
final Widget popoverBody;
final WidgetBuilder popoverBuild;
final double popoverWidth;
final double popoverHeight;
final Color popoverColor;
......@@ -10,12 +11,15 @@ class CupertinoPopoverButton extends StatelessWidget{
final Duration transitionDuration;
const CupertinoPopoverButton({
@required this.child,
@required this.popoverBody,
this.popoverBody,
this.popoverBuild,
this.popoverColor=Colors.white,
@required this.popoverWidth,
@required this.popoverHeight,
this.transitionDuration=const Duration(milliseconds: 200),
this.radius=13.0});
this.radius=8.0}):
assert(popoverBody != null || popoverBuild != null),
assert(!(popoverBody != null && popoverBuild != null));
@override
......@@ -24,26 +28,16 @@ class CupertinoPopoverButton extends StatelessWidget{
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: (){
var offset = WidgetUtils.getWidgetLocalToGlobal(context);
var bounds = WidgetUtils.getWidgetBounds(context);
var body = popoverBody;
showGeneralDialog(
context: context,
pageBuilder: (BuildContext buildContext, Animation<double> animation, Animation<double> secondaryAnimation) {
final ThemeData theme = Theme.of(context, shadowThemeOnly: true);
var offset = WidgetUtils.getWidgetLocalToGlobal(context);
var bounds = WidgetUtils.getWidgetBounds(context);
final Widget pageChild = CupertinoPopover(
transitionDuration: transitionDuration,
attachRect:Rect.fromLTWH(offset.dx, offset.dy, bounds.width, bounds.height),
child: popoverBody,
width: popoverWidth,
height: popoverHeight,
color: popoverColor,
context: context,
radius: radius,);
return Builder(
builder: (BuildContext context) {
return theme != null
? Theme(data: theme, child: pageChild)
: pageChild;
return Container();
}
);
......@@ -52,21 +46,31 @@ class CupertinoPopoverButton extends StatelessWidget{
barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
barrierColor: Colors.black54,
transitionDuration: transitionDuration,
transitionBuilder: _buildMaterialDialogTransitions,);
transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
if(body == null){
body = popoverBuild(context);
}
return FadeTransition(
opacity: CurvedAnimation(
parent: animation,
curve: Curves.easeOut,
),
child: CupertinoPopover(
attachRect:Rect.fromLTWH(offset.dx, offset.dy, bounds.width, bounds.height),
child: body,
width: popoverWidth,
height: popoverHeight,
color: popoverColor,
context: context,
radius: radius,
doubleAnimation: animation,
),
);
},);
},
child: child,
);
}
Widget _buildMaterialDialogTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(
opacity: CurvedAnimation(
parent: animation,
curve: Curves.easeOut,
),
child: child,
);
}
}
......@@ -77,7 +81,7 @@ class CupertinoPopover extends StatefulWidget {
final double height;
final Color color;
final double radius;
final Duration transitionDuration;
final Animation<double> doubleAnimation;
CupertinoPopover({
@required this.attachRect,
......@@ -85,9 +89,9 @@ class CupertinoPopover extends StatefulWidget {
@required this.width,
@required this.height,
this.color=Colors.white,
this.transitionDuration = const Duration(milliseconds: 150),
@required BuildContext context,
this.radius=13.0}):super(){
this.doubleAnimation,
this.radius=8.0}):super(){
ScreenUtil.getInstance().init(context);
}
......@@ -96,15 +100,15 @@ class CupertinoPopover extends StatefulWidget {
}
class CupertinoPopoverState extends State<CupertinoPopover> with TickerProviderStateMixin{
static const double _arrowWidth = 26.0;
static const double _arrowHeight = 13.0;
static const double _arrowWidth = 12.0;
static const double _arrowHeight = 8.0;
double left;
double top;
Rect _arrowRect;
Rect _bodyRect;
Animation<double> doubleAnimation;
AnimationController animation;
// AnimationController animation;
/// 是否箭头向上
bool isArrowUp;
......@@ -115,15 +119,15 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider
isArrowUp = ScreenUtil.screenHeight > widget.attachRect.bottom + widget.height + _arrowWidth;
super.initState();
calcRect();
animation = new AnimationController(
duration: widget.transitionDuration,
vsync: this
);
// Tween({T begin, T end })：创建tween（补间）
doubleAnimation = new Tween<double>(begin: 0.0, end: 1.0).animate(animation)..addListener((){
setState((){});
});
animation.forward(from: 0.0);
// animation = new AnimationController(
// duration: widget.transitionDuration,
// vsync: this
// );
// // Tween({T begin, T end })：创建tween（补间）
// doubleAnimation = new Tween<double>(begin: 0.0, end: 1.0).animate(animation)..addListener((){
// setState((){});
// });
// animation.forward(from: 0.0);
}
@override
......@@ -131,7 +135,7 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider
var bodyMiddleX = _bodyRect.left + _bodyRect.width / 2; // 计算Body的X轴中间点
var arrowMiddleX = _arrowRect.left + _arrowRect.width /2; //计算箭头的X轴中间点
var leftOffset = (arrowMiddleX - bodyMiddleX) * (1 - doubleAnimation.value); //计算X轴缩小的偏移值
var leftOffset = (arrowMiddleX - bodyMiddleX) * (1 - widget.doubleAnimation.value); //计算X轴缩小的偏移值
return Stack(
children: <Widget>[
Positioned(
......@@ -139,7 +143,7 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider
top:top,
child:ScaleTransition(
alignment: isArrowUp?Alignment.topCenter:Alignment.bottomCenter,
scale: doubleAnimation,
scale: widget.doubleAnimation,
child: ClipPath(
clipper:ArrowCliper(
arrowRect:_arrowRect,
......
lib/popover/cupertino_popover_menu_item.dart
浏览文件 @ 060afb58
import 'package:flutter/material.dart';
part of cool_ui;
class CupertinoPopoverMenuList extends StatelessWidget{
final List<Widget> children;
const CupertinoPopoverMenuList({this.children});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: children.length * 2 - 1,
itemBuilder: (context,int i){
if(i.isOdd){
// 在每一列之前，添加一个1像素高的分隔线widget
return const Divider(height: 1.0,);
}
final int index=i ~/2;
return children[index];
},
padding: EdgeInsets.all(0.0),
);
}
}
class CupertinoPopoverMenuItem extends StatelessWidget{
final Widget leading;
......@@ -10,7 +34,29 @@ class CupertinoPopoverMenuItem extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
List<Widget> widgets = [];
if(leading != null){
widgets.add(Container(
padding: EdgeInsets.only(left:5.0,right: 5.0),
width: 35.0,
height: 35.0,
child: IconTheme(
data:IconThemeData(color: Color(0xff007aff),size: 20.0),
child: leading
),
));
}
widgets.add(Expanded(child: DefaultTextStyle(style: TextStyle(
color: Color(0xff007aff),
fontSize: 17.0
), child: child)));
return Padding(
padding: EdgeInsets.only(top:2.5,bottom: 2.5),
child: Row(
children: widgets
),
);
}
}
\ No newline at end of file
pubspec.yaml
浏览文件 @ 060afb58
name: cool_ui
description: 用flutter实现一些我认为好看的UI控件
version: 0.0.8
version: 0.0.9
author: Kevin <liangkaikevin@gmail.com>
homepage: https://github.com/Im-Kevin/cool_ui
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论