flutter/flutter-go
1
0
Fork 0
mirror of https://github.com/alibaba/flutter-go.git synced 2025-06-03 08:17:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

merge devlop

Browse Source
This commit is contained in:
jianping.xwh
2019-01-08 19:18:12 +08:00
parent 49b86b4c70
commit 94bd8510c0
114 changed files with 6715 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
lib/widgets/elements/Form/Button/DropdownButton/demo.dart Normal file
View File

@ -0,0 +1,143 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: DropdownButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* DropdownButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class DropdownButtonDefault extends StatelessWidget {
List<DropdownMenuItem> generateItemList() {
List<DropdownMenuItem> items = new List();
DropdownMenuItem item1 = new DropdownMenuItem(
value: '张三', child: new Text('张三'));
DropdownMenuItem item2 = new DropdownMenuItem(
value: '李四', child: new Text('李四'));
DropdownMenuItem item3 = new DropdownMenuItem(
value: '王二', child: new Text('王二'));
DropdownMenuItem item4 = new DropdownMenuItem(
value: '麻子', child: new Text('麻子'));
items.add(item1);
items.add(item2);
items.add(item3);
items.add(item4);
return items;
}
var selectItemValue;
@override
Widget build(BuildContext context) {
return DropdownButton(
hint: new Text('下拉菜单选择一个人名'),
//设置这个value之后,选中对应位置的item，
//再次呼出下拉菜单，会自动定位item位置在当前按钮显示的位置处
value: selectItemValue,
items: generateItemList(),
onChanged: (T){
// setState(() {
// selectItemValue=T;
// });
},
);
}
}
List<DropdownMenuItem> getListData(){
List<DropdownMenuItem> items=new List();
DropdownMenuItem dropdownMenuItem1=new DropdownMenuItem(
child:new Text('1'),
value: '1',
);
items.add(dropdownMenuItem1);
DropdownMenuItem dropdownMenuItem2=new DropdownMenuItem(
child:new Text('2'),
value: '2',
);
items.add(dropdownMenuItem2);
DropdownMenuItem dropdownMenuItem3=new DropdownMenuItem(
child:new Text('3'),
value: '3',
);
items.add(dropdownMenuItem3);
DropdownMenuItem dropdownMenuItem4=new DropdownMenuItem(
child:new Text('4'),
value: '4',
);
items.add(dropdownMenuItem4);
DropdownMenuItem dropdownMenuItem5=new DropdownMenuItem(
child:new Text('5'),
value: '5',
);
items.add(dropdownMenuItem5);
DropdownMenuItem dropdownMenuItem6=new DropdownMenuItem(
child:new Text('6'),
value: '6',
);
items.add(dropdownMenuItem6);
DropdownMenuItem dropdownMenuItem7=new DropdownMenuItem(
child:new Text('7'),
value: '7',
);
items.add(dropdownMenuItem7);
DropdownMenuItem dropdownMenuItem8=new DropdownMenuItem(
child:new Text('8'),
value: '8',
);
items.add(dropdownMenuItem8);
DropdownMenuItem dropdownMenuItem9=new DropdownMenuItem(
child:new Text('9'),
value: '9',
);
items.add(dropdownMenuItem9);
DropdownMenuItem dropdownMenuItem10=new DropdownMenuItem(
child:new Text('10'),
value: '10',
);
items.add(dropdownMenuItem10);
return items;
}
var selectItemValue;
/*
* DropdownButton 自定义的实例
* */
class DropdownButtonCustom extends StatelessWidget {
final widget;
final parent;
const DropdownButtonCustom([this.widget,this.parent])
: super();
@override
Widget build(BuildContext context) {
return DropdownButton(
items: getListData(),
//当没有默认值的时候可以设置的提示
hint:Text('下拉选择你想要的数据'),
//下拉菜单选择完之后显示给用户的值
value: selectItemValue,
//下拉菜单item点击之后的回调
onChanged: (T){
parent.setState((){
selectItemValue = T;
});
},
//设置阴影的高度
elevation: 24,
style: TextStyle(//设置文本框里面文字的样式
color: Colors.red
),
// isDense: true,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
// 将下拉列表的内部内容设置为水平填充其父级
isExpanded:true,
iconSize: 50.0,//设置三角标icon的大小
);
}
}

102
lib/widgets/elements/Form/Button/DropdownButton/index.dart Normal file
View File

