liuxm/FlutterUnit
1
0
Fork 0
forked from lxm_flutter/FlutterUnit
Code Issues Pull Requests Projects Releases Wiki Activity

✨ 添加TextButton、ElevatedButton、OutlinedButton

Browse Source
This commit is contained in:
toly
2020-10-09 21:56:46 +08:00
parent 8f616784cb
commit 4049693a6a
10 changed files with 327 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/flutter.db
View File

Binary file not shown.

2
lib/views/widgets/MultiChildRenderObjectWidget/Stack/node1_base.dart
View File

@@ -48,7 +48,7 @@ class CustomStack extends StatelessWidget {
textDirection: TextDirection.rtl,
fit: StackFit.loose,
alignment: Alignment.topRight,
// overflow: Overflow.clip, // 1.22.0-10.0.pre.251被去除
// overflow: Overflow.clip, // 1.22.0 被去除
children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
),
);

42
lib/views/widgets/StatefulWidget/ElevatedButton/node1_base.dart Normal file
View File

@@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明: 354 ElevatedButton Material风格的升起按钮，表现和RaisedButton类似。可通过样式更改边框、颜色、阴影等属性。
// {
// "widgetId": 354,
// "name": 'ElevatedButton基本使用',
// "priority": 1,
// "subtitle":
// "【child】 : 是否具有滚动主体 【Widget】\n"
// "【onPressed】 : 点击事件 【VoidCallback】\n"
// "【onLongPress】 : 长按事件 【VoidCallback】",
// }
class ElevatedButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 60,
child: Wrap(
spacing: 20,
children: [
ElevatedButton(
child: Text('ElevatedButton'),
onPressed: _onPressed,
onLongPress: _onLongPress,
),
ElevatedButton(
child: Text('禁用按钮'),
onPressed: null,
onLongPress: null,
),
],
));
}
_onPressed() {}
_onLongPress() {}
}

58
lib/views/widgets/StatefulWidget/ElevatedButton/node2_style.dart Normal file
View File

@@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 354,
// "name": 'ElevatedButton样式',
// "priority": 2,
// "subtitle":
// "【style】 : 按钮样式 【ButtonStyle】\n"
// "【focusNode】 : 焦点 【FocusNode】\n"
// "【clipBehavior】 : 裁剪行为 【Clip】\n"
// "【autofocus】 : 自动聚焦 【bool】",
// }
class ElevatedButtonStyleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Wrap(
spacing: 10,
children: [
ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: Colors.orange,
primary: Colors.white,
elevation: 2,
shadowColor: Colors.orangeAccent),
child: Text('ElevatedButton样式'),
onPressed: _onPressed,
onLongPress: _onLongPress,
),
ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: Colors.white,
primary: Colors.black,
side: BorderSide(color: Colors.blue,width: 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
// elevation: 2,
shadowColor: Colors.orangeAccent),
child: Text('ElevatedButton边线'),
autofocus: false,
onPressed: _onPressed,
onLongPress: _onLongPress,
),
],
),
);
}
_onPressed() {}
_onLongPress() {}
}

42
lib/views/widgets/StatefulWidget/OutlinedButton/node1_base.dart Normal file
View File

@@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明: 355 OutlinedButton Material风格的边线按钮，表现和OutlineButton类似。可通过样式更改边框、颜色、阴影等属性。
// {
// "widgetId": 355,
// "name": 'OutlinedButton基本使用',
// "priority": 1,
// "subtitle":
// "【child】 : 是否具有滚动主体 【Widget】\n"
// "【onPressed】 : 点击事件 【VoidCallback】\n"
// "【onLongPress】 : 长按事件 【VoidCallback】",
// }
class OutlinedButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 60,
child: Wrap(
spacing: 20,
children: [
OutlinedButton(
child: Text('OutlinedButton'),
onPressed: _onPressed,
onLongPress: _onLongPress,
),
OutlinedButton(
child: Text('禁用按钮'),
onPressed: null,
onLongPress: null,
),
],
));
}
_onPressed() {}
_onLongPress() {}
}

58
lib/views/widgets/StatefulWidget/OutlinedButton/node2_style.dart Normal file
View File

