Skip to content

Commit 4049693

Browse files
toly1994328toly1994328
committed
✨ 添加TextButton、ElevatedButton、OutlinedButton
1 parent 8f61678 commit 4049693

File tree

10 files changed

+327
-1
lines changed

10 files changed

+327
-1
lines changed

‎assets/flutter.db‎

7.04 KB
Binary file not shown.

‎lib/views/widgets/MultiChildRenderObjectWidget/Stack/node1_base.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ class CustomStack extends StatelessWidget {
4848
textDirection: TextDirection.rtl,
4949
fit: StackFit.loose,
5050
alignment: Alignment.topRight,
51-
// overflow: Overflow.clip, // 1.22.0-10.0.pre.251被去除
51+
// overflow: Overflow.clip, // 1.22.0 被去除
5252
children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
5353
),
5454
);

‎lib/views/widgets/StatefulWidget/ElevatedButton/node1_base.dart‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import 'package:flutter/material.dart';
2+
3+
/// create by 张风捷特烈 on 2020/9/21
4+
/// contact me by email [email protected]
5+
/// 说明: 354 ElevatedButton Material风格的升起按钮，表现和RaisedButton类似。可通过样式更改边框、颜色、阴影等属性。
6+
// {
7+
// "widgetId": 354,
8+
// "name": 'ElevatedButton基本使用',
9+
// "priority": 1,
10+
// "subtitle":
11+
// "【child】 : 是否具有滚动主体 【Widget】\n"
12+
// "【onPressed】 : 点击事件 【VoidCallback】\n"
13+
// "【onLongPress】 : 长按事件 【VoidCallback】",
14+
// }
15+
16+
class ElevatedButtonDemo extends StatelessWidget {
17+
@override
18+
Widget build(BuildContext context) {
19+
return Container(
20+
alignment: Alignment.center,
21+
height: 60,
22+
child: Wrap(
23+
spacing: 20,
24+
children: [
25+
ElevatedButton(
26+
child: Text('ElevatedButton'),
27+
onPressed: _onPressed,
28+
onLongPress: _onLongPress,
29+
),
30+
ElevatedButton(
31+
child: Text('禁用按钮'),
32+
onPressed: null,
33+
onLongPress: null,
34+
),
35+
],
36+
));
37+
}
38+
39+
_onPressed() {}
40+
41+
_onLongPress() {}
42+
}

‎lib/views/widgets/StatefulWidget/ElevatedButton/node2_style.dart‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import 'package:flutter/material.dart';
2+
3+
/// create by 张风捷特烈 on 2020/9/21
4+
/// contact me by email [email protected]
5+
/// 说明:
6+
// {
7+
// "widgetId": 354,
8+
// "name": 'ElevatedButton样式',
9+
// "priority": 2,
10+
// "subtitle":
11+
// "【style】 : 按钮样式 【ButtonStyle】\n"
12+
// "【focusNode】 : 焦点 【FocusNode】\n"
13+
// "【clipBehavior】 : 裁剪行为 【Clip】\n"
14+
// "【autofocus】 : 自动聚焦 【bool】",
15+
// }
16+
17+
class ElevatedButtonStyleDemo extends StatelessWidget {
18+
@override
19+
Widget build(BuildContext context) {
20+
return Container(
21+
alignment: Alignment.center,
22+
child: Wrap(
23+
spacing: 10,
24+
children: [
25+
ElevatedButton(
26+
style: TextButton.styleFrom(
27+
backgroundColor: Colors.orange,
28+
primary: Colors.white,
29+
elevation: 2,
30+
shadowColor: Colors.orangeAccent),
31+
child: Text('ElevatedButton样式'),
32+
onPressed: _onPressed,
33+
onLongPress: _onLongPress,
34+
),
35+
ElevatedButton(
36+
style: TextButton.styleFrom(
37+
backgroundColor: Colors.white,
38+
primary: Colors.black,
39+
side: BorderSide(color: Colors.blue,width: 1),
40+
shape: RoundedRectangleBorder(
41+
borderRadius: BorderRadius.all(Radius.circular(10))
42+
),
43+
// elevation: 2,
44+
shadowColor: Colors.orangeAccent),
45+
child: Text('ElevatedButton边线'),
46+
autofocus: false,
47+
onPressed: _onPressed,
48+
onLongPress: _onLongPress,
49+
),
50+
],
51+
),
52+
);
53+
}
54+
55+
_onPressed() {}
56+
57+
_onLongPress() {}
58+
}