@ -0,0 +1,102 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: DropdownButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/DropdownButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as dropdownButton;
const String _dropdownText0 =
"""### **简介**
> Dropdown button “用于从项目列表中进行选择的按钮”
- 类型T是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常，使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法。。
""";
const String _dropdownText1 =
"""### **基本用法**
> 此示例显示一个包含四个项目的菜单
""";
const String _dropdownText2 =
"""### **进阶用法**
> 此示例尝试调整所有属性，展示出效果
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/DropdownButton';
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
//String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
//buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'DropdownButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/DropdownButton/demo.dart',
child: allDropdownButtons(context,this),
docUrl: 'https://docs.flutter.io/flutter/material/DropdownButton-class.html',
);
}
}
/**
* 所有的 DropdownButton 按钮
*/
Widget allDropdownButtons(BuildContext context,_DemoState that){
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _dropdownText0),
textAlignBar(_dropdownText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
dropdownButton.DropdownButtonDefault(),
],
),
textAlignBar(_dropdownText2),
SizedBox(height: 10.0),
dropdownButton.DropdownButtonCustom(context.widget,that),
SizedBox(height: 20.0)
])
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}

129
lib/widgets/elements/Form/Button/FlatButton/demo.dart Normal file
View File

@ -0,0 +1,129 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: FlatButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* FlatButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class FlatButtonDefault extends StatelessWidget {
final bool isDisabled;
const FlatButtonDefault([bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
return FlatButton(
// 文本内容
child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
onPressed: isDisabled ? () {} : null);
}
}
/*
* FlatButton.icon 默认按钮的实例
* Create a text button from a pair of widgets that serve as the button's icon and label
* isDisabled:是否是禁用
* */
class FlatButtonIconDefault extends StatelessWidget {
final bool isDisabled;
final IconData icon;
const FlatButtonIconDefault(
[bool this.isDisabled = true, IconData this.icon = Icons.add_circle])
: super();
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}
@override
Widget build(BuildContext context) {
return FlatButton.icon(
// 文本内容
icon: Icon(icon, size: 25.0, color: _randomColor()),
label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
onPressed: isDisabled
? () {
//_showMessage('点击了 FLAT BUTTON ', context);
}
: null);
}
}
/*
* FlatButton 自定义的实例
* */
class FlatButtonCustom extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const FlatButtonCustom([
String this.txt = '自定义按钮',
Color this.color = Colors.blueAccent,
ShapeBorder this.shape,
VoidCallback this.onPressed
]) :super();
@override
Widget build(BuildContext context) {
final _onPressed = onPressed;
return FlatButton(
// 文本内容
child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
// 按钮颜色
color: color,
// 按钮亮度
colorBrightness: Brightness.dark,
// 高亮时的背景色
//highlightColor: Colors.yellow,
// 失效时的背景色
disabledColor: Colors.grey,
// 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
textColor: Colors.white,
// 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
disabledTextColor: Colors.grey,
// 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，FlatButton，OutlineButton，它们是基于环境ButtonTheme配置的
//ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
textTheme: ButtonTextTheme.normal,
// 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
splashColor: Colors.deepPurple,
// 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
clipBehavior: Clip.antiAlias,
padding: new EdgeInsets.only(
bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
shape: (shape is ShapeBorder) ? shape : new Border.all(
// 设置边框样式
color: Colors.grey,
width: 2.0,
style: BorderStyle.solid,
),
// FlatButton 的点击事件
onPressed: () {
// Perform some action
if (_onPressed is VoidCallback) {
_onPressed();
}
},
// 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次
// 参数 bool，按下后true，恢复false
onHighlightChanged: (isClick) {
print(isClick);
}
);
}
}

189
lib/widgets/elements/Form/Button/FlatButton/index.dart
View File

@ -1,20 +1,189 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: FlatButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/FlatButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as flatButton;
const String _markdownData = """# Markdown Example
Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.
## Styling
Style text as _italic_, __bold__, or `inline code`.
- Use bulleted lists
- To better clarify
- Your points
## Links
You can use [hyperlinks](hyperlink) in markdown
## Images
You can include images:
![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100)
## Markdown widget
This is an example of how to create your own Markdown widget:
new Markdown(data: 'Hello _world_!');
## Code blocks
Formatted Dart code looks really pretty too:
```
void main() {
runApp(new MaterialApp(
home: new Scaffold(
body: new Markdown(data: markdownData)
)
));
}
```
Enjoy!
""";
const String _flatText0 =
"""### **简介**
> Flat button 是显示在（零高程）material widget上的文本标签
- 通过填充颜色对触摸作出反应在工具栏上，
- 在对话框中使用Flat button，或与其他内容内联，但使用填充从该内容偏移，以便按钮的存在是显而易见的。
- Flat buttons 故意不具有可见边框，因此必须依赖于它们相对于其他内容的位置以用于上下文。
- 在对话框和卡片中，它们应该组合在一个底角中。避免使用平面按钮，它们会与其他内容混合，例如在列表中间。""";
const String _flatText1 =
"""### **基本用法**
> 参数的默认的按钮和禁用按钮
- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。
- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
const String _flatText2 =
"""### **进阶用法1**
> FlatButton.icon，按钮图标和标签的widget创建文本按钮。""";
const String _flatText3 =
"""### **进阶用法2**
> 更改项参数的自定义,比如:边框，点击效果，内容文字颜色等
- Material design Flat buttons 按钮具有全帽标签，一些内部填充和一些定义的尺寸。
- 要使应用程序的一部分具有交互式，使用墨水溅，而不是承诺这些样式选择，请考虑使用InkWell。
- Flat button 的最小尺寸为88.0×36.0，可以用 ButtonTheme 覆盖。该clipBehavior参数不能为空。""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/FlatButton';
_Demo createState() => _Demo();
@override
_DemoState createState() => _DemoState();
}
class _Demo extends State<Demo> {
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FlatButton"),
),
body: Container(
child: RaisedButton(onPressed: () {}, child: Text("FlatButton"))
)
return WidgetDemo(
title: 'FlatButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FlatButton/demo.dart',
child: allFlatButtons(context),
docUrl: 'https://docs.flutter.io/flutter/material/FlatButton-class.html',
);
}
}
/**
* 所有的 FlatButton 按钮
*/
Widget allFlatButtons(BuildContext context){
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _flatText0),
textAlignBar(_flatText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
flatButton.FlatButtonDefault(),
SizedBox(width: 20.0), // 间距
flatButton.FlatButtonDefault(false),
],
),
textAlignBar(_flatText2),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
//mainAxisSize: MainAxisSize.min,
children: <Widget>[
flatButton.FlatButtonIconDefault(),
flatButton.FlatButtonIconDefault(false),
],
),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
//mainAxisSize: MainAxisSize.min,
children: <Widget>[
flatButton.FlatButtonIconDefault(true, Icons.android),
flatButton.FlatButtonIconDefault(true, Icons.announcement),
],
),
textAlignBar(_flatText3),
//flatButton.FlatButtonCustom(context,'主要按钮',Colors.blue),
flatButton.FlatButtonCustom('主要按钮',Colors.blue),
SizedBox(height: 10.0),
flatButton.FlatButtonCustom('成功按钮',Colors.green),
SizedBox(height: 10.0),
flatButton.FlatButtonCustom('信息按钮',Colors.grey),
SizedBox(height: 10.0),
flatButton.FlatButtonCustom('警告按钮',Colors.orange),
SizedBox(height: 10.0),
flatButton.FlatButtonCustom('危险按钮',Colors.pink),
SizedBox(height: 10.0),
flatButton.FlatButtonCustom('点击我试试！', Colors.red,
new Border.all(color: Colors.brown, width: 5.0, style: BorderStyle.solid),
() => _showMessage('点击了 FLAT BUTTON ', context)),
SizedBox(height: 20.0)
])
);
}
/*
* alert 弹框
* context:容器的父级
* */
void _showMessage(String name, BuildContext context) {
showDialog(
// alert 的父级
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text('提示'),
content: new Text(name),
actions: <Widget>[
new FlatButton(
// alert 的取消按钮
onPressed: () {
// 取消的事件
Navigator.of(context).pop(true);
},
child: new Text('取消'))
]);
}
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}

117
lib/widgets/elements/Form/Button/FloatingActionButton/demo.dart Normal file
View File

@ -0,0 +1,117 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: OutlineButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* OutlineButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class FloatingActionButtonDefault extends StatelessWidget {
final bool isDisabled;
const FloatingActionButtonDefault([bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
return FloatingActionButton(
// 文本内容
backgroundColor:Colors.red,
child: const Icon(Icons.add),
heroTag: null, // 不加这个参数会黑屏...
onPressed: isDisabled ? () {} : null);
}
}
/*
* OutlineButton 自定义的实例
* */
class FloatingActionButtonCustom extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const FloatingActionButtonCustom(
[String this.txt = '自定义按钮',
Color this.color = Colors.orange,
ShapeBorder this.shape,
VoidCallback this.onPressed])
: super();
@override
Widget build(BuildContext context) {
final _onPressed = onPressed;
return new FloatingActionButton(
// 子视图，一般为Icon，不推荐使用文字
child: const Icon(Icons.refresh),
// FAB的文字解释，FAB被长按时显示，也是无障碍功能
tooltip: txt,
// 前景色
foregroundColor: Colors.white,
// 背景色
backgroundColor: color,
// hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果,简单理解为两个界面内拥有同样tag的元素在界面切换过程中，会有动画效果，是界面切换不再那么生硬。
heroTag: null,
// 未点击时阴影值，默认6.0
elevation: 7.0,
// 点击时阴影值，默认12.0
highlightElevation: 14.0,
// 点击事件回调
onPressed: () {
Scaffold.of(context).showSnackBar( SnackBar(
content: Text("FAB is Clicked"),
));
_onPressed();
},
// 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended
mini: false,
// 定义FAB的shape，设置shape时，默认的elevation将会失效,默认为CircleBorder
//shape: CircleBorder(),
shape: shape,
// 是否为”extended”类型
isExtended: true
);
}
}
/*
* OutlineButton 自定义的实例2
* */
class FloatingActionButtonCustom2 extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const FloatingActionButtonCustom2(
[String this.txt = '自定义按钮',
Color this.color = Colors.orange,
ShapeBorder this.shape,
VoidCallback this.onPressed])
: super();
@override
Widget build(BuildContext context) {
final _onPressed = onPressed;
return FloatingActionButton.extended(
onPressed: () {
print('button click');
_onPressed();
},
foregroundColor: Colors.white,
backgroundColor: Colors.amber,
//如果不手动设置icon和text颜色,则默认使用foregroundColor颜色
icon: new Icon(Icons.flag,color: Colors.red),
label: new Text('FloatingActionButton.extended', maxLines: 1),
);
}
}

193
lib/widgets/elements/Form/Button/FloatingActionButton/index.dart Normal file
View File

@ -0,0 +1,193 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: FloatingActionButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/FloatingActionButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as floatingActionButton;
const String _floatingActionTitle =
'FloatingAction Button 示例';
const String _floatingActionText0 =
"""### **简介**
> FloatingAction Button “浮动动作按钮”
- FloatingActionButton 按钮是一个圆形图标按钮，悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于Scaffold.floatingActionButton字段中。。
- 每个屏幕最多使用一个浮动操作按钮。浮动操作按钮应用于积极操作，例如“创建”，“共享”或“导航”。
- 一般用来处理界面中最常用，最基础的用户动作。它一般出现在屏幕内容的前面，通常是一个圆形，中间有一个图标。 FAB有三种类型：regular, mini, and extended。不要强行使用FAB，只有当使用场景符合FAB功能的时候使用才最为恰当
""";
const String _floatingActionText1 =
"""### **基本用法**
> 默认参数的按钮和禁用按钮
- 如果onPressed回调为null，则该按钮将被禁用，并且不会对触摸作出反应,不会变成灰色。
""";
const String _floatingActionText2 =
"""### **进阶用法1**
> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
""";
const String _floatingActionText3 =
"""### **进阶用法2**
> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/FloatingActionButton';
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'FloatingActionButton',
// desc: _floatingActionTitle,
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FloatingActionButton/demo.dart',
child: allFloatingActionButtons(context,this),
//child: Text('123'),
docUrl: 'https://docs.flutter.io/flutter/material/FloatingActionButton-class.html',
);
}
}
/**
* 所有的 FloatingActionButton 按钮
*/
Widget allFloatingActionButtons(BuildContext context,_DemoState that){
final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _floatingActionText0),
textAlignBar(_floatingActionText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
floatingActionButton.FloatingActionButtonDefault(),
SizedBox(width: 20.0), // 间距
floatingActionButton.FloatingActionButtonDefault(false),
],
),
textAlignBar(_floatingActionText2),
SizedBox(height: 10.0),
floatingActionButton.FloatingActionButtonCustom('主要按钮',Colors.deepOrangeAccent,buttonShape),
SizedBox(height: 20.0),
textAlignBar(_floatingActionText3),
SizedBox(height: 20.0),
floatingActionButton.FloatingActionButtonCustom2('扩展按钮',Colors.deepOrangeAccent,buttonShape),
SizedBox(height: 20.0)
])
);
}
/*
* alert 弹框
* context:容器的父级
* */
void _showMessage(String name, BuildContext context) {
showDialog(
// alert 的父级
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text('提示'),
content: new Text(name),
actions: <Widget>[
new FlatButton(
// alert 的取消按钮
onPressed: () {
// 取消的事件
Navigator.of(context).pop(true);
},
child: new Text('取消'))
]);
}
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}
/*
* 绘制边框信息,比如是否有边框,是否是圆角
* */
ShapeBorder drawShape(String type){
final Color _color = _randomColor();
final borderWidth = Random.secure().nextInt(5).toDouble();
final radiusWidth = Random.secure().nextInt(50).toDouble();
switch(type){
case 'border':
return Border.all(
// 设置边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
);
break;
case 'radius':
return RoundedRectangleBorder(
side:new BorderSide( // 保留原来的边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(radiusWidth),
topLeft: Radius.circular(radiusWidth),
bottomLeft: Radius.circular(radiusWidth),
bottomRight: Radius.circular(radiusWidth),
),
);
break;
default:
return null;
}
}
/*
* 取随机颜色
* */
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