@@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 355,
// "name": 'OutlinedButton样式',
// "priority": 2,
// "subtitle":
// "【style】 : 按钮样式 【ButtonStyle】\n"
// "【focusNode】 : 焦点 【FocusNode】\n"
// "【clipBehavior】 : 裁剪行为 【Clip】\n"
// "【autofocus】 : 自动聚焦 【bool】",
// }
class OutlinedButtonStyleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Wrap(
spacing: 10,
children: [
OutlinedButton(
style: TextButton.styleFrom(
backgroundColor: Colors.orange,
primary: Colors.white,
elevation: 2,
shadowColor: Colors.orangeAccent),
child: Text('ElevatedButton样式'),
onPressed: _onPressed,
onLongPress: _onLongPress,
),
OutlinedButton(
style: TextButton.styleFrom(
backgroundColor: Colors.white,
primary: Colors.black,
side: BorderSide(color: Colors.blue,width: 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
// elevation: 2,
shadowColor: Colors.orangeAccent),
child: Text('ElevatedButton边线'),
autofocus: false,
onPressed: _onPressed,
onLongPress: _onLongPress,
),
],
),
);
}
_onPressed() {}
_onLongPress() {}
}

43
lib/views/widgets/StatefulWidget/TextButton/node1_base.dart Normal file
View File

@@ -0,0 +1,43 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明: 353 TextButton Material风格的文字按钮，默认只有文字，点击时有水波纹。可通过样式更改边框、颜色、阴影等属性。
// {
// "widgetId": 353,
// "name": 'TextButton基本使用',
// "priority": 1,
// "subtitle":
// "【child】 : 是否具有滚动主体 【Widget】\n"
// "【onPressed】 : 点击事件 【VoidCallback】\n"
// "【onLongPress】 : 长按事件 【VoidCallback】",
// }
class TextButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 60,
child: Wrap(
spacing: 20,
children: [
TextButton(
child: Text('TextButton 文字'),
onPressed: _onPressed,
onLongPress: _onLongPress,
),
TextButton(
child: Text('TextButton 禁用'),
onPressed: null,
onLongPress: null,
),
],
));
}
_onPressed() {}
_onLongPress() {}
}

59
lib/views/widgets/StatefulWidget/TextButton/node2_style.dart Normal file
View File

@@ -0,0 +1,59 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 353,
// "name": 'TextButton样式',
// "priority": 2,
// "subtitle":
// "【style】 : 按钮样式 【ButtonStyle】\n"
// "【focusNode】 : 焦点 【FocusNode】\n"
// "【clipBehavior】 : 裁剪行为 【Clip】\n"
// "【autofocus】 : 自动聚焦 【bool】",
// }
class TextButtonStyleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
child: Wrap(
spacing: 10,
children: [
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 8),
primary: Colors.white,
elevation: 2,
shadowColor: Colors.orangeAccent),
child: Text('TextButton 样式'),
onPressed: _onPressed,
onLongPress: _onLongPress,
),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.white,
primary: Colors.black,
side: BorderSide(color: Colors.blue,width: 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
// elevation: 2,
shadowColor: Colors.orangeAccent),
child: Text('TextButton 边线'),
autofocus: false,
onPressed: _onPressed,
onLongPress: _onLongPress,
),
],
),
);
}
_onPressed() {}
_onLongPress() {}
}

9
lib/views/widgets/exp/stateful_unit.dart
View File

@@ -145,3 +145,12 @@ export '../StatefulWidget/WidgetsApp/node1_base.dart' hide HomePage;
export '../StatefulWidget/WidgetInspector/node1_base.dart' hide HomePage;
export '../StatefulWidget/AnimatedTheme/node1_base.dart';
export '../StatefulWidget/AnimatedPhysicalModel/node1_base.dart';
export '../StatefulWidget/TextButton/node1_base.dart';
export '../StatefulWidget/TextButton/node2_style.dart';
export '../StatefulWidget/ElevatedButton/node1_base.dart';
export '../StatefulWidget/ElevatedButton/node2_style.dart';
export '../StatefulWidget/OutlinedButton//node1_base.dart';
export '../StatefulWidget/OutlinedButton/node2_style.dart';

15
lib/views/widgets/widgets_map.dart
View File

@@ -42,6 +42,21 @@ class WidgetsMap {
CustomCard(),
ShapeCard(),
];
case "ElevatedButton":
return [
ElevatedButtonDemo(),
ElevatedButtonStyleDemo(),
];
case "TextButton":
return [
TextButtonDemo(),
TextButtonStyleDemo(),
];
case "OutlinedButton":
return [
OutlinedButtonDemo(),
OutlinedButtonStyleDemo(),
];
case "FlutterLogo":
return [
CustomFlutterLogo(),