‎lib/views/widgets/StatefulWidget/OutlinedButton/node1_base.dart‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import 'package:flutter/material.dart';
2+
3+
/// create by 张风捷特烈 on 2020/9/21
4+
/// contact me by email [email protected]
5+
/// 说明: 355 OutlinedButton Material风格的边线按钮，表现和OutlineButton类似。可通过样式更改边框、颜色、阴影等属性。
6+
// {
7+
// "widgetId": 355,
8+
// "name": 'OutlinedButton基本使用',
9+
// "priority": 1,
10+
// "subtitle":
11+
// "【child】 : 是否具有滚动主体 【Widget】\n"
12+
// "【onPressed】 : 点击事件 【VoidCallback】\n"
13+
// "【onLongPress】 : 长按事件 【VoidCallback】",
14+
// }
15+
16+
class OutlinedButtonDemo extends StatelessWidget {
17+
@override
18+
Widget build(BuildContext context) {
19+
return Container(
20+
alignment: Alignment.center,
21+
height: 60,
22+
child: Wrap(
23+
spacing: 20,
24+
children: [
25+
OutlinedButton(
26+
child: Text('OutlinedButton'),
27+
onPressed: _onPressed,
28+
onLongPress: _onLongPress,
29+
),
30+
OutlinedButton(
31+
child: Text('禁用按钮'),
32+
onPressed: null,
33+
onLongPress: null,
34+
),
35+
],
36+
));
37+
}
38+
39+
_onPressed() {}
40+
41+
_onLongPress() {}
42+
}

‎lib/views/widgets/StatefulWidget/OutlinedButton/node2_style.dart‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import 'package:flutter/material.dart';
2+
3+
/// create by 张风捷特烈 on 2020/9/21
4+
/// contact me by email [email protected]
5+
/// 说明:
6+
// {
7+
// "widgetId": 355,
8+
// "name": 'OutlinedButton样式',
9+
// "priority": 2,
10+
// "subtitle":
11+
// "【style】 : 按钮样式 【ButtonStyle】\n"
12+
// "【focusNode】 : 焦点 【FocusNode】\n"
13+
// "【clipBehavior】 : 裁剪行为 【Clip】\n"
14+
// "【autofocus】 : 自动聚焦 【bool】",
15+
// }
16+
17+
class OutlinedButtonStyleDemo extends StatelessWidget {
18+
@override
19+
Widget build(BuildContext context) {
20+
return Container(
21+
alignment: Alignment.center,
22+
child: Wrap(
23+
spacing: 10,
24+
children: [
25+
OutlinedButton(
26+
style: TextButton.styleFrom(
27+
backgroundColor: Colors.orange,
28+
primary: Colors.white,
29+
elevation: 2,
30+
shadowColor: Colors.orangeAccent),
31+
child: Text('ElevatedButton样式'),
32+
onPressed: _onPressed,
33+
onLongPress: _onLongPress,
34+
),
35+
OutlinedButton(
36+
style: TextButton.styleFrom(
37+
backgroundColor: Colors.white,
38+
primary: Colors.black,
39+
side: BorderSide(color: Colors.blue,width: 1),
40+
shape: RoundedRectangleBorder(
41+
borderRadius: BorderRadius.all(Radius.circular(10))
42+
),
43+
// elevation: 2,
44+
shadowColor: Colors.orangeAccent),
45+
child: Text('ElevatedButton边线'),
46+
autofocus: false,
47+
onPressed: _onPressed,
48+
onLongPress: _onLongPress,
49+
),
50+
],
51+
),
52+
);
53+
}
54+
55+
_onPressed() {}
56+
57+
_onLongPress() {}
58+
}

‎lib/views/widgets/StatefulWidget/TextButton/node1_base.dart‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import 'package:flutter/material.dart';
2+
3+
4+
/// create by 张风捷特烈 on 2020/9/21
5+
/// contact me by email [email protected]
6+
/// 说明: 353 TextButton Material风格的文字按钮，默认只有文字，点击时有水波纹。可通过样式更改边框、颜色、阴影等属性。
7+
// {
8+
// "widgetId": 353,
9+
// "name": 'TextButton基本使用',
10+
// "priority": 1,
11+
// "subtitle":
12+
// "【child】 : 是否具有滚动主体 【Widget】\n"
13+
// "【onPressed】 : 点击事件 【VoidCallback】\n"
14+
// "【onLongPress】 : 长按事件 【VoidCallback】",
15+
// }
16+
17+
class TextButtonDemo extends StatelessWidget {
18+
@override
19+
Widget build(BuildContext context) {
20+
return Container(
21+
alignment: Alignment.center,
22+
height: 60,
23+
child: Wrap(
24+
spacing: 20,
25+
children: [
26+
TextButton(
27+
child: Text('TextButton 文字'),
28+
onPressed: _onPressed,
29+
onLongPress: _onLongPress,
30+
),
31+
TextButton(
32+
child: Text('TextButton 禁用'),
33+
onPressed: null,
34+
onLongPress: null,
35+
),
36+
],
37+
));
38+
}
39+
40+
_onPressed() {}
41+
42+
_onLongPress() {}
43+
}