94
lib/widgets/elements/Form/Button/IconButton/demo.dart Normal file
View File

@ -0,0 +1,94 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: IconButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_rookie_book/common/iconNames.dart';
final int len = IconNames.Names.length;
/*
* IconButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class IconButtonDefault extends StatelessWidget {
final bool isDisabled;
const IconButtonDefault([bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
return IconButton(
// 文本内容
icon: Icon(Icons.volume_up),
tooltip: 'Increase volume by 10%',
onPressed: isDisabled ? () {} : null);
}
}
/*
* IconButton 自定义的实例
* */
class IconButtonCustom extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const IconButtonCustom(
[String this.txt = '自定义按钮',
Color this.color = Colors.blueAccent,
ShapeBorder this.shape,
VoidCallback this.onPressed])
: super();
getIcons(){
return Icons;
}
@override
Widget build(BuildContext context) {
final int iconIndex = Random.secure().nextInt(len);
final IconData type = IconNames.Names[iconIndex];
final _onPressed = onPressed;
return IconButton(
// 定义图标在IconButton中的定位方式,AlignmentGeometry 如果父Widget尺寸大于child Widget尺寸，这个属性设置会起作用，有很多种对齐方式。
alignment:AlignmentDirectional.center,
// 按钮颜色
color: _randomColor(),
// 如果图标被禁用，则用于按钮内图标的颜色。默认为当前主题的ThemeData.disabledColor
disabledColor:_randomColor(),
// 高亮时的背景色
highlightColor: Colors.yellow,
// 按钮内图标的大小
icon:Icon(type),
// 图标尺寸
iconSize:(Random.secure().nextInt(20)+20).toDouble(), // 随机大小
// 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
splashColor: _randomColor(),
padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
// 描述按下按钮时将发生的操作的文本
tooltip:'这是${ type.codePoint }信息',
// IconButton 的点击事件
onPressed: () {
// Perform some action
if (_onPressed is VoidCallback) {
_onPressed();
}
});
}
}
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

