Skip to content

Commit a66a9d0

Browse files
author
xuyingjun
committed
Readme
1 parent 373d72d commit a66a9d0

File tree

3 files changed

+317
-30
lines changed

3 files changed

+317
-30
lines changed

Diff for: ‎README.md

+31-29
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22

33
[![pub package](https://img.shields.io/pub/v/flutter_custom_dialog.svg)](https://pub.dev/packages/flutter_custom_dialog)
44

5-
对全局弹窗的功能封装，用语义化的方式对弹窗内部的内容进行填充，目前提供的功能
5+
**[Lanuage ~~]** [English](README.md) | [中文文档](README_CN.md)
66

7-
1. 支持少数语义化组件的方法，填充弹窗内部的组件内容
8-
2. 支持自定义语义化组件的方法，供开发者自由填充弹窗内部的组件内容
9-
3. 支持设置弹窗背景色、前景色、位置、动画、点击外部消失等功能，具体看下文
7+
Global dialog function encapsulation, with a semantic way to fill the content inside the dialog, the current function provided
8+
9+
1. Support for a few semantic component methods to populate the component content inside dialog
10+
2. Support for customizing semantic components for developers to freely populate component content inside dialog
11+
3. Support setting dialog background color, foreground color, position, animation, click the external disappear and other functions, see the details below
1012

1113
## 🎖 Installing
1214

@@ -139,14 +141,14 @@ import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
139141
<br />
140142
customIn
141143
<br />
142-
✅ 支持自定义动画
144+
✅ Support for custom animations
143145
</td>
144146
</tr>
145147
</table>
146148

147149
## ⚡ Dialog Property
148150

149-
弹窗的属性设置可以通过成员变量的方法去调用，具体详见下表
151+
dialog property Settings can be called through the method of member variables, as detailed in the following table
150152

151153
```dart
152154
YYDialog YYDialogDemo(BuildContext context) {
@@ -165,24 +167,24 @@ YYDialog YYDialogDemo(BuildContext context) {
165167
}
166168
```
167169

168-
支持的属性
170+
Supported attributes
169171

170172
property|description|default
171173
--|--|--|
172-
width|弹窗宽度|0
173-
height|弹窗高度|自适应组件高度
174-
duration|弹窗动画出现的时间|250毫秒
175-
gravity|弹窗出现的位置|居中
176-
barrierColor|弹窗外的背景色|30%黑色
177-
backgroundColor|弹窗内的背景色|白色
178-
borderRadius|弹窗圆角|0.0
179-
constraints|弹窗约束|最小宽高不低于10%
180-
animatedFunc|弹窗出现的动画|从中间出现
181-
barrierDismissible|是否点击弹出外部消失|true
174+
width|Dialog width|0
175+
height|Dialog height|Adaptive component height
176+
duration|Dialog animation time|250 ms
177+
gravity|Where the dialog appears|center
178+
barrierColor|Dialog barrierColor|30% of black
179+
backgroundColor|Dialog backgroundColor|white
180+
borderRadius|Dialog borderRadius|0.0
181+
constraints|Dialog constraints|Minimum width and height not less than 10%
182+
animatedFunc|Animation of dialog|Emerge from the middle
183+
barrierDismissible|Whether to click to pop up the external disappear|true
182184

183185
## ⚡ Semantic Widget
184186

185-
弹窗内部的组件内容提前通过语义化的函数封装好常用的组件，以便快速构建出弹窗，具体见下表
187+
The contents of the components inside the dialog are encapsulated by semantic functions in advance to quickly build the dialog, as shown in the following table
186188

187189
```dart
188190
YYDialog YYAlertDialogWithDivider(BuildContext context) {
@@ -221,25 +223,25 @@ YYDialog YYAlertDialogWithDivider(BuildContext context) {
221223
}
222224
```
223225

224-
支持的语义化组件
226+
Semantic components supported
225227

226228
method|description
227229
--|--|
228-
text|文本控件
229-
doubleButton|双按钮控件
230-
listViewOfListTile|列表Tile组件
231-
listViewOfRadioButton|列表按钮组件
232-
divider|分割线组件
233-
widget|自定义语义化组件
230+
text|text widget
231+
doubleButton|two-button widget
232+
listViewOfListTile|listTile widget
233+
listViewOfRadioButton|listRadio widget
234+
divider|divider widget
235+
widget|custom semantic widget
234236

235237
## ⚡ Custom Widget
236238

237-
自定义弹窗内部组件内容
239+
Customize dialog interior component content
238240

239-
* 由于当前已有的语义化组件只是辅助快速搭建UI，在实际项目开发中远远不能满足需求
240-
* 所以提供了自定义语义化组件的插入，由开发者自行将组件加入到弹窗内
241+
* Since the existing semantic components only assist in the rapid UI construction, they are far from meeting the requirements in actual project development
242+
* So it provides the ability to insert custom semantic components into dialog
241243

242-
> 通过`widget()`将组件插入弹窗
244+
> Insert the component into the dialog through 'widget()'
243245
244246
```dart
245247
YYDialog YYDialogDemo(BuildContext context) {

Diff for: ‎README_CN.md

+285
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
# ✨ flutter_custom_dialog
2+
3+
[![pub package](https://img.shields.io/pub/v/flutter_custom_dialog.svg)](https://pub.dev/packages/flutter_custom_dialog)
4+
5+
对全局弹窗的功能封装，用语义化的方式对弹窗内部的内容进行填充，目前提供的功能
6+
7+
1. 支持少数语义化组件的方法，填充弹窗内部的组件内容
8+
2. 支持自定义语义化组件的方法，供开发者自由填充弹窗内部的组件内容
9+
3. 支持设置弹窗背景色、前景色、位置、动画、点击外部消失等功能，具体看下文
10+
11+
## 🎖 Installing
12+
13+
**1、install**
14+
15+
```yaml
16+
dependencies:
17+
flutter_custom_dialog: ^1.0.0
18+
```
19+
20+
**2、import**
21+
22+
```dart
23+
import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
24+
```
25+
26+
## 🎖 Example
27+
28+
> dialog_demo
29+
30+
<table>
31+
<tr>
32+
<td align="center">
33+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/png/1.png" width="150px">
34+
<br />
35+
divider
36+
<br />
37+
✅
38+
</td>
39+
<td align="center">
40+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/png/2.png" width="150px">
41+
<br />
42+
body
43+
<br />
44+
✅
45+
</td>
46+
<td align="center">
47+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/png/3.png" width="150px">
48+
<br />
49+
head&body
50+
<br />
51+
✅
52+
</td>
53+
<td align="center">
54+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/png/4.png" width="150px">
55+
<br />
56+
listTile
57+
<br />
58+
✅
59+
</td>
60+
<td align="center">
61+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/png/5.png" width="150px">
62+
<br />
63+
ListRadio
64+
<br />
65+
✅
66+
</td>
67+
</tr>
68+
</table>
69+
70+
> dialog_gravity
71+
72+
<table>
73+
<tr>
74+
<td align="center">
75+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/1.gif" width="150px">
76+
<br />
77+
bottom
78+
<br />
79+
✅
80+
</td>
81+
<td align="center">
82+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/2.gif" width="150px">
83+
<br />
84+
top
85+
<br />
86+
✅
87+
</td>
88+
<td align="center">
89+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/3.gif" width="150px">
90+
<br />
91+
left
92+
<br />
93+
✅
94+
</td>
95+
<td align="center">
96+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/4.gif" width="150px">
97+
<br />
98+
right
99+
<br />
100+
✅
101+
</td>
102+
<td align="center">
103+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/5.gif" width="150px">
104+
<br />
105+
center
106+
<br />
107+
✅
108+
</td>
109+
</tr>
110+
</table>
111+
112+
> dialog_animation
113+
114+
<table>
115+
<tr>
116+
<td align="center">
117+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/6.gif" width="150px">
118+
<br />
119+
scaleIn
120+
<br />
121+
✅
122+
</td>
123+
<td align="center">
124+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/7.gif" width="150px">
125+
<br />
126+
fadeIn
127+
<br />
128+
✅
129+
</td>
130+
<td align="center">
131+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/8.gif" width="150px">
132+
<br />
133+
rotateIn
134+
<br />
135+
✅
136+
</td>
137+
<td align="center">
138+
<img src="https://github.com/YYFlutter/flutter-custom-dialog/raw/master/image/gif/9.gif" width="150px">
139+
<br />
140+
customIn
141+
<br />
142+
✅ 支持自定义动画
143+
</td>
144+
</tr>
145+
</table>
146+
147+
## ⚡ Dialog Property
148+
149+
弹窗的属性设置可以通过成员变量的方法去调用，具体详见下表
150+
151+
```dart
152+
YYDialog YYDialogDemo(BuildContext context) {
153+
return YYDialog().build(context)
154+
..width = 220
155+
..height = 500
156+
..barrierColor = Colors.black.withOpacity(.3)
157+
..animatedFunc = (child, animation) {
158+
return ScaleTransition(
159+
child: child,
160+
scale: Tween(begin: 0.0, end: 1.0).animate(animation),
161+
);
162+
}
163+
..borderRadius = 4.0
164+
..show();
165+
}
166+
```
167+
168+
支持的属性
169+
170+
property|description|default
171+
--|--|--|
172+
width|弹窗宽度|0
173+
height|弹窗高度|自适应组件高度
174+
duration|弹窗动画出现的时间|250毫秒
175+
gravity|弹窗出现的位置|居中
176+
barrierColor|弹窗外的背景色|30%黑色
177+
backgroundColor|弹窗内的背景色|白色
178+
borderRadius|弹窗圆角|0.0
179+
constraints|弹窗约束|最小宽高不低于10%
180+
animatedFunc|弹窗出现的动画|从中间出现
181+
barrierDismissible|是否点击弹出外部消失|true
182+
183+
## ⚡ Semantic Widget
184+
185+
弹窗内部的组件内容提前通过语义化的函数封装好常用的组件，以便快速构建出弹窗，具体见下表
186+
187+
```dart
188+
YYDialog YYAlertDialogWithDivider(BuildContext context) {
189+
return YYDialog().build(context)
190+
..width = 220
191+
..borderRadius = 4.0
192+
..text(
193+
padding: EdgeInsets.all(25.0),
194+
alignment: Alignment.center,
195+
text: "确定要退出登录吗?",
196+
color: Colors.black,
197+
fontSize: 14.0,
198+
fontWeight: FontWeight.w500,
199+
)
200+
..divider()
201+
..doubleButton(
202+
padding: EdgeInsets.only(top: 10.0),
203+
gravity: Gravity.center,
204+
withDivider: true,
205+
text1: "取消",
206+
color1: Colors.redAccent,
207+
fontSize1: 14.0,
208+
fontWeight1: FontWeight.bold,
209+
onTap1: () {
210+
print("取消");
211+
},
212+
text2: "确定",
213+
color2: Colors.redAccent,
214+
fontSize2: 14.0,
215+
fontWeight2: FontWeight.bold,
216+
onTap2: () {
217+
print("确定");
218+
},
219+
)
220+
..show();
221+
}
222+
```
223+
224+
支持的语义化组件
225+
226+
method|description
227+
--|--|
228+
text|文本控件
229+
doubleButton|双按钮控件
230+
listViewOfListTile|列表Tile组件
231+
listViewOfRadioButton|列表按钮组件
232+
divider|分割线组件
233+
widget|自定义语义化组件
234+
235+
## ⚡ Custom Widget
236+
237+
自定义弹窗内部组件内容
238+
239+
* 由于当前已有的语义化组件只是辅助快速搭建UI，在实际项目开发中远远不能满足需求
240+
* 所以提供了自定义语义化组件的插入，由开发者自行将组件加入到弹窗内
241+
242+
> 通过`widget()`将组件插入弹窗
243+
244+
```dart
245+
YYDialog YYDialogDemo(BuildContext context) {
246+
return YYDialog().build(context)
247+
..width = 220
248+
..height = 500
249+
..widget(
250+
Padding(
251+
padding: EdgeInsets.all(0.0),
252+
child: Align(
253+
alignment: Alignment.centerLeft,
254+
child: Text(
255+
"",
256+
style: TextStyle(
257+
color: Colors.black,
258+
fontSize: 14.0,
259+
fontWeight: FontWeight.w100,
260+
),
261+
),
262+
),
263+
),
264+
)
265+
..show();
266+
}
267+
```
268+
269+
## Bugs/Requests
270+
271+
* If your application has problems, please submit your code and effect to Issue.
272+
* Pull request are also welcome.
273+
274+
## About
275+
276+
* QQ：510402535
277+
* QQ群：798874340
278+
* e-mail：[email protected]
279+
* g-mail：[email protected]
280+
* Blog：http://blog.csdn.net/qq_30379689
281+
* Github：https://github.com/AndroidHensen
282+
283+
## License
284+
285+
Apache License 2.0

0 commit comments

Comments
 (0)