‎lib/views/widgets/StatefulWidget/TextButton/node2_style.dart‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import 'package:flutter/material.dart';
2+
3+
/// create by 张风捷特烈 on 2020/9/21
4+
/// contact me by email [email protected]
5+
/// 说明:
6+
// {
7+
// "widgetId": 353,
8+
// "name": 'TextButton样式',
9+
// "priority": 2,
10+
// "subtitle":
11+
// "【style】 : 按钮样式 【ButtonStyle】\n"
12+
// "【focusNode】 : 焦点 【FocusNode】\n"
13+
// "【clipBehavior】 : 裁剪行为 【Clip】\n"
14+
// "【autofocus】 : 自动聚焦 【bool】",
15+
// }
16+
17+
class TextButtonStyleDemo extends StatelessWidget {
18+
@override
19+
Widget build(BuildContext context) {
20+
return Container(
21+
alignment: Alignment.center,
22+
child: Wrap(
23+
spacing: 10,
24+
children: [
25+
TextButton(
26+
style: TextButton.styleFrom(
27+
backgroundColor: Colors.blue,
28+
padding: EdgeInsets.symmetric(horizontal: 8),
29+
primary: Colors.white,
30+
elevation: 2,
31+
shadowColor: Colors.orangeAccent),
32+
child: Text('TextButton 样式'),
33+
onPressed: _onPressed,
34+
onLongPress: _onLongPress,
35+
),
36+
TextButton(
37+
style: TextButton.styleFrom(
38+
backgroundColor: Colors.white,
39+
primary: Colors.black,
40+
side: BorderSide(color: Colors.blue,width: 1),
41+
shape: RoundedRectangleBorder(
42+
borderRadius: BorderRadius.all(Radius.circular(10))
43+
),
44+
// elevation: 2,
45+
shadowColor: Colors.orangeAccent),
46+
child: Text('TextButton 边线'),
47+
autofocus: false,
48+
onPressed: _onPressed,
49+
onLongPress: _onLongPress,
50+
),
51+
],
52+
),
53+
);
54+
}
55+
56+
_onPressed() {}
57+
58+
_onLongPress() {}
59+
}

‎lib/views/widgets/exp/stateful_unit.dart‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,12 @@ export '../StatefulWidget/WidgetsApp/node1_base.dart' hide HomePage;
145145
export '../StatefulWidget/WidgetInspector/node1_base.dart' hide HomePage;
146146
export '../StatefulWidget/AnimatedTheme/node1_base.dart';
147147
export '../StatefulWidget/AnimatedPhysicalModel/node1_base.dart';
148+
149+
export '../StatefulWidget/TextButton/node1_base.dart';
150+
export '../StatefulWidget/TextButton/node2_style.dart';
151+
152+
export '../StatefulWidget/ElevatedButton/node1_base.dart';
153+
export '../StatefulWidget/ElevatedButton/node2_style.dart';
154+
155+
export '../StatefulWidget/OutlinedButton//node1_base.dart';
156+
export '../StatefulWidget/OutlinedButton/node2_style.dart';

‎lib/views/widgets/widgets_map.dart‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,21 @@ class WidgetsMap {
4242
CustomCard(),
4343
ShapeCard(),
4444
];
45+
case "ElevatedButton":
46+
return [
47+
ElevatedButtonDemo(),
48+
ElevatedButtonStyleDemo(),
49+
];
50+
case "TextButton":
51+
return [
52+
TextButtonDemo(),
53+
TextButtonStyleDemo(),
54+
];
55+
case "OutlinedButton":
56+
return [
57+
OutlinedButtonDemo(),
58+
OutlinedButtonStyleDemo(),
59+
];
4560
case "FlutterLogo":
4661
return [
4762
CustomFlutterLogo(),

0 commit comments

Comments
 (0)