168
lib/widgets/elements/Form/Button/IconButton/index.dart Normal file
View File

@ -0,0 +1,168 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: IconButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/IconButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as iconButton;
const String _iconText0 =
"""### **简介**
> Icon button “图标按钮”
- IconButton widget上的图片，通过填充颜色（墨水）来对触摸作出反应。
""";
const String _iconText1 =
"""### **基本用法**
> 参数的默认的按钮和禁用按钮
- 图标按钮通常在AppBar.actions字段中使用，但它们也可以在许多其他地方使用。。
- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
const String _iconText2 =
"""### **进阶用法**
> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
- 如果可能，图标按钮的命中区域的大小至少为48.0像素，与实际的iconSize无关，以满足 Material Design规范中的触摸目标大小要求。的对准控制图标本身如何定位命中区域内。
- ** 长按可弹出 tip 文字 **
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/IconButton';
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'IconButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/IconButton/demo.dart',
child: allIconButtons(context,this),
docUrl: 'https://docs.flutter.io/flutter/material/IconButton-class.html',
);
}
}
/**
* 所有的 IconButton 按钮
*/
Widget allIconButtons(BuildContext context,_DemoState that){
final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _iconText0),
textAlignBar(_iconText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
iconButton.IconButtonDefault(),
SizedBox(width: 20.0), // 间距
iconButton.IconButtonDefault(false),
],
),
textAlignBar(_iconText2),
SizedBox(height: 10.0),
iconButton.IconButtonCustom('主要按钮',Colors.blue,buttonShape),
SizedBox(height: 10.0),
iconButton.IconButtonCustom('成功按钮',Colors.green,buttonShape),
SizedBox(height: 10.0),
iconButton.IconButtonCustom('信息按钮',Colors.grey,buttonShape),
SizedBox(height: 10.0),
iconButton.IconButtonCustom('警告按钮',Colors.orange,buttonShape),
SizedBox(height: 10.0),
iconButton.IconButtonCustom('危险按钮',Colors.pink,buttonShape),
SizedBox(height: 10.0),
RaisedButton(
// 文本内容
child: const Text('点击切换，图标按钮', semanticsLabel: 'FLAT BUTTON 1'),
onPressed: ()=> that.setButtonShapeType()),
SizedBox(height: 20.0)
])
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}
/*
* 绘制边框信息,比如是否有边框,是否是圆角
* */
ShapeBorder drawShape(String type){
final Color _color = _randomColor();
final borderWidth = Random.secure().nextInt(5).toDouble();
final radiusWidth = Random.secure().nextInt(50).toDouble();
switch(type){
case 'border':
return Border.all(
// 设置边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
);
break;
case 'radius':
return RoundedRectangleBorder(
side:new BorderSide( // 保留原来的边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(radiusWidth),
topLeft: Radius.circular(radiusWidth),
bottomLeft: Radius.circular(radiusWidth),
bottomRight: Radius.circular(radiusWidth),
),
);
break;
default:
return null;
}
}
/*
* 取随机颜色
* */
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

122
lib/widgets/elements/Form/Button/OutlineButton/demo.dart Normal file
View File

@ -0,0 +1,122 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: OutlineButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* OutlineButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class OutlineButtonDefault extends StatelessWidget {
final bool isDisabled;
const OutlineButtonDefault([bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
return OutlineButton(
// 文本内容
child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
onPressed: isDisabled ? () {} : null);
}
}
/*
* OutlineButton.icon 默认按钮的实例
* Create a text button from a pair of widgets that serve as the button's icon and label
* isDisabled:是否是禁用
* */
class OutlineButtonIconDefault extends StatelessWidget {
final bool isDisabled;
final IconData icon;
const OutlineButtonIconDefault(
[bool this.isDisabled = true, IconData this.icon = Icons.add_circle])
: super();
@override
Widget build(BuildContext context) {
return OutlineButton.icon(
// 文本内容
icon: Icon(icon, size: 25.0, color: _randomColor()),
label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
onPressed: isDisabled
? () {
//_showMessage('点击了 FLAT BUTTON ', context);
}
: null);
}
}
/*
* OutlineButton 自定义的实例
* */
class OutlineButtonCustom extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const OutlineButtonCustom(
[String this.txt = '自定义按钮',
Color this.color = Colors.blueAccent,
ShapeBorder this.shape,
VoidCallback this.onPressed])
: super();
@override
Widget build(BuildContext context) {
final _onPressed = onPressed;
return OutlineButton(
// 文本内容
child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
// 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor
borderSide:new BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()),
// 按钮颜色
color: _randomColor(),
// 按钮失效时边框颜色
disabledBorderColor: Colors.red,
highlightedBorderColor:Colors.black54,
// 高亮时的背景色
highlightColor: Colors.yellow,
// 失效时的背景色
//disabledColor: Colors.grey,
// 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
textColor: _randomColor(),
// 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
disabledTextColor: _randomColor(),
// 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,OutlineButton，OutlineButton，OutlineButton，它们是基于环境ButtonTheme配置的
//ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
textTheme: ButtonTextTheme.normal,
// 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
splashColor: _randomColor(),
// 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
clipBehavior: Clip.antiAlias,
padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
//高亮时候的阴影
highlightElevation: 10.0,
shape: shape, // 在Outline 里只能设置圆角,边框用borderSide
// OutlineButton 的点击事件
onPressed: () {
// Perform some action
if (_onPressed is VoidCallback) {
_onPressed();
}
});
}
}
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

217
lib/widgets/elements/Form/Button/OutlineButton/index.dart Normal file
View File

@ -0,0 +1,217 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: OutlineButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/OutlineButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as outlineButton;
const String _outlineText0 =
"""### **简介**
> Outline button “边框按钮”
- RaisedButton和FlatButton之间的交叉：一个有边框的按钮，当按下按钮时，其高度增加，背景变得不透明。。
- 高程最初为0.0，其背景颜色 为透明。按下按钮时，其背景变为不透明，然后其高程增加到highlightElevation。
""";
const String _outlineText1 =
"""### **基本用法**
> 参数的默认的按钮和禁用按钮
- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。
- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
const String _outlineText2 =
"""### **进阶用法1**
> OutlineButton.icon 的用法，按钮图标和标签的widget创建文本按钮。""";
const String _outlineText3 =
"""### **进阶用法2**
> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
- Outline buttons 按钮有一个边框，其形状由形状定义 ，其外观由borderSide，disabledBorderColor和highlightedBorderColor定义。
- 如果您想要水龙头的墨水效果，但又不想使用按钮，请考虑直接使用InkWell。
- Outline buttons 的最小尺寸为88.0×36.0，可以用ButtonTheme 覆盖。
- 通过 shape 属性的设置，改变边框样式和圆角。
- 可以尝试长按按钮，按钮突出显示。
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/OutlineButton';
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'OutlineButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/OutlineButton/demo.dart',
child: allOutlineButtons(context,this),
docUrl: 'https://docs.flutter.io/flutter/material/OutlineButton-class.html',
);
}
}
/**
* 所有的 OutlineButton 按钮
*/
Widget allOutlineButtons(BuildContext context,_DemoState that){
final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _outlineText0),
textAlignBar(_outlineText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
outlineButton.OutlineButtonDefault(),
SizedBox(width: 20.0), // 间距
outlineButton.OutlineButtonDefault(false),
],
),
textAlignBar(_outlineText2),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
//mainAxisSize: MainAxisSize.min,
children: <Widget>[
outlineButton.OutlineButtonIconDefault(),
outlineButton.OutlineButtonIconDefault(false),
],
),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
//mainAxisSize: MainAxisSize.min,
children: <Widget>[
outlineButton.OutlineButtonIconDefault(true, Icons.android),
outlineButton.OutlineButtonIconDefault(true, Icons.announcement),
],
),
textAlignBar(_outlineText3),
SizedBox(height: 10.0),
outlineButton.OutlineButtonCustom('主要按钮',Colors.blue,buttonShape),
SizedBox(height: 10.0),
outlineButton.OutlineButtonCustom('成功按钮',Colors.green,buttonShape),
SizedBox(height: 10.0),
outlineButton.OutlineButtonCustom('信息按钮',Colors.grey,buttonShape),
SizedBox(height: 10.0),
outlineButton.OutlineButtonCustom('警告按钮',Colors.orange,buttonShape),
SizedBox(height: 10.0),
outlineButton.OutlineButtonCustom('危险按钮',Colors.pink,buttonShape),
SizedBox(height: 10.0),
outlineButton.OutlineButtonCustom( '点击切换，随机改变按钮的圆角,边框样式', Colors.blue, buttonShape,
() => that.setButtonShapeType()),
SizedBox(height: 20.0)
])
);
}
/*
* alert 弹框
* context:容器的父级
* */
void _showMessage(String name, BuildContext context) {
showDialog(
// alert 的父级
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text('提示'),
content: new Text(name),
actions: <Widget>[
new FlatButton(
// alert 的取消按钮
onPressed: () {
// 取消的事件
Navigator.of(context).pop(true);
},
child: new Text('取消'))
]);
}
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}
/*
* 绘制边框信息,比如是否有边框,是否是圆角
* */
ShapeBorder drawShape(String type){
final Color _color = _randomColor();
final borderWidth = Random.secure().nextInt(5).toDouble();
final radiusWidth = Random.secure().nextInt(50).toDouble();
switch(type){
case 'border':
return Border.all(
// 设置边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
);
break;
case 'radius':
return RoundedRectangleBorder(
side:new BorderSide( // 保留原来的边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(radiusWidth),
topLeft: Radius.circular(radiusWidth),
bottomLeft: Radius.circular(radiusWidth),
bottomRight: Radius.circular(radiusWidth),
),
);
break;
default:
return null;
}
}
/*
* 取随机颜色
* */
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

144
lib/widgets/elements/Form/Button/PopupMenuButton/demo.dart Normal file
View File

@ -0,0 +1,144 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: RaisedButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* RaisedButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
enum WhyFarther { harder, smarter, selfStarter, tradingCharter }
class PopupMenuButtonDefault extends StatelessWidget {
final bool isDisabled;
final String type;
const PopupMenuButtonDefault(
[String this.type = 'default1', bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
switch (type) {
case 'default1':
return default1(context);
break;
case 'default2':
return default2(context);
break;
case 'default3':
return default3(context);
break;
default:
return default1(context);
}
}
Widget default1(BuildContext context) {
return PopupMenuButton<WhyFarther>(
onSelected: (WhyFarther result) {
// setState(() { _selection = result; });
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
const PopupMenuItem<WhyFarther>(
value: WhyFarther.harder,
child: Text('Working a lot harder'),
),
const PopupMenuItem<WhyFarther>(
value: WhyFarther.smarter,
child: Text('Being a lot smarter'),
),
const PopupMenuItem<WhyFarther>(
value: WhyFarther.selfStarter,
child: Text('Being a self-starter'),
),
const PopupMenuItem<WhyFarther>(
value: WhyFarther.tradingCharter,
child: Text('Placed in charge of trading charter'),
),
],
);
}
Widget default2(BuildContext context) {
return PopupMenuButton(
child: Text('点我试试'),
onSelected: (String value) {},
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
]);
}
Widget default3(BuildContext context) {
return PopupMenuButton(
//child: Text('点我试试'),// child 和 icon 不能同时用
icon: Icon(Icons.menu),
onSelected: (String value) {},
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
]);
}
}
class PopupMenuButtonCustom extends StatelessWidget {
final widget;
final parent;
const PopupMenuButtonCustom([this.widget,this.parent])
: super();
@override
Widget build(BuildContext context) {
print('onSelected1:${widget.options}');
final String selectStr = widget.options['defaultSelect'];
return PopupMenuButton(
//如果提供，则用于此按钮的widget。
child: RaisedButton.icon(
disabledColor:Colors.red,
icon: Icon(Icons.message, size: 25.0,color:Colors.yellow),
label: Text(
'自定义按钮', style: TextStyle(color: Colors.white),
semanticsLabel: 'FLAT BUTTON'),
// onPressed:(){} // 激活状态按钮
),
// 打开时放置菜单的z坐标。这可以控制菜单下方阴影的大小。
elevation:10.0,
// 如果提供，则用于此按钮的图标。
//icon
// 菜单项的值（如果有），在菜单打开时应突出显示。
//initialValue:options['defaultSelect'],
initialValue:selectStr,
// 按下按钮时调用以创建要在菜单中显示的项目。
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
new PopupMenuItem(value: "选项二的内容", child: new Text("选项二")),
new PopupMenuItem(value: "选项三的内容", child: new Text("选项三")),
new PopupMenuItem(value: "选项四的内容", child: new Text("选项四"))
],
// 应用于弹出菜单按钮的偏移量(x,y)。
offset:Offset(0.0,50.0),
// 当用户在不选择项目的情况下关闭弹出菜单时调用。
onCanceled:()=>
print('onCanceled'),
// 当用户从此按钮创建的弹出菜单中选择一个值时调用。
onSelected:(String value){
print('onSelected:${parent.setState}');
parent.setState((){
widget.options['defaultSelect']= value;
});
},
// 默认情况下匹配IconButton的8 dps填充。在某些情况下，特别是在此按钮作为列表项的尾随元素出现的情况下，能够将填充设置为零是有用的。
padding:new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0.0, right: 0.0),
//描述按下按钮时将发生的操作的文本。
tooltip:'这是信息'
);
}
}

90
lib/widgets/elements/Form/Button/PopupMenuButton/index.dart Normal file
View File

@ -0,0 +1,90 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/24
* Time: 下午5:25
* email: zhu.yan@alibaba-inc.com
* tartget: PopupMenusButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/PopupMenuButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as popupMenuButton;
const String _titleText0 = """
### **简介**
> 按下时显示菜单
- 当菜单因为选择了项目而被解除时调用onSelected。传递给onSelected的值是所选菜单项的值。
- 可以提供 `child` 或 `icon` 中的一个，但不是能同时设置两者。如果提供了 `icon` ，则 `PopupMenuButton` 的行为类似于 `IconButton`。
- 如果两者都为null，则创建一个标准 overflow icon（取决于平台）。
""";
const String _titleText1 = """
### **基本用法**
> 此示例显示一个包含四个项目的菜单
- 在枚举值之间进行选择，并_selection根据选择设置字段。
""";
const String _titleText2 = """
### **进阶用法**
> 此示例尝试调整所有属性，展示出效果
- 默认选择第二个。
- 再次打开,`PopupMenuItem` 保留上次的选择结果。
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/PopupMenuButton';
final Map<String,String> options = {'defaultSelect': '选项二的内容'};
@override
final _DemoState self = _DemoState();
_DemoState createState() => self;
}
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'PopupMenuButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart',
child: allPopupMenuButton(widget,this),
docUrl: 'https://docs.flutter.io/flutter/material/PopupMenuButton-class.html',
);
}
}
Widget allPopupMenuButton(Demo widget,State parent){
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _titleText0),
SizedBox(height: 20.0),
MarkdownBody(data: _titleText1),
Row(
crossAxisAlignment:CrossAxisAlignment.center,
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: <Widget>[
popupMenuButton.PopupMenuButtonDefault('default1'),
popupMenuButton.PopupMenuButtonDefault('default2'),
popupMenuButton.PopupMenuButtonDefault('default3'),
],
),
SizedBox(height: 20.0),
MarkdownBody(data: _titleText2),
SizedBox(height: 20.0),
popupMenuButton.PopupMenuButtonCustom(widget,parent),
SizedBox(height: 40.0)
]
));
}

130
lib/widgets/elements/Form/Button/RaisedButton/demo.dart Normal file
View File

@ -0,0 +1,130 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: RaisedButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* RaisedButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class RaisedButtonDefault extends StatelessWidget {
final bool isDisabled;
const RaisedButtonDefault([bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
return RaisedButton(
// 文本内容
child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
onPressed: isDisabled ? () {} : null);
}
}
/*
* RaisedButton.icon 默认按钮的实例
* Create a text button from a pair of widgets that serve as the button's icon and label
* isDisabled:是否是禁用
* */
class RaisedButtonIconDefault extends StatelessWidget {
final bool isDisabled;
final IconData icon;
const RaisedButtonIconDefault(
[bool this.isDisabled = true, IconData this.icon = Icons.add_circle])
: super();
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}
@override
Widget build(BuildContext context) {
return RaisedButton.icon(
// 文本内容
icon: Icon(icon, size: 25.0, color: _randomColor()),
label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
onPressed: isDisabled
? () {
//_showMessage('点击了 FLAT BUTTON ', context);
}
: null);
}
}
/*
* RaisedButton 自定义的实例
* */
class RaisedButtonCustom extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const RaisedButtonCustom(
[String this.txt = '自定义按钮',
Color this.color = Colors.blueAccent,
ShapeBorder this.shape,
VoidCallback this.onPressed])
: super();
@override
Widget build(BuildContext context) {
final _onPressed = onPressed;
return RaisedButton(
// 文本内容
child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
// 按钮颜色
color: color,
// 按钮亮度
colorBrightness: Brightness.dark,
// 高亮时的背景色
//highlightColor: Colors.yellow,
// 失效时的背景色
disabledColor: Colors.grey,
// 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
textColor: Colors.white,
// 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
disabledTextColor: Colors.grey,
// 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，RaisedButton，OutlineButton，它们是基于环境ButtonTheme配置的
//ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
textTheme: ButtonTextTheme.normal,
// 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
splashColor: Colors.deepPurple,
// 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
clipBehavior: Clip.antiAlias,
padding:
new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
shape: (shape is ShapeBorder)
? shape
: new Border.all(
// 设置边框样式
color: Colors.grey,
width: 2.0,
style: BorderStyle.solid,
),
// RaisedButton 的点击事件
onPressed: () {
// Perform some action
if (_onPressed is VoidCallback) {
_onPressed();
}
},
// 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次
// 参数 bool，按下后true，恢复false
onHighlightChanged: (isClick) {
print(isClick);
});
}
}

218
lib/widgets/elements/Form/Button/RaisedButton/index.dart
View File

@ -1,21 +1,217 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: RaisedButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/RaisedButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as raisedButton;
const String _raisedText0 =
"""### **简介**
> Raised button “凸起按钮”
- Raised button 基于 a Material widget 窗口widget，按下按钮时，Material.elevation 会增加。
- 使用 Raised button 可将尺寸添加到大多数平面布局中。
- 例如在复杂的内容列表中，或在宽阔的空间中。避免在已经提出的内容（例如对话框或卡片）上使用 Raised button 。
""";
const String _raisedText1 =
"""### **基本用法**
> 参数的默认的按钮和禁用按钮
- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。
- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
const String _raisedText2 =
"""### **进阶用法1**
> RaisedButton.icon 的用方法，按钮图标和标签的widget创建文本按钮。""";
const String _raisedText3 =
"""### **进阶用法2**
> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
- Raised buttons 按钮具有全帽标签，一些内部填充和一些定义的尺寸。
- 如果您想要水龙头的墨水效果，但又不想使用按钮，请考虑直接使用InkWell。
- Raised buttons 的最小尺寸为88.0×36.0，可以用ButtonTheme 覆盖。
- 通过 shape 属性的设置，改变边框样式和圆角。
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/RaisedButton';
_Demo createState() => _Demo();
@override
_DemoState createState() => _DemoState();
}
class _Demo extends State<Demo> {
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FlatButton"),
),
body: Container(
child: RaisedButton(onPressed: () {}, child: Text("BUtton"))
)
return WidgetDemo(
title: 'RaisedButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart',
child: allRaisedButtons(context,this),
docUrl: 'https://docs.flutter.io/flutter/material/RaisedButton-class.html',
);
}
}
/**
* 所有的 RaisedButton 按钮
*/
Widget allRaisedButtons(BuildContext context,_DemoState that){
final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _raisedText0),
textAlignBar(_raisedText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
raisedButton.RaisedButtonDefault(),
SizedBox(width: 20.0), // 间距
raisedButton.RaisedButtonDefault(false),
],
),
textAlignBar(_raisedText2),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
//mainAxisSize: MainAxisSize.min,
children: <Widget>[
raisedButton.RaisedButtonIconDefault(),
raisedButton.RaisedButtonIconDefault(false),
],
),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
//mainAxisSize: MainAxisSize.min,
children: <Widget>[
raisedButton.RaisedButtonIconDefault(true, Icons.android),
raisedButton.RaisedButtonIconDefault(true, Icons.announcement),
],
),
textAlignBar(_raisedText3),
SizedBox(height: 10.0),
raisedButton.RaisedButtonCustom('主要按钮',Colors.blue,buttonShape),
SizedBox(height: 10.0),
raisedButton.RaisedButtonCustom('成功按钮',Colors.green,buttonShape),
SizedBox(height: 10.0),
raisedButton.RaisedButtonCustom('信息按钮',Colors.grey,buttonShape),
SizedBox(height: 10.0),
raisedButton.RaisedButtonCustom('警告按钮',Colors.orange,buttonShape),
SizedBox(height: 10.0),
raisedButton.RaisedButtonCustom('危险按钮',Colors.pink,buttonShape),
SizedBox(height: 10.0),
raisedButton.RaisedButtonCustom( '点击切换，按钮的圆角', Colors.blue, buttonShape,
() => that.setButtonShapeType()),
SizedBox(height: 20.0)
])
);
}
/*
* alert 弹框
* context:容器的父级
* */
void _showMessage(String name, BuildContext context) {
showDialog(
// alert 的父级
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text('提示'),
content: new Text(name),
actions: <Widget>[
new FlatButton(
// alert 的取消按钮
onPressed: () {
// 取消的事件
Navigator.of(context).pop(true);
},
child: new Text('取消'))
]);
}
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}
/*
* 绘制边框信息,比如是否有边框,是否是圆角
* */
ShapeBorder drawShape(String type){
final Color _color = _randomColor();
final borderWidth = Random.secure().nextInt(5).toDouble();
final radiusWidth = Random.secure().nextInt(50).toDouble();
switch(type){
case 'border':
return Border.all(
// 设置边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
);
break;
case 'radius':
return RoundedRectangleBorder(
side:new BorderSide( // 保留原来的边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(radiusWidth),
topLeft: Radius.circular(radiusWidth),
bottomLeft: Radius.circular(radiusWidth),
bottomRight: Radius.circular(radiusWidth),
),
);
break;
default:
return null;
}
}
/*
* 取随机颜色
* */
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

85
lib/widgets/elements/Form/Button/RawMaterialButton/demo.dart Normal file
View File

@ -0,0 +1,85 @@
/**
* Created with Android Studio.
* User: 一晟
* Date: 2018/11/22
* Time: 上午12:03
* email: zhu.yan@alibaba-inc.com
* tartget: RawMaterialButton 的示例
*/
import 'dart:math';
import 'package:flutter/material.dart';
/*
* RawMaterialButton 默认按钮的实例
* isDisabled:是否是禁用，isDisabled 默认为true
* */
class RawMaterialButtonDefault extends StatelessWidget {
final bool isDisabled;
const RawMaterialButtonDefault([bool this.isDisabled = true])
: assert(isDisabled != null),
super();
@override
Widget build(BuildContext context) {
return RawMaterialButton(
// 文本内容
child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
onPressed: isDisabled ? () {} : null);
}
}
/*
* RawMaterialButton 自定义的实例
* */
class RawMaterialButtonCustom extends StatelessWidget {
final String txt;
final Color color;
final ShapeBorder shape;
final VoidCallback onPressed;
const RawMaterialButtonCustom(
[String this.txt = '自定义按钮',
Color this.color = Colors.blueAccent,
ShapeBorder this.shape,
VoidCallback this.onPressed])
: super();
@override
Widget build(BuildContext context) {
final _onPressed = onPressed;
final _fontSize = (Random.secure().nextInt(10)+15).toDouble();
return RawMaterialButton(
// 使用Material.textStyle为按钮的子项定义默认文本样式。
textStyle:TextStyle(color: _randomColor(),fontSize: _fontSize),
// 定义形状和高程的动画更改的持续时间
animationDuration:Duration(seconds: 1),
// 文本内容
child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
// 高亮时的背景色
highlightColor: Colors.yellow,
// 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
splashColor: _randomColor(),
// 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
clipBehavior: Clip.antiAlias,
padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
//高亮时候的阴影
highlightElevation: 10.0,
// 按钮材质的形状
// shape: shape,
// RawMaterialButton 的点击事件
onPressed: () {
// Perform some action
if (_onPressed is VoidCallback) {
_onPressed();
}
});
}
}
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

189
lib/widgets/elements/Form/Button/RawMaterialButton/index.dart Normal file
View File

@ -0,0 +1,189 @@
/**
* Created with 菜鸟手册.
* User: 一晟
* Date: 2018/11/14
* Time: 下午4:31
* email: zhu.yan@alibaba-inc.com
* target: RawMaterialButton 的示例
* 对应文档地址:https://docs.flutter.io/flutter/material/RawMaterialButton-class.html
*/
import '../../../../../common/widget-demo.dart';
import '../../../../../routers/application.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import './demo.dart' as rawMaterialButton;
const String _rawMaterialText0 =
"""### **简介**
> RawMaterial button “RawMaterial 按钮”
- 基于Semantics，Material和InkWell 小部件创建按钮。
- 此类不使用当前Theme或ButtonTheme来计算未指定参数的默认值。它旨在用于自定义材质按钮，可选择包含主题或特定于应用程序源的默认值。
""";
const String _rawMaterialText1 =
"""### **基本用法**
> 参数的默认的按钮和禁用按钮
""";
const String _rawMaterialText2 =
"""### **进阶用法**
> 更改项参数的自定义
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Form/Button/RawMaterialButton';
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
String buttonShapeType = 'border'; // 边框类型
void setButtonShapeType(){
//String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
this.setState((){
//buttonShapeType = _buttonShapeType;
});
}
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'RawMaterialButton',
codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RawMaterialButton/demo.dart',
child: allRawMaterialButtons(context,this),
docUrl: 'https://docs.flutter.io/flutter/material/RawMaterialButton-class.html',
);
}
}
/**
* 所有的 RawMaterialButton 按钮
*/
Widget allRawMaterialButtons(BuildContext context,_DemoState that){
final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
return Container(
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
MarkdownBody(data: _rawMaterialText0),
textAlignBar(_rawMaterialText1),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
rawMaterialButton.RawMaterialButtonDefault(),
SizedBox(width: 20.0), // 间距
rawMaterialButton.RawMaterialButtonDefault(false),
],
),
textAlignBar(_rawMaterialText2),
SizedBox(height: 10.0),
rawMaterialButton.RawMaterialButtonCustom('主要按钮',Colors.blue,buttonShape),
SizedBox(height: 10.0),
rawMaterialButton.RawMaterialButtonCustom('成功按钮',Colors.green,buttonShape),
SizedBox(height: 10.0),
rawMaterialButton.RawMaterialButtonCustom('信息按钮',Colors.grey,buttonShape),
SizedBox(height: 10.0),
rawMaterialButton.RawMaterialButtonCustom('警告按钮',Colors.orange,buttonShape),
SizedBox(height: 10.0),
rawMaterialButton.RawMaterialButtonCustom('危险按钮',Colors.pink,buttonShape),
SizedBox(height: 10.0),
rawMaterialButton.RawMaterialButtonCustom( '点击切换，观察字体变化', Colors.blue, buttonShape,
() => that.setButtonShapeType()),
SizedBox(height: 20.0)
])
);
}
/*
* alert 弹框
* context:容器的父级
* */
void _showMessage(String name, BuildContext context) {
showDialog(
// alert 的父级
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text('提示'),
content: new Text(name),
actions: <Widget>[
new FlatButton(
// alert 的取消按钮
onPressed: () {
// 取消的事件
Navigator.of(context).pop(true);
},
child: new Text('取消'))
]);
}
);
}
/*
* 带align的text
* */
Widget textAlignBar(String txt){
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
return new Align(
alignment: FractionalOffset.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
MarkdownBody(data: txt)
//new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
])
);
}
/*
* 绘制边框信息,比如是否有边框,是否是圆角
* */
ShapeBorder drawShape(String type){
final Color _color = _randomColor();
final borderWidth = Random.secure().nextInt(5).toDouble();
final radiusWidth = Random.secure().nextInt(50).toDouble();
switch(type){
case 'border':
return Border.all(
// 设置边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
);
break;
case 'radius':
return RoundedRectangleBorder(
side:new BorderSide( // 保留原来的边框样式
width: borderWidth,
color: _color,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(radiusWidth),
topLeft: Radius.circular(radiusWidth),
bottomLeft: Radius.circular(radiusWidth),
bottomRight: Radius.circular(radiusWidth),
),
);
break;
default:
return null;
}
}
/*
* 取随机颜色
* */
Color _randomColor() {
var red = Random.secure().nextInt(255);
var greed = Random.secure().nextInt(255);
var blue = Random.secure().nextInt(255);
return Color.fromARGB(255, red, greed, blue);
}

36
lib/widgets/elements/Form/Button/index.dart
View File

@ -3,6 +3,12 @@ import "package:flutter/material.dart";
import 'FlatButton/index.dart' as FlatButton;
import 'RaisedButton/index.dart' as RaisedButton;
import 'OutlineButton/index.dart' as OutlineButton;
import 'IconButton/index.dart' as IconButton;
import 'PopupMenuButton/index.dart' as PopupMenuButton;
import 'FloatingActionButton/index.dart' as FloatingActionButton;
import 'RawMaterialButton/index.dart' as RawMaterialButton;
import 'DropdownButton/index.dart' as DropdownButton;
List<WidgetPoint> widgetPoints = [
@ -16,4 +22,34 @@ List<WidgetPoint> widgetPoints = [
routerName: RaisedButton.Demo.routeName,
buildRouter: (BuildContext context) => RaisedButton.Demo(),
),
WidgetPoint(
name: 'OutlineButton',
routerName: OutlineButton.Demo.routeName,
buildRouter: (BuildContext context) => OutlineButton.Demo(),
),
WidgetPoint(
name: 'IconButton',
routerName: IconButton.Demo.routeName,
buildRouter: (BuildContext context) => IconButton.Demo(),
),
WidgetPoint(
name: 'PopupMenuButton',
routerName: PopupMenuButton.Demo.routeName,
buildRouter: (BuildContext context) => PopupMenuButton.Demo(),
),
WidgetPoint(
name: 'FloatingActionButton',
routerName: FloatingActionButton.Demo.routeName,
buildRouter: (BuildContext context) => FloatingActionButton.Demo(),
),
WidgetPoint(
name: 'RawMaterialButton',
routerName: RawMaterialButton.Demo.routeName,
buildRouter: (BuildContext context) => RawMaterialButton.Demo(),
),
WidgetPoint(
name: 'DropdownButton',
routerName: DropdownButton.Demo.routeName,
buildRouter: (BuildContext context) => DropdownButton.Demo(),
)
];