mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-05-30 13:16:27 +08:00
fix: code conflict
This commit is contained in:
@ -17,15 +17,15 @@ var selectItemValue;
|
||||
|
||||
class DropdownButtonDefault extends StatelessWidget {
|
||||
List<DropdownMenuItem> generateItemList() {
|
||||
final List<DropdownMenuItem> items = new List();
|
||||
final DropdownMenuItem item1 = new DropdownMenuItem(
|
||||
value: '张三', child: new Text('张三'));
|
||||
final DropdownMenuItem item2 = new DropdownMenuItem(
|
||||
value: '李四', child: new Text('李四'));
|
||||
final DropdownMenuItem item3 = new DropdownMenuItem(
|
||||
value: '王二', child: new Text('王二'));
|
||||
final DropdownMenuItem item4 = new DropdownMenuItem(
|
||||
value: '麻子', child: new Text('麻子'));
|
||||
final List<DropdownMenuItem> items = List();
|
||||
final DropdownMenuItem item1 = DropdownMenuItem(
|
||||
value: '张三', child: Text('张三'));
|
||||
final DropdownMenuItem item2 = DropdownMenuItem(
|
||||
value: '李四', child: Text('李四'));
|
||||
final DropdownMenuItem item3 = DropdownMenuItem(
|
||||
value: '王二', child: Text('王二'));
|
||||
final DropdownMenuItem item4 = DropdownMenuItem(
|
||||
value: '麻子', child: Text('麻子'));
|
||||
items.add(item1);
|
||||
items.add(item2);
|
||||
items.add(item3);
|
||||
@ -36,7 +36,7 @@ class DropdownButtonDefault extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DropdownButton(
|
||||
hint: new Text('下拉菜单选择一个人名'),
|
||||
hint: Text('下拉菜单选择一个人名'),
|
||||
//设置这个value之后,选中对应位置的item,
|
||||
//再次呼出下拉菜单,会自动定位item位置在当前按钮显示的位置处
|
||||
value: selectItValue,
|
||||
@ -51,54 +51,54 @@ class DropdownButtonDefault extends StatelessWidget {
|
||||
}
|
||||
|
||||
List<DropdownMenuItem> getListData(){
|
||||
List<DropdownMenuItem> items=new List();
|
||||
DropdownMenuItem dropdownMenuItem1=new DropdownMenuItem(
|
||||
child:new Text('1'),
|
||||
List<DropdownMenuItem> items= List();
|
||||
DropdownMenuItem dropdownMenuItem1= DropdownMenuItem(
|
||||
child: Text('1'),
|
||||
value: '1',
|
||||
);
|
||||
items.add(dropdownMenuItem1);
|
||||
DropdownMenuItem dropdownMenuItem2=new DropdownMenuItem(
|
||||
child:new Text('2'),
|
||||
DropdownMenuItem dropdownMenuItem2= DropdownMenuItem(
|
||||
child: Text('2'),
|
||||
value: '2',
|
||||
);
|
||||
items.add(dropdownMenuItem2);
|
||||
DropdownMenuItem dropdownMenuItem3=new DropdownMenuItem(
|
||||
child:new Text('3'),
|
||||
DropdownMenuItem dropdownMenuItem3= DropdownMenuItem(
|
||||
child: Text('3'),
|
||||
value: '3',
|
||||
);
|
||||
items.add(dropdownMenuItem3);
|
||||
DropdownMenuItem dropdownMenuItem4=new DropdownMenuItem(
|
||||
child:new Text('4'),
|
||||
DropdownMenuItem dropdownMenuItem4= DropdownMenuItem(
|
||||
child: Text('4'),
|
||||
value: '4',
|
||||
);
|
||||
items.add(dropdownMenuItem4);
|
||||
DropdownMenuItem dropdownMenuItem5=new DropdownMenuItem(
|
||||
child:new Text('5'),
|
||||
DropdownMenuItem dropdownMenuItem5= DropdownMenuItem(
|
||||
child: Text('5'),
|
||||
value: '5',
|
||||
);
|
||||
items.add(dropdownMenuItem5);
|
||||
DropdownMenuItem dropdownMenuItem6=new DropdownMenuItem(
|
||||
child:new Text('6'),
|
||||
DropdownMenuItem dropdownMenuItem6= DropdownMenuItem(
|
||||
child: Text('6'),
|
||||
value: '6',
|
||||
);
|
||||
items.add(dropdownMenuItem6);
|
||||
DropdownMenuItem dropdownMenuItem7=new DropdownMenuItem(
|
||||
child:new Text('7'),
|
||||
DropdownMenuItem dropdownMenuItem7= DropdownMenuItem(
|
||||
child: Text('7'),
|
||||
value: '7',
|
||||
);
|
||||
items.add(dropdownMenuItem7);
|
||||
DropdownMenuItem dropdownMenuItem8=new DropdownMenuItem(
|
||||
child:new Text('8'),
|
||||
DropdownMenuItem dropdownMenuItem8= DropdownMenuItem(
|
||||
child: Text('8'),
|
||||
value: '8',
|
||||
);
|
||||
items.add(dropdownMenuItem8);
|
||||
DropdownMenuItem dropdownMenuItem9=new DropdownMenuItem(
|
||||
child:new Text('9'),
|
||||
DropdownMenuItem dropdownMenuItem9= DropdownMenuItem(
|
||||
child: Text('9'),
|
||||
value: '9',
|
||||
);
|
||||
items.add(dropdownMenuItem9);
|
||||
DropdownMenuItem dropdownMenuItem10=new DropdownMenuItem(
|
||||
child:new Text('10'),
|
||||
DropdownMenuItem dropdownMenuItem10= DropdownMenuItem(
|
||||
child: Text('10'),
|
||||
value: '10',
|
||||
);
|
||||
items.add(dropdownMenuItem10);
|
||||
@ -124,9 +124,11 @@ class DropdownButtonCustom extends StatelessWidget {
|
||||
value: selectItemValue,
|
||||
//下拉菜单item点击之后的回调
|
||||
onChanged: (T){
|
||||
parent.setState((){
|
||||
selectItemValue = T;
|
||||
});
|
||||
if (parent.mounted) {
|
||||
parent.setState(() {
|
||||
selectItemValue = T;
|
||||
});
|
||||
}
|
||||
},
|
||||
//设置阴影的高度
|
||||
elevation: 24,
|
||||
|
@ -62,7 +62,7 @@ class _DemoState extends State<Demo> {
|
||||
*/
|
||||
Widget allDropdownButtons(BuildContext context,_DemoState that){
|
||||
return Container(
|
||||
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -87,14 +87,14 @@ Widget allDropdownButtons(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
|
@ -101,9 +101,9 @@ class FlatButtonCustom extends StatelessWidget {
|
||||
splashColor: Colors.deepPurple,
|
||||
// 抗锯齿能力,抗锯齿等级依次递增,none(默认),hardEdge,antiAliasWithSaveLayer,antiAlias
|
||||
clipBehavior: Clip.antiAlias,
|
||||
padding: new EdgeInsets.only(
|
||||
padding: EdgeInsets.only(
|
||||
bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
|
||||
shape: (shape is ShapeBorder) ? shape : new Border.all(
|
||||
shape: (shape is ShapeBorder) ? shape : Border.all(
|
||||
// 设置边框样式
|
||||
color: Colors.grey,
|
||||
width: 2.0,
|
||||
|
@ -64,7 +64,7 @@ class _DemoState extends State<Demo> {
|
||||
*/
|
||||
Widget allFlatButtons(BuildContext context){
|
||||
return Container(
|
||||
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -109,7 +109,7 @@ Widget allFlatButtons(BuildContext context){
|
||||
flatButton.FlatButtonCustom('危险按钮',Colors.pink),
|
||||
SizedBox(height: 10.0),
|
||||
flatButton.FlatButtonCustom('点击我试试!', Colors.red,
|
||||
new Border.all(color: Colors.brown, width: 5.0, style: BorderStyle.solid),
|
||||
Border.all(color: Colors.brown, width: 5.0, style: BorderStyle.solid),
|
||||
() => _showMessage('点击了 FLAT BUTTON ', context)),
|
||||
SizedBox(height: 20.0)
|
||||
])
|
||||
@ -126,16 +126,16 @@ void _showMessage(String name, BuildContext context) {
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: new Text('提示'),
|
||||
content: new Text(name),
|
||||
title: Text('提示'),
|
||||
content: Text(name),
|
||||
actions: <Widget>[
|
||||
new FlatButton(
|
||||
FlatButton(
|
||||
// alert 的取消按钮
|
||||
onPressed: () {
|
||||
// 取消的事件
|
||||
Navigator.of(context).pop(true);
|
||||
},
|
||||
child: new Text('取消'))
|
||||
child: Text('取消'))
|
||||
]);
|
||||
}
|
||||
);
|
||||
@ -145,14 +145,14 @@ void _showMessage(String name, BuildContext context) {
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
|
@ -49,7 +49,7 @@ class FloatingActionButtonCustom extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final _onPressed = onPressed;
|
||||
return new FloatingActionButton(
|
||||
return FloatingActionButton(
|
||||
// 子视图,一般为Icon,不推荐使用文字
|
||||
child: const Icon(Icons.refresh),
|
||||
// FAB的文字解释,FAB被长按时显示,也是无障碍功能
|
||||
@ -109,8 +109,8 @@ class FloatingActionButtonCustom2 extends StatelessWidget {
|
||||
foregroundColor: Colors.white,
|
||||
backgroundColor: Colors.amber,
|
||||
//如果不手动设置icon和text颜色,则默认使用foregroundColor颜色
|
||||
icon: new Icon(Icons.flag,color: Colors.red),
|
||||
label: new Text('FloatingActionButton.extended', maxLines: 1),
|
||||
icon: Icon(Icons.flag,color: Colors.red),
|
||||
label: Text('FloatingActionButton.extended', maxLines: 1),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -50,9 +50,11 @@ class _DemoState extends State<Demo> {
|
||||
String buttonShapeType = 'border'; // 边框类型
|
||||
void setButtonShapeType(){
|
||||
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
|
||||
this.setState((){
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
if(mounted) {
|
||||
this.setState(() {
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
}
|
||||
}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -72,7 +74,7 @@ class _DemoState extends State<Demo> {
|
||||
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),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -109,16 +111,16 @@ Widget allFloatingActionButtons(BuildContext context,_DemoState that){
|
||||
// context: context,
|
||||
// builder: (BuildContext context) {
|
||||
// return AlertDialog(
|
||||
// title: new Text('提示'),
|
||||
// content: new Text(name),
|
||||
// title: Text('提示'),
|
||||
// content: Text(name),
|
||||
// actions: <Widget>[
|
||||
// new FlatButton(
|
||||
// FlatButton(
|
||||
// // alert 的取消按钮
|
||||
// onPressed: () {
|
||||
// // 取消的事件
|
||||
// Navigator.of(context).pop(true);
|
||||
// },
|
||||
// child: new Text('取消'))
|
||||
// child: Text('取消'))
|
||||
// ]);
|
||||
// }
|
||||
// );
|
||||
@ -128,14 +130,14 @@ Widget allFloatingActionButtons(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
@ -159,7 +161,7 @@ ShapeBorder drawShape(String type){
|
||||
break;
|
||||
case 'radius':
|
||||
return RoundedRectangleBorder(
|
||||
side:new BorderSide( // 保留原来的边框样式
|
||||
side: BorderSide( // 保留原来的边框样式
|
||||
width: borderWidth,
|
||||
color: _color,
|
||||
style: BorderStyle.solid,
|
||||
|
@ -75,7 +75,7 @@ class IconButtonCustom extends StatelessWidget {
|
||||
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),
|
||||
padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
|
||||
// 描述按下按钮时将发生的操作的文本
|
||||
tooltip:'这是${ type.codePoint }信息',
|
||||
// IconButton 的点击事件
|
||||
|
@ -45,9 +45,11 @@ class _DemoState extends State<Demo> {
|
||||
String buttonShapeType = 'border'; // 边框类型
|
||||
void setButtonShapeType(){
|
||||
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
|
||||
this.setState((){
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
if(mounted) {
|
||||
this.setState(() {
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
}
|
||||
}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -66,7 +68,7 @@ class _DemoState extends State<Demo> {
|
||||
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),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -106,14 +108,14 @@ Widget allIconButtons(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
@ -137,7 +139,7 @@ ShapeBorder drawShape(String type){
|
||||
break;
|
||||
case 'radius':
|
||||
return RoundedRectangleBorder(
|
||||
side:new BorderSide( // 保留原来的边框样式
|
||||
side: BorderSide( // 保留原来的边框样式
|
||||
width: borderWidth,
|
||||
color: _color,
|
||||
style: BorderStyle.solid,
|
||||
|
@ -79,7 +79,7 @@ class OutlineButtonCustom extends StatelessWidget {
|
||||
// 文本内容
|
||||
child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
|
||||
// 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor
|
||||
borderSide:new BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()),
|
||||
borderSide: BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()),
|
||||
// 按钮颜色
|
||||
color: _randomColor(),
|
||||
// 按钮失效时边框颜色
|
||||
@ -100,7 +100,7 @@ class OutlineButtonCustom extends StatelessWidget {
|
||||
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),
|
||||
padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
|
||||
//高亮时候的阴影
|
||||
highlightElevation: 10.0,
|
||||
shape: shape, // 在Outline 里只能设置圆角,边框用borderSide
|
||||
|
@ -54,9 +54,11 @@ class _DemoState extends State<Demo> {
|
||||
String buttonShapeType = 'border'; // 边框类型
|
||||
void setButtonShapeType(){
|
||||
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
|
||||
this.setState((){
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
if (mounted) {
|
||||
this.setState(() {
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
}
|
||||
}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -75,7 +77,7 @@ class _DemoState extends State<Demo> {
|
||||
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),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -136,16 +138,16 @@ Widget allOutlineButtons(BuildContext context,_DemoState that){
|
||||
// context: context,
|
||||
// builder: (BuildContext context) {
|
||||
// return AlertDialog(
|
||||
// title: new Text('提示'),
|
||||
// content: new Text(name),
|
||||
// title: Text('提示'),
|
||||
// content: Text(name),
|
||||
// actions: <Widget>[
|
||||
// new FlatButton(
|
||||
// FlatButton(
|
||||
// // alert 的取消按钮
|
||||
// onPressed: () {
|
||||
// // 取消的事件
|
||||
// Navigator.of(context).pop(true);
|
||||
// },
|
||||
// child: new Text('取消'))
|
||||
// child: Text('取消'))
|
||||
// ]);
|
||||
// }
|
||||
// );
|
||||
@ -155,14 +157,14 @@ Widget allOutlineButtons(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
@ -186,7 +188,7 @@ ShapeBorder drawShape(String type){
|
||||
break;
|
||||
case 'radius':
|
||||
return RoundedRectangleBorder(
|
||||
side:new BorderSide( // 保留原来的边框样式
|
||||
side: BorderSide( // 保留原来的边框样式
|
||||
width: borderWidth,
|
||||
color: _color,
|
||||
style: BorderStyle.solid,
|
||||
|
@ -71,8 +71,8 @@ class PopupMenuButtonDefault extends StatelessWidget {
|
||||
child: Text('点我试试'),
|
||||
onSelected: (String value) {},
|
||||
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
|
||||
new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
|
||||
new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
|
||||
PopupMenuItem(value: "选项一的内容", child: Text("选项一")),
|
||||
PopupMenuItem(value: "选项二的内容", child: Text("选项二"))
|
||||
]);
|
||||
}
|
||||
|
||||
@ -82,8 +82,8 @@ class PopupMenuButtonDefault extends StatelessWidget {
|
||||
icon: Icon(Icons.menu),
|
||||
onSelected: (String value) {},
|
||||
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
|
||||
new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
|
||||
new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
|
||||
PopupMenuItem(value: "选项一的内容", child: Text("选项一")),
|
||||
PopupMenuItem(value: "选项二的内容", child: Text("选项二"))
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -116,10 +116,10 @@ class PopupMenuButtonCustom extends StatelessWidget {
|
||||
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("选项四"))
|
||||
PopupMenuItem(value: "选项一的内容", child: Text("选项一")),
|
||||
PopupMenuItem(value: "选项二的内容", child: Text("选项二")),
|
||||
PopupMenuItem(value: "选项三的内容", child: Text("选项三")),
|
||||
PopupMenuItem(value: "选项四的内容", child: Text("选项四"))
|
||||
],
|
||||
// 应用于弹出菜单按钮的偏移量(x,y)。
|
||||
offset:Offset(0.0,50.0),
|
||||
@ -134,7 +134,7 @@ class PopupMenuButtonCustom extends StatelessWidget {
|
||||
});
|
||||
},
|
||||
// 默认情况下匹配IconButton的8 dps填充。在某些情况下,特别是在此按钮作为列表项的尾随元素出现的情况下,能够将填充设置为零是有用的。
|
||||
padding:new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0.0, right: 0.0),
|
||||
padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0.0, right: 0.0),
|
||||
//描述按下按钮时将发生的操作的文本。
|
||||
tooltip:'这是信息'
|
||||
);
|
||||
|
@ -64,7 +64,7 @@ class _DemoState extends State<Demo> {
|
||||
|
||||
Widget allPopupMenuButton(Demo widget,State parent){
|
||||
return Container(
|
||||
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
|
@ -105,10 +105,10 @@ class RaisedButtonCustom extends StatelessWidget {
|
||||
// 抗锯齿能力,抗锯齿等级依次递增,none(默认),hardEdge,antiAliasWithSaveLayer,antiAlias
|
||||
clipBehavior: Clip.antiAlias,
|
||||
padding:
|
||||
new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
|
||||
EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
|
||||
shape: (shape is ShapeBorder)
|
||||
? shape
|
||||
: new Border.all(
|
||||
: Border.all(
|
||||
// 设置边框样式
|
||||
color: Colors.grey,
|
||||
width: 2.0,
|
||||
|
@ -53,9 +53,11 @@ class _DemoState extends State<Demo> {
|
||||
String buttonShapeType = 'border'; // 边框类型
|
||||
void setButtonShapeType(){
|
||||
String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
|
||||
this.setState((){
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
if(mounted) {
|
||||
this.setState(() {
|
||||
buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
}
|
||||
}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -74,7 +76,7 @@ class _DemoState extends State<Demo> {
|
||||
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),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -135,16 +137,16 @@ Widget allRaisedButtons(BuildContext context,_DemoState that){
|
||||
// context: context,
|
||||
// builder: (BuildContext context) {
|
||||
// return AlertDialog(
|
||||
// title: new Text('提示'),
|
||||
// content: new Text(name),
|
||||
// title: Text('提示'),
|
||||
// content: Text(name),
|
||||
// actions: <Widget>[
|
||||
// new FlatButton(
|
||||
// FlatButton(
|
||||
// // alert 的取消按钮
|
||||
// onPressed: () {
|
||||
// // 取消的事件
|
||||
// Navigator.of(context).pop(true);
|
||||
// },
|
||||
// child: new Text('取消'))
|
||||
// child: Text('取消'))
|
||||
// ]);
|
||||
// }
|
||||
// );
|
||||
@ -154,14 +156,14 @@ Widget allRaisedButtons(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
@ -185,7 +187,7 @@ ShapeBorder drawShape(String type){
|
||||
break;
|
||||
case 'radius':
|
||||
return RoundedRectangleBorder(
|
||||
side:new BorderSide( // 保留原来的边框样式
|
||||
side: BorderSide( // 保留原来的边框样式
|
||||
width: borderWidth,
|
||||
color: _color,
|
||||
style: BorderStyle.solid,
|
||||
|
@ -62,7 +62,7 @@ class RawMaterialButtonCustom extends StatelessWidget {
|
||||
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),
|
||||
padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
|
||||
//高亮时候的阴影
|
||||
highlightElevation: 10.0,
|
||||
// 按钮材质的形状
|
||||
|
@ -43,9 +43,11 @@ class _DemoState extends State<Demo> {
|
||||
String buttonShapeType = 'border'; // 边框类型
|
||||
void setButtonShapeType(){
|
||||
//String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
|
||||
this.setState((){
|
||||
//buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
if( mounted ) {
|
||||
this.setState(() {
|
||||
//buttonShapeType = _buttonShapeType;
|
||||
});
|
||||
}
|
||||
}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -64,7 +66,7 @@ class _DemoState extends State<Demo> {
|
||||
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),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -108,16 +110,16 @@ Widget allRawMaterialButtons(BuildContext context,_DemoState that){
|
||||
// context: context,
|
||||
// builder: (BuildContext context) {
|
||||
// return AlertDialog(
|
||||
// title: new Text('提示'),
|
||||
// content: new Text(name),
|
||||
// title: Text('提示'),
|
||||
// content: Text(name),
|
||||
// actions: <Widget>[
|
||||
// new FlatButton(
|
||||
// FlatButton(
|
||||
// // alert 的取消按钮
|
||||
// onPressed: () {
|
||||
// // 取消的事件
|
||||
// Navigator.of(context).pop(true);
|
||||
// },
|
||||
// child: new Text('取消'))
|
||||
// child: Text('取消'))
|
||||
// ]);
|
||||
// }
|
||||
// );
|
||||
@ -127,14 +129,14 @@ Widget allRawMaterialButtons(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
//style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return new Align(
|
||||
//style: TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
@ -158,7 +160,7 @@ ShapeBorder drawShape(String type){
|
||||
break;
|
||||
case 'radius':
|
||||
return RoundedRectangleBorder(
|
||||
side:new BorderSide( // 保留原来的边框样式
|
||||
side: BorderSide( // 保留原来的边框样式
|
||||
width: borderWidth,
|
||||
color: _color,
|
||||
style: BorderStyle.solid,
|
||||
|
@ -30,9 +30,11 @@ class _CheckboxDefault extends State {
|
||||
tristate:false,
|
||||
value: isChecked,
|
||||
onChanged: (bool bol) {
|
||||
setState((){
|
||||
isChecked = bol;
|
||||
});
|
||||
if(mounted) {
|
||||
setState(() {
|
||||
isChecked = bol;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -58,9 +60,11 @@ class CheckboxSelect extends StatelessWidget {
|
||||
tristate:false,
|
||||
value: parent.selectValue == this.index,
|
||||
onChanged: (bool bol) {
|
||||
parent.setState((){
|
||||
parent.selectValue = bol ? this.index : -1;
|
||||
});
|
||||
if(parent.mounted) {
|
||||
parent.setState(() {
|
||||
parent.selectValue = bol ? this.index : -1;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -59,7 +59,7 @@ class _DemoState extends State<Demo> {
|
||||
*/
|
||||
Widget allCheckboxs(BuildContext context,_DemoState that){
|
||||
return Container(
|
||||
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
@ -97,13 +97,13 @@ Widget allCheckboxs(BuildContext context,_DemoState that){
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt){
|
||||
return new Align(
|
||||
return 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)
|
||||
// Text(txt, style: TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
|
||||
])
|
||||
);
|
||||
}
|
||||
|
@ -25,7 +25,9 @@ class _CheckboxListTileStateDefault extends State {
|
||||
for (var i = 0; i < isChecks.length; i++) {
|
||||
isChecks[i] = value;
|
||||
}
|
||||
setState(() => _value = value);
|
||||
if(mounted) {
|
||||
setState(() => _value = value);
|
||||
}
|
||||
}
|
||||
bool isCheck=false;
|
||||
List<bool> isChecks=[false,false,false,false];
|
||||
@ -34,7 +36,7 @@ class _CheckboxListTileStateDefault extends State {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
new Center(
|
||||
Center(
|
||||
child: CheckboxListTile(
|
||||
value: _value,
|
||||
selected:true,// 默认文字是否高亮
|
||||
@ -48,22 +50,24 @@ class _CheckboxListTileStateDefault extends State {
|
||||
activeColor: Colors.red, // 选中此复选框时要使用的颜色
|
||||
),
|
||||
),
|
||||
new Center(
|
||||
child: new CheckboxListTile(
|
||||
Center(
|
||||
child: CheckboxListTile(
|
||||
value: isChecks[0],
|
||||
title: new Text('选项1'),
|
||||
title: Text('选项1'),
|
||||
activeColor: _value ? Colors.red : Colors.green,
|
||||
controlAffinity: ListTileControlAffinity.platform,
|
||||
onChanged: (bool){
|
||||
setState(() {
|
||||
isChecks[0]=bool;
|
||||
});
|
||||
if(mounted) {
|
||||
setState(() {
|
||||
isChecks[0] = bool;
|
||||
});
|
||||
}
|
||||
}),
|
||||
),
|
||||
new Center(
|
||||
child: new CheckboxListTile(
|
||||
Center(
|
||||
child: CheckboxListTile(
|
||||
value: isChecks[1],
|
||||
title: new Text('选项2'),
|
||||
title: Text('选项2'),
|
||||
activeColor: _value ? Colors.red : Colors.green,
|
||||
controlAffinity: ListTileControlAffinity.platform,
|
||||
onChanged: (bool){
|
||||
@ -72,10 +76,10 @@ class _CheckboxListTileStateDefault extends State {
|
||||
});
|
||||
}),
|
||||
),
|
||||
new Center(
|
||||
child: new CheckboxListTile(
|
||||
Center(
|
||||
child: CheckboxListTile(
|
||||
value: isChecks[2],
|
||||
title: new Text('选项3'),
|
||||
title: Text('选项3'),
|
||||
activeColor: _value ? Colors.red : Colors.green,
|
||||
controlAffinity: ListTileControlAffinity.platform,
|
||||
onChanged: (bool){
|
||||
@ -84,10 +88,10 @@ class _CheckboxListTileStateDefault extends State {
|
||||
});
|
||||
}),
|
||||
),
|
||||
new Center(
|
||||
child: new CheckboxListTile(
|
||||
Center(
|
||||
child: CheckboxListTile(
|
||||
value: isChecks[3],
|
||||
title: new Text('选项4'),
|
||||
title: Text('选项4'),
|
||||
activeColor: _value ? Colors.red : Colors.green,
|
||||
controlAffinity: ListTileControlAffinity.platform,
|
||||
onChanged: (bool){
|
||||
|
@ -61,7 +61,7 @@ class _DemoState extends State<Demo> {
|
||||
*/
|
||||
Widget allCheckboxs(BuildContext context, _DemoState that) {
|
||||
return Container(
|
||||
//padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
//padding: EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
|
||||
child: Column(
|
||||
//mainAxisSize: MainAxisSize.max,
|
||||
children:[
|
||||
@ -79,7 +79,7 @@ Widget allCheckboxs(BuildContext context, _DemoState that) {
|
||||
* 带align的text
|
||||
* */
|
||||
Widget textAlignBar(String txt) {
|
||||
return new Align(
|
||||
return Align(
|
||||
alignment: FractionalOffset.centerLeft,
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
|
@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
|
||||
class DefaultTextField extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(30.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start, //文本是起始端对齐
|
||||
@ -29,7 +29,7 @@ class CustomTextField extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(30.0),
|
||||
child: TextField(
|
||||
keyboardType: TextInputType.number,
|
||||
|
@ -22,27 +22,27 @@ class _Demo extends State<RadioADemo> {
|
||||
}
|
||||
Widget build(BuildContext context) {
|
||||
return (
|
||||
new Container(
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: new Column(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
new Radio(
|
||||
Radio(
|
||||
value: 1,
|
||||
groupValue: groupValue,//当value和groupValue一致的时候则选中
|
||||
onChanged: (T){
|
||||
onChange(T);
|
||||
}
|
||||
),
|
||||
new Radio(
|
||||
Radio(
|
||||
value: 2,
|
||||
groupValue: groupValue,
|
||||
onChanged: (T){
|
||||
onChange(T);
|
||||
}
|
||||
),
|
||||
new Radio(
|
||||
Radio(
|
||||
value: 3,
|
||||
groupValue: groupValue,
|
||||
onChanged: (T){
|
||||
|
@ -11,28 +11,19 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
const content1 = """
|
||||
# Radio
|
||||
### **简介**
|
||||
> material design 风格的单选按钮
|
||||
|
||||
Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。
|
||||
|
||||
在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
|
||||
|
||||
# 示例显示
|
||||
""";
|
||||
|
||||
const content2 = """
|
||||
# 基本用法
|
||||
|
||||
```
|
||||
new Radio(
|
||||
value: value,
|
||||
groupValue: groupValue, //当value和groupValue一致的时候则选中
|
||||
onChanged: (T){
|
||||
onChange(T);
|
||||
}
|
||||
|
||||
````
|
||||
### **基本用法**
|
||||
以下是Radio的属性主产明
|
||||
- activeColor → Color - 激活时的颜色。
|
||||
- groupValue → T - 选择组的值。
|
||||
- onChanged → ValueChanged - 改变时触发。
|
||||
- value → T - 单选的值。
|
||||
""";
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Form/Radio/index';
|
||||
@ -46,7 +37,6 @@ class _DemoState extends State<Demo> {
|
||||
contentList: [
|
||||
content1,
|
||||
new RadioADemo(),
|
||||
content2
|
||||
],
|
||||
title: 'Radio',
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html',
|
||||
|
@ -24,7 +24,7 @@ class _Demo extends State<DemoA> {
|
||||
}
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
RadioListTile<String>(
|
||||
title: const Text('A'),
|
||||
|
@ -11,28 +11,15 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
const content1 = """
|
||||
# RadioListTile
|
||||
### **简介**
|
||||
> material design 风格的单选按钮附加文字label
|
||||
|
||||
点击文字的同时 , 将会出发 Radio的点击效果.
|
||||
|
||||
功能同 @Radio
|
||||
|
||||
# 示例显示
|
||||
""";
|
||||
|
||||
const content2 = """
|
||||
# 基本用法
|
||||
|
||||
``` dart
|
||||
RadioListTile(
|
||||
title: const Text('title'),
|
||||
value: value,
|
||||
groupValue: groupValue,
|
||||
onChanged:onChange
|
||||
)
|
||||
```
|
||||
|
||||
### **基本用法**
|
||||
Radio是单选框,和checkbox一样本身不包含状态,当groupValue = value时代表选中状态
|
||||
""";
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Form/RadioListTile/index';
|
||||
@ -45,8 +32,8 @@ class _DemoState extends State<Demo> {
|
||||
return WidgetDemo(
|
||||
contentList: [
|
||||
content1,
|
||||
new DemoA(),
|
||||
content2
|
||||
new DemoA()
|
||||
|
||||
],
|
||||
title: 'RadioListTile',
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/RadioListTile-class.html',
|
||||
|
@ -16,7 +16,7 @@ class SliderDemo extends StatefulWidget {
|
||||
class _Demo extends State<SliderDemo> {
|
||||
double value = 0.0;
|
||||
Widget build(BuildContext context) {
|
||||
return new Slider(
|
||||
return Slider(
|
||||
value: value,//实际进度的位置
|
||||
inactiveColor: Colors.black12,//进度中不活动部分的颜色
|
||||
label: 'value: $value',
|
||||
@ -43,8 +43,8 @@ class SliderThemeDemo extends StatefulWidget {
|
||||
class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
double value = 0.0;
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
child: new SliderTheme(
|
||||
return Container(
|
||||
child: SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
// activeTickMarkColor:Colors.yellowAccent,
|
||||
activeTrackColor: Colors.yellowAccent,//实际进度的颜色
|
||||
@ -52,21 +52,21 @@ class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
thumbColor: Colors.black,//滑块中心的颜色
|
||||
inactiveTrackColor:Colors.red,//默 认进度条的颜色
|
||||
valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
|
||||
valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
|
||||
valueIndicatorTextStyle: TextStyle(//提示气泡里面文字的样式
|
||||
color: Colors.white,
|
||||
),
|
||||
inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
|
||||
overlayColor: Colors.pink,//滑块边缘颜色
|
||||
),
|
||||
child: new Container(
|
||||
child: Container(
|
||||
width: 340.0,
|
||||
margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
|
||||
child: new Row(
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
new Text('0.0'),
|
||||
new Expanded(
|
||||
Text('0.0'),
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: new Slider(
|
||||
child: Slider(
|
||||
value: value,
|
||||
label: '$value',
|
||||
divisions: 10,
|
||||
@ -79,7 +79,7 @@ class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
max: 100.0,
|
||||
),
|
||||
),
|
||||
new Text('100.0'),
|
||||
Text('100.0'),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -49,19 +49,19 @@ const contentB = '''
|
||||
如果当前Slider样式 无法满足需求, 可以通过 ** SliderTheme ** 定制复杂样式
|
||||
|
||||
```
|
||||
new SliderTheme(
|
||||
SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
activeTrackColor: Colors.yellowAccent,//实际进度的颜色
|
||||
inactiveTickMarkColor:Colors.black
|
||||
thumbColor: Colors.black,//滑块中心的颜色
|
||||
inactiveTrackColor:Colors.red,//默 认进度条的颜色
|
||||
valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
|
||||
valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
|
||||
valueIndicatorTextStyle: TextStyle(//提示气泡里面文字的样式
|
||||
color: Colors.white,
|
||||
),
|
||||
inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
|
||||
overlayColor: Colors.pink,//滑块边缘颜色
|
||||
child: new Slider()
|
||||
child: Slider()
|
||||
)
|
||||
|
||||
```
|
||||
|
@ -17,8 +17,8 @@ class SliderThemeDemo extends StatefulWidget {
|
||||
class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
double value = 0.0;
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
child: new SliderTheme(
|
||||
return Container(
|
||||
child: SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
// activeTickMarkColor:Colors.yellowAccent,
|
||||
activeTrackColor: Colors.yellowAccent,//实际进度的颜色
|
||||
@ -26,21 +26,21 @@ class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
thumbColor: Colors.black,//滑块中心的颜色
|
||||
inactiveTrackColor:Colors.red,//默 认进度条的颜色
|
||||
valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
|
||||
valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
|
||||
valueIndicatorTextStyle: TextStyle(//提示气泡里面文字的样式
|
||||
color: Colors.white,
|
||||
),
|
||||
inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
|
||||
overlayColor: Colors.pink,//滑块边缘颜色
|
||||
),
|
||||
child: new Container(
|
||||
child: Container(
|
||||
width: 340.0,
|
||||
margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
|
||||
child: new Row(
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
new Text('0.0'),
|
||||
new Expanded(
|
||||
Text('0.0'),
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: new Slider(
|
||||
child: Slider(
|
||||
value: value,
|
||||
label: '$value',
|
||||
divisions: 10,
|
||||
@ -53,7 +53,7 @@ class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
max: 100.0,
|
||||
),
|
||||
),
|
||||
new Text('100.0'),
|
||||
Text('100.0'),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -24,7 +24,7 @@ const contentA = '''
|
||||
基本属性参考以下代码:
|
||||
|
||||
```
|
||||
new SliderTheme(
|
||||
SliderTheme(
|
||||
data: SliderThemeData({
|
||||
@required Color activeTrackColor,
|
||||
@required Color inactiveTrackColor,
|
||||
@ -67,7 +67,7 @@ class _Demo extends State<Demo> {
|
||||
codeUrl: 'elements/Form/Slider/SliderTheme/demo.dart',
|
||||
contentList: [
|
||||
contentA,
|
||||
new SliderThemeDemo(),
|
||||
SliderThemeDemo(),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/SliderTheme-class.html',
|
||||
);
|
||||
|
@ -17,8 +17,8 @@ class SliderThemeDemo extends StatefulWidget {
|
||||
class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
double value = 0.0;
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
child: new SliderTheme(
|
||||
return Container(
|
||||
child: SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
// activeTickMarkColor:Colors.yellowAccent,
|
||||
activeTrackColor: Colors.yellowAccent,//实际进度的颜色
|
||||
@ -26,21 +26,21 @@ class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
thumbColor: Colors.black,//滑块中心的颜色
|
||||
inactiveTrackColor:Colors.red,//默 认进度条的颜色
|
||||
valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
|
||||
valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
|
||||
valueIndicatorTextStyle: TextStyle(//提示气泡里面文字的样式
|
||||
color: Colors.white,
|
||||
),
|
||||
inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
|
||||
overlayColor: Colors.pink,//滑块边缘颜色
|
||||
),
|
||||
child: new Container(
|
||||
child: Container(
|
||||
width: 340.0,
|
||||
margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
|
||||
child: new Row(
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
new Text('0.0'),
|
||||
new Expanded(
|
||||
Text('0.0'),
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: new Slider(
|
||||
child: Slider(
|
||||
value: value,
|
||||
label: '$value',
|
||||
divisions: 10,
|
||||
@ -53,7 +53,7 @@ class _SliderThemeDemo extends State<SliderThemeDemo> {
|
||||
max: 100.0,
|
||||
),
|
||||
),
|
||||
new Text('100.0'),
|
||||
Text('100.0'),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -10,7 +10,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
const contentA = '''
|
||||
### **简介**
|
||||
> SliderTheme的data修饰属性 **SliderThemeData**
|
||||
@ -21,30 +21,6 @@ const contentA = '''
|
||||
|
||||
> 配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式
|
||||
|
||||
构造函数如下
|
||||
````
|
||||
const SliderThemeData({
|
||||
@required Color activeTrackColor,
|
||||
@required Color inactiveTrackColor,
|
||||
@required Color disabledActiveTrackColor,
|
||||
@required Color disabledInactiveTrackColor,
|
||||
@required Color activeTickMarkColor,
|
||||
@required Color inactiveTickMarkColor,
|
||||
@required Color disabledActiveTickMarkColor,
|
||||
@required Color disabledInactiveTickMarkColor,
|
||||
@required Color thumbColor,
|
||||
@required Color disabledThumbColor,
|
||||
@required Color overlayColor,
|
||||
@required Color valueIndicatorColor,
|
||||
@required SliderComponentShape thumbShape,
|
||||
@required SliderComponentShape valueIndicatorShape,
|
||||
@required ShowValueIndicator showValueIndicator,
|
||||
@required TextStyle valueIndicatorTextStyle
|
||||
})
|
||||
|
||||
````
|
||||
|
||||
### **基本实例**
|
||||
|
||||
|
||||
''';
|
||||
@ -56,14 +32,14 @@ class Demo extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _Demo extends State<Demo> {
|
||||
|
||||
Color c = CupertinoColors.activeBlue;
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'SliderThemeData',
|
||||
codeUrl: 'elements/Form/Slider/SliderThemeData/demo.dart',
|
||||
contentList: [
|
||||
contentA,
|
||||
new SliderThemeDemo()
|
||||
SliderThemeDemo()
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/SliderThemeData-class.html',
|
||||
);
|
||||
|
@ -39,7 +39,7 @@ class _Demo extends State<Demo> {
|
||||
codeUrl: 'elements/Form/Switch/AnimatedSwitcher/demo.dart',
|
||||
contentList: [
|
||||
contentA,
|
||||
new AnimatedSwitcherDemo()
|
||||
AnimatedSwitcherDemo()
|
||||
],
|
||||
docUrl: '',
|
||||
);
|
||||
|
@ -18,7 +18,7 @@ class SwitchDemo extends StatefulWidget {
|
||||
class _Demo extends State<SwitchDemo> {
|
||||
bool check = false;
|
||||
Widget build(BuildContext context) {
|
||||
return new Switch(
|
||||
return Switch(
|
||||
value: this.check,
|
||||
onChanged: (bool val) {
|
||||
this.setState(() {
|
||||
@ -36,7 +36,7 @@ class SwitchHighDemo extends StatefulWidget {
|
||||
class _SwitchHighDemo extends State<SwitchHighDemo> {
|
||||
bool check = false;
|
||||
Widget build(BuildContext context) {
|
||||
return new Switch.adaptive(
|
||||
return Switch.adaptive(
|
||||
value: this.check,
|
||||
activeColor: Colors.blue, // 激活时原点颜色
|
||||
onChanged: (bool val) {
|
||||
@ -56,7 +56,7 @@ class SwitchTypesDemo extends StatefulWidget {
|
||||
class _SwitchTypesDemo extends State<SwitchTypesDemo> {
|
||||
bool check = false;
|
||||
Widget build(BuildContext context) {
|
||||
return new Switch(
|
||||
return Switch(
|
||||
value: this.check,
|
||||
activeTrackColor:Colors.green,
|
||||
inactiveThumbColor: Colors.black,
|
||||
|
@ -17,22 +17,8 @@ const contentA = '''
|
||||
|
||||
|
||||
### **基本用法**
|
||||
通常用于Bool值参数的设置.
|
||||
|
||||
```
|
||||
new Switch(
|
||||
value: isChecked,
|
||||
activeColor: Colors.blue, // 激活时原点颜色
|
||||
onChanged: (bool val) {
|
||||
this.setState(() {
|
||||
this.isChecked = !this.isChecked;
|
||||
});
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
### **基本实例**
|
||||
|
||||
@SwitchDemo
|
||||
''';
|
||||
|
||||
|
||||
@ -60,18 +46,6 @@ const contentC = '''
|
||||
|
||||
''';
|
||||
|
||||
const contentD = '''
|
||||
|
||||
```
|
||||
activeTrackColor:Colors.green,
|
||||
inactiveThumbColor: Colors.black,
|
||||
inactiveThumbImage: NetworkImage('https://flutter.io/images/homepage/header-illustration.png'),
|
||||
activeThumbImage: NetworkImage(
|
||||
"https://flutter.io/images/homepage/screenshot-2.png"
|
||||
),
|
||||
inactiveTrackColor: Colors.yellow,
|
||||
```
|
||||
''';
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = 'elements/Form/Switch/Switch';
|
||||
@ -83,15 +57,14 @@ class _Demo extends State<Demo> {
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'Switch',
|
||||
codeUrl: 'elements/Form/Switch/Switch/demo.dart',
|
||||
codeUrl: '/elements/Form/Switch/Switch/demo.dart',
|
||||
contentList: [
|
||||
contentA,
|
||||
SwitchDemo(),
|
||||
contentB,
|
||||
SwitchHighDemo(),
|
||||
contentC,
|
||||
SwitchTypesDemo(),
|
||||
contentD
|
||||
SwitchTypesDemo()
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html',
|
||||
);
|
||||
|
@ -18,7 +18,7 @@ class SwitchListTileDemo extends StatefulWidget {
|
||||
class _Demo extends State<SwitchListTileDemo> {
|
||||
bool _lights = false;
|
||||
Widget build(BuildContext context) {
|
||||
return new SwitchListTile(
|
||||
return SwitchListTile(
|
||||
title: const Text('Lights'),
|
||||
value: _lights,
|
||||
onChanged: (bool value) { setState(() { _lights = value; }); },
|
||||
|
@ -1,9 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
// import 'package:flutter_go/widgets/elements/Form/Text/RichText/demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
import 'package:flutter_go/widgets/elements/Form/Text/RichText/demo.dart';
|
||||
const String intro = """
|
||||
### **简介**
|
||||
|
||||
@ -13,33 +11,13 @@ const String intro = """
|
||||
|
||||
无论是Text或者Text.rich, 查看源代码发现. 都是由RichText构建出来
|
||||
|
||||
RichText的源码展示
|
||||
|
||||
```
|
||||
// Text 源码
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
...
|
||||
Widget result = RichText(
|
||||
...
|
||||
|
||||
style: effectiveTextStyle,
|
||||
text: data,
|
||||
children: textSpan != null ? <TextSpan>[textSpan] : null,
|
||||
),
|
||||
);
|
||||
...
|
||||
return result;
|
||||
}
|
||||
```
|
||||
### **基本实例**
|
||||
### **基本用法**
|
||||
我们可以让一段文本通过使用不同的TextSpan显示不同的样式。比如我们让"Hello beautiful world"的每个单词都显示不同的样式.
|
||||
|
||||
""";
|
||||
const String diff = """
|
||||
|
||||
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Form/Text/RichText';
|
||||
_Demo createState() => _Demo();
|
||||
|
@ -1,16 +1,16 @@
|
||||
import '../../../../model/widget.dart';
|
||||
import "package:flutter/material.dart";
|
||||
|
||||
import 'RichText/index.dart' as RichText;
|
||||
// import 'RichText/index.dart' as RichText;
|
||||
import 'Text/index.dart' as Text;
|
||||
|
||||
|
||||
List<WidgetPoint> widgetPoints = [
|
||||
WidgetPoint(
|
||||
name: 'RichText',
|
||||
routerName: RichText.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => RichText.Demo(),
|
||||
),
|
||||
// WidgetPoint(
|
||||
// name: 'RichText',
|
||||
// routerName: RichText.Demo.routeName,
|
||||
// buildRouter: (BuildContext context) => RichText.Demo(),
|
||||
// ),
|
||||
WidgetPoint(
|
||||
name: 'Text',
|
||||
routerName: Text.Demo.routeName,
|
||||
|
@ -18,13 +18,13 @@ class AlignAlignment extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
return Container(
|
||||
color: Color(0xffd81b60),
|
||||
width: 90.0,
|
||||
height: 50.0,
|
||||
child: new Align(
|
||||
child: Align(
|
||||
alignment: status,
|
||||
child: new Text(
|
||||
child: Text(
|
||||
dec,
|
||||
style: TextStyle(fontSize: 12.0, color: Color(0xffffffff)),
|
||||
),
|
||||
@ -45,10 +45,10 @@ class AlignFactor extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Container(
|
||||
margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),
|
||||
return Container(
|
||||
margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
child: new Align(
|
||||
child: Align(
|
||||
alignment: status,
|
||||
widthFactor: wFactor,
|
||||
heightFactor: hFactor,
|
||||
|
@ -40,10 +40,10 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _alignCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
SizedBox(height: 10.0),
|
||||
new Row(
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
AlignAlignment(Alignment.center, 'center'),
|
||||
@ -51,7 +51,7 @@ class _DemoState extends State<Demo> {
|
||||
],
|
||||
),
|
||||
SizedBox(height: 10.0),
|
||||
new Row(
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
AlignAlignment(Alignment.centerRight, 'centerRight'),
|
||||
@ -60,7 +60,7 @@ class _DemoState extends State<Demo> {
|
||||
],
|
||||
),
|
||||
SizedBox(height: 10.0),
|
||||
new Row(
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
AlignAlignment(Alignment.topLeft, 'topLeft'),
|
||||
@ -71,11 +71,11 @@ class _DemoState extends State<Demo> {
|
||||
SizedBox(height: 10.0),
|
||||
MarkdownBody(data: _flatText1),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
color: Color(0xffe91e63),
|
||||
child: new Align(
|
||||
child: Align(
|
||||
alignment: Alignment.topLeft,
|
||||
child: new Text(
|
||||
child: Text(
|
||||
"Align",
|
||||
style: TextStyle(color: Color(0xffffffff)),
|
||||
),
|
||||
|
@ -29,12 +29,12 @@ class ConstrainedBoxCreate extends StatelessWidget {
|
||||
maxWidth: 300.0,
|
||||
maxHeight: 50.0,
|
||||
),
|
||||
child: new Container(
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
|
||||
//child 宽高超过制定限制范围失效,效果宽/高=100/20区域
|
||||
width: currWidth,
|
||||
height: 250.0,
|
||||
child: new Text(
|
||||
child: Text(
|
||||
describe,
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
|
@ -21,7 +21,7 @@ class DecoratedBoxCreate extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xff7c94b6),
|
||||
//设置图片内容
|
||||
image: new DecorationImage(
|
||||
image: DecorationImage(
|
||||
fit: BoxFit.cover,
|
||||
image: ExactAssetImage('assets/images/food01.jpeg')),
|
||||
//外宽边框,可以不设置
|
||||
@ -46,7 +46,7 @@ class DecoratedBoxCreateTwo extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xff7c94b6),
|
||||
//设置图片内容
|
||||
image: new DecorationImage(
|
||||
image: DecorationImage(
|
||||
fit: BoxFit.cover,
|
||||
image: ExactAssetImage('assets/images/food01.jpeg')),
|
||||
//根据传入的不同大小,呈现图片效弧度不同,
|
||||
@ -67,7 +67,7 @@ class DecoratedBoxCreateShape extends StatelessWidget {
|
||||
position: DecorationPosition.background,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xff7c94b6),
|
||||
image: new DecorationImage(
|
||||
image: DecorationImage(
|
||||
fit: BoxFit.cover,
|
||||
image: ExactAssetImage('assets/images/food01.jpeg')),
|
||||
border: Border.all(
|
||||
|
@ -45,7 +45,7 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _decoratedBoxCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
height: 100.0,
|
||||
|
@ -15,11 +15,11 @@ class FittedBoxDefault extends StatelessWidget {
|
||||
final BoxFit curfit;
|
||||
final String dec;
|
||||
|
||||
FittedBoxDefault({Key key, this.curfit, this.dec});
|
||||
FittedBoxDefault({Key key, this.curfit, this.dec});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
//外部有位置约束,内部大小设定失效,保持和外部约束一致
|
@ -1,4 +1,3 @@
|
||||
|
||||
/**
|
||||
* Author: xiaojia.dxj
|
||||
* Date: 2019-01-08
|
||||
@ -9,7 +8,7 @@
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as fittedBox;
|
||||
import './demo.dart';
|
||||
|
||||
const String Text0 = """
|
||||
### **FittedBox**
|
||||
@ -53,18 +52,16 @@ class _DemoState extends State<Demo> {
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
fittedBox.FittedBoxDefault(
|
||||
/**
|
||||
* 设置child写入布局期间分配空间
|
||||
*/
|
||||
FittedBoxDefault(
|
||||
//设置child写入布局期间分配空间
|
||||
curfit: BoxFit.contain,
|
||||
dec: 'contain',
|
||||
),
|
||||
fittedBox.FittedBoxDefault(
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.fill,
|
||||
dec: 'fill',
|
||||
),
|
||||
fittedBox.FittedBoxDefault(
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.cover,
|
||||
dec: 'cover',
|
||||
),
|
||||
@ -76,11 +73,11 @@ class _DemoState extends State<Demo> {
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
fittedBox.FittedBoxDefault(
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.fitHeight,
|
||||
dec: 'fitHeight',
|
||||
),
|
||||
fittedBox.FittedBoxDefault(
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.fitWidth,
|
||||
dec: 'fitWidth',
|
||||
),
|
||||
@ -92,11 +89,11 @@ class _DemoState extends State<Demo> {
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
fittedBox.FittedBoxDefault(
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.none,
|
||||
dec: 'none',
|
||||
),
|
||||
fittedBox.FittedBoxDefault(
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.scaleDown,
|
||||
dec: 'scaleDown',
|
||||
),
|
@ -10,11 +10,11 @@ class OverflowBoxDefault extends StatelessWidget {
|
||||
|
||||
OverflowBoxDefault(
|
||||
{Key key,
|
||||
this.curmaxHeight,
|
||||
this.curmaxWidth,
|
||||
this.curWidth,
|
||||
this.curHeight,
|
||||
this.curalignment})
|
||||
this.curmaxHeight,
|
||||
this.curmaxWidth,
|
||||
this.curWidth,
|
||||
this.curHeight,
|
||||
this.curalignment})
|
||||
: super(key: key);
|
||||
|
||||
@override
|
||||
@ -25,18 +25,18 @@ class OverflowBoxDefault extends StatelessWidget {
|
||||
//设置最大宽,高
|
||||
maxWidth: curmaxWidth,
|
||||
maxHeight: curmaxHeight,
|
||||
/**
|
||||
* 调整child位置
|
||||
*/
|
||||
|
||||
//调整child位置
|
||||
alignment: curalignment,
|
||||
child: Container(
|
||||
/**
|
||||
* widget宽高大于overflowBox设置的最大,以overflowbox设置的最大宽高为限制,
|
||||
* 小于overflowBox 设置的最大限度,子widget能够完全显示
|
||||
* * */
|
||||
//widget宽高大于overflowBox设置的最大,以overflowbox设置的最大宽高为限制,
|
||||
//小于overflowBox 设置的最大限度,子widget能够完全显示
|
||||
height: curHeight,
|
||||
width: curWidth,
|
||||
child: Text("$curmaxWidth * $curmaxHeight",style: TextStyle(color: Colors.white),),
|
||||
child: Text(
|
||||
"$curmaxWidth * $curmaxHeight",
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
color: Color(0xfff48fb1),
|
||||
),
|
||||
);
|
||||
|
@ -76,7 +76,10 @@ class _DemoState extends State<Demo> {
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
SizedBox(height: 50,child: Text("宽高都大于最大限制"),),
|
||||
SizedBox(
|
||||
height: 50,
|
||||
child: Text("宽高都大于最大限制"),
|
||||
),
|
||||
Container(
|
||||
width: 100.0,
|
||||
height: 100.0,
|
||||
@ -90,7 +93,6 @@ class _DemoState extends State<Demo> {
|
||||
curalignment: Alignment.center,
|
||||
),
|
||||
),
|
||||
|
||||
],
|
||||
);
|
||||
}
|
||||
|
@ -1,22 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class RenderBoxDemo extends StatefulWidget {
|
||||
_RenderBoxDemoState createState() => _RenderBoxDemoState();
|
||||
}
|
||||
|
||||
class _RenderBoxDemoState extends State<RenderBoxDemo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
// child: RenderFoo(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class RenderFoo extends RenderBox {
|
||||
@override
|
||||
bool get hasSize => super.hasSize;
|
||||
|
||||
@override
|
||||
BoxConstraints get constraints => super.constraints;
|
||||
}
|
@ -1,62 +0,0 @@
|
||||
/*
|
||||
* @Author: xiaojia.dxj
|
||||
* @Date: 2019-01-08 15:56:26
|
||||
* @Last Modified by: xiaojia.dxj
|
||||
* @Last Modified time: 2019-01-08 15:56:26
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
|
||||
const String _Text = '''
|
||||
### **简介**
|
||||
> BoxConstraints为抽象类,我们可以使用BoxConstraints,一个不可边的约束布局,renderBox布局
|
||||
- 一个尺寸尊重一个BoxConstraints,当且仅当,以下关系式的成立:
|
||||
minWidth <= Size.width <= maxWidth
|
||||
minHeight <= Size.height <= maxHeight
|
||||
约束本身必须满足这些关系:
|
||||
|
||||
0.0 <= minWidth <= maxWidth <= double.infinity
|
||||
0.0 <= minHeight <= maxHeight <= double.infinity
|
||||
double.infinity是每个约束的合法值。
|
||||
''';
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/RenderBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'Table',
|
||||
codeUrl: 'elements/Frame/Box/RenderBox/demo.dart',
|
||||
contentList: [
|
||||
_Text,
|
||||
_sizeBoxCreate(),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/RenderBox-class.html',
|
||||
);
|
||||
}
|
||||
|
||||
Column _sizeBoxCreate() {
|
||||
return new Column(
|
||||
children: <Widget>[
|
||||
/**
|
||||
* Immutable layout constraints for RenderBox layout.
|
||||
*/
|
||||
SizedBox(
|
||||
width: 900.0,
|
||||
height: 50.0,
|
||||
child: const Card(
|
||||
child: Text(
|
||||
'SizedBox',
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
color: Color(0xFFEF5350)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
@ -28,15 +28,15 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _sizeBoxCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
new Text("SizedBox",
|
||||
Text("SizedBox",
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(
|
||||
fontSize: 28.0,
|
||||
fontWeight: FontWeight.bold,
|
||||
)),
|
||||
new Row(
|
||||
Row(
|
||||
children: <Widget>[
|
||||
sizeBox.SizeBoxDefault(),
|
||||
SizedBox(
|
||||
|
@ -7,10 +7,7 @@ class SizeOverflowBoxDefault extends StatelessWidget {
|
||||
final String text;
|
||||
|
||||
SizeOverflowBoxDefault(
|
||||
{Key key,
|
||||
this.curSizeWidth,
|
||||
this.curSizeHeight,
|
||||
this.text})
|
||||
{Key key, this.curSizeWidth, this.curSizeHeight, this.text})
|
||||
: super(key: key);
|
||||
|
||||
@override
|
||||
@ -23,7 +20,7 @@ class SizeOverflowBoxDefault extends StatelessWidget {
|
||||
color: Color(0xfff06292),
|
||||
width: 50.0,
|
||||
height: 50.0,
|
||||
child: new Text(
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
@ -36,8 +33,7 @@ class SizeBoxDefault extends StatelessWidget {
|
||||
final double curWidth;
|
||||
final double curHeight;
|
||||
|
||||
SizeBoxDefault({Key key, this.curHeight, this.curWidth})
|
||||
: super(key: key);
|
||||
SizeBoxDefault({Key key, this.curHeight, this.curWidth}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as sizeBox;
|
||||
import './demo.dart';
|
||||
|
||||
// const String _Text = """### **SizeBox简介**
|
||||
// > 常用的一个控件,设置具体尺寸。
|
||||
@ -53,47 +53,47 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _sizedOverflowBoxCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
sizeBox.SizeBoxDefault(
|
||||
SizeBoxDefault(
|
||||
curWidth: 200.0,
|
||||
curHeight: 50.0,
|
||||
),
|
||||
SizedBox(height: 20.0),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 10.0),
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 10.0),
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
alignment: Alignment.topCenter,
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
child: sizeBox.SizeOverflowBoxDefault(
|
||||
child: SizeOverflowBoxDefault(
|
||||
text: "SizeBox",
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 10.0),
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
child: sizeBox.SizeOverflowBoxDefault(
|
||||
child: SizeOverflowBoxDefault(
|
||||
text: "box",
|
||||
curSizeWidth: 100.0,
|
||||
curSizeHeight: 20.0,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 10.0),
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
alignment: Alignment.center,
|
||||
child: sizeBox.SizeOverflowBoxDefault(
|
||||
child: SizeOverflowBoxDefault(
|
||||
text: "box",
|
||||
curSizeWidth: 100.0,
|
||||
curSizeHeight: 20.0,
|
||||
|
@ -1 +0,0 @@
|
||||
|
@ -1,49 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
|
||||
const String _Text = """### **TextBox简介**
|
||||
> 是一个包含一段文本的矩形
|
||||
- 它与rect类似,不过包含一个固定的TextDirection。
|
||||
- sizebox的width,heigh为null,child自身设置
|
||||
### **属性**
|
||||
> width:宽
|
||||
> height:高
|
||||
- ex:200*50 sizebox
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/TextBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'TextBox',
|
||||
codeUrl: 'elements/Frame/Box/TextBox/demo.dart',
|
||||
contentList: [
|
||||
_Text,
|
||||
_creatTexbox(),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/dart-ui/TextBox-class.html',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Column _creatTexbox() {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
// Text("TextBox ",textDirection: new TextBox.fo,),
|
||||
Container(
|
||||
// child: TextBox.fromLTRB(270.0, 180.0, 1360.0, 730.0,TextDirection.rtl),
|
||||
|
||||
)
|
||||
|
||||
// centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
|
||||
|
||||
|
||||
],
|
||||
);
|
||||
}
|
@ -6,7 +6,7 @@ class UnconstrainedBoxDemo extends StatelessWidget {
|
||||
return UnconstrainedBox(
|
||||
constrainedAxis: Axis.vertical,
|
||||
textDirection: TextDirection.rtl,
|
||||
child: new Row(
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
width: 100.0,
|
||||
|
@ -5,7 +5,6 @@ import 'ConstrainedBox/index.dart' as ConstrainedBox;
|
||||
import 'DecoratedBox/index.dart' as DecoratedBox;
|
||||
import 'SizeBox/index.dart' as SizeBox;
|
||||
import 'SizedOverflowBox/index.dart' as SizedOverflowBox;
|
||||
import 'TextBox/index.dart' as TextBox;
|
||||
import 'UnconstrainedBox/index.dart' as UnconstrainedBox;
|
||||
import 'OverflowBox/index.dart' as OverflowBox;
|
||||
import 'FittedBox/index.dart' as FittedBox;
|
||||
@ -33,11 +32,6 @@ List<WidgetPoint> widgetPoints = [
|
||||
routerName: SizedOverflowBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => SizedOverflowBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'TextBox',
|
||||
routerName: TextBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => TextBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'UnconstrainedBox',
|
||||
routerName: UnconstrainedBox.Demo.routeName,
|
||||
|
@ -13,57 +13,57 @@ class ExpandedDemo extends StatelessWidget {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Text('Expanded'),
|
||||
Row(children: <Widget>[
|
||||
RaisedButton(
|
||||
Row(children: <Widget>[
|
||||
RaisedButton(
|
||||
onPressed: () {
|
||||
print('点击红色按钮事件');
|
||||
},
|
||||
color: const Color(0xffcc0000),
|
||||
child: Text('红色按钮',style: txtColor,),
|
||||
child: Text('红色按钮',style: txtColor,),
|
||||
),
|
||||
Expanded(
|
||||
Expanded(
|
||||
flex: 1,//flex用来设置当前可用空间的占优比
|
||||
child: RaisedButton(
|
||||
child: RaisedButton(
|
||||
onPressed: () {
|
||||
print('点击黄色按钮事件');
|
||||
},
|
||||
color: const Color(0xfff1c232),
|
||||
child: Text('黄色按钮',style: txtColor,),
|
||||
child: Text('黄色按钮',style: txtColor,),
|
||||
),
|
||||
),
|
||||
RaisedButton(
|
||||
RaisedButton(
|
||||
onPressed: () {
|
||||
print('点击粉色按钮事件');
|
||||
},
|
||||
color: const Color(0xffea9999),
|
||||
child: Text('粉色按钮',style: txtColor,),
|
||||
child: Text('粉色按钮',style: txtColor,),
|
||||
),
|
||||
]),
|
||||
Text('Flexible'),
|
||||
Row(children: <Widget>[
|
||||
RaisedButton(
|
||||
Row(children: <Widget>[
|
||||
RaisedButton(
|
||||
onPressed: () {
|
||||
print('点击红色按钮事件');
|
||||
},
|
||||
color: const Color(0xffcc0000),
|
||||
child: Text('红色按钮',style: txtColor,),
|
||||
child: Text('红色按钮',style: txtColor,),
|
||||
),
|
||||
Flexible(
|
||||
Flexible(
|
||||
flex: 1,
|
||||
child: RaisedButton(
|
||||
child: RaisedButton(
|
||||
onPressed: () {
|
||||
print('点击黄色按钮事件');
|
||||
},
|
||||
color: const Color(0xfff1c232),
|
||||
child: Text('黄色按钮',style: txtColor,),
|
||||
child: Text('黄色按钮',style: txtColor,),
|
||||
),
|
||||
),
|
||||
RaisedButton(
|
||||
RaisedButton(
|
||||
onPressed: () {
|
||||
print('点击粉色按钮事件');
|
||||
},
|
||||
color: const Color(0xffea9999),
|
||||
child: Text('粉色按钮',style: txtColor,),
|
||||
child: Text('粉色按钮',style: txtColor,),
|
||||
),
|
||||
]),
|
||||
],
|
||||
|
@ -13,33 +13,31 @@ class ColumnDefault extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
/**
|
||||
* - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
|
||||
- spaceEvenly:将主轴方向空白区域均分,使得children之间空间相等,包括首尾childre
|
||||
- spaceAround:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre的空白部分为一半
|
||||
- spaceBetween:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre靠近收尾,没有空细逢
|
||||
/// - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
|
||||
/// - spaceEvenly:将主轴方向空白区域均分,使得children之间空间相等,包括首尾childre
|
||||
/// - spaceAround:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre的空白部分为一半
|
||||
/// - spaceBetween:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre靠近收尾,没有空细逢
|
||||
|
||||
/// - MainAxisAlignment.start/end/center,
|
||||
/// - start:将children放置在主轴起点方向
|
||||
/// - end:将children放置在主轴末尾方向
|
||||
/// - center:将children放置在主轴中间方向
|
||||
|
||||
- MainAxisAlignment.start/end/center,
|
||||
- start:将children放置在主轴起点方向
|
||||
- end:将children放置在主轴末尾方向
|
||||
- center:将children放置在主轴中间方向
|
||||
*/
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
/**
|
||||
* > mainAxisSize 属性
|
||||
- 一行的高度是有mainAxisSize属性控制,默认是max
|
||||
- mainAxisSize: MainAxisSize.min,一行的宽度是child传入的约束
|
||||
- mainAxisSize: MainAxisSize.max,一行的宽度的最大宽度是传入的约束。
|
||||
> mainAxisAlignment属性
|
||||
*/
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
/**
|
||||
* - crossAxisAlignment: CrossAxisAlignment.center/end/start,
|
||||
- 即,根据设定的位置交叉对齐
|
||||
- center/end/start: children在交叉轴上居中/末端/起点 对齐展示
|
||||
- stretch:让children填满交叉轴方向
|
||||
- baseline:在交叉轴方向,使得于这个baseline对齐,如果主轴是垂直的,那么这个值是当作开始
|
||||
*/
|
||||
|
||||
/// > mainAxisSize 属性
|
||||
/// - 一行的高度是有mainAxisSize属性控制,默认是max
|
||||
/// - mainAxisSize: MainAxisSize.min,一行的宽度是child传入的约束
|
||||
/// - mainAxisSize: MainAxisSize.max,一行的宽度的最大宽度是传入的约束。
|
||||
/// > mainAxisAlignment属性
|
||||
|
||||
/// mainAxisSize: MainAxisSize.max,
|
||||
///- crossAxisAlignment: CrossAxisAlignment.center/end/start,
|
||||
/// - 即,根据设定的位置交叉对齐
|
||||
/// - center/end/start: children在交叉轴上居中/末端/起点 对齐展示
|
||||
/// - stretch:让children填满交叉轴方向
|
||||
/// - baseline:在交叉轴方向,使得于这个baseline对齐,如果主轴是垂直的,那么这个值是当作开始
|
||||
|
||||
children: <Widget>[
|
||||
Container(
|
||||
color: Color(0xfffce4ec),
|
||||
|
@ -10,27 +10,24 @@ import 'package:flutter/widgets.dart';
|
||||
* Describle:Row
|
||||
*/
|
||||
class RowMainAxisAlignment extends StatelessWidget {
|
||||
/*
|
||||
* > mainAxisAlignment属性
|
||||
* - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
|
||||
- spaceEvenly:将主轴方向空白区域均分,使得children之间空间相等,包括首尾childre
|
||||
- spaceAround:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre的空白部分为一半
|
||||
- spaceBetween:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre靠近收尾,没有空细逢
|
||||
* - MainAxisAlignment.start/end/center,
|
||||
- start:将children放置在主轴起点方向
|
||||
- end:将children放置在主轴末尾方向
|
||||
- center:将children放置在主轴中间方向
|
||||
*/
|
||||
///> mainAxisAlignment属性
|
||||
/// - MainAxisAlignment.spaceEvenly/spaceAround/spaceBetween,
|
||||
/// - spaceEvenly:将主轴方向空白区域均分,使得children之间空间相等,包括首尾childre
|
||||
/// - spaceAround:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre的空白部分为一半
|
||||
/// - spaceBetween:将主轴方向空白区域均分,使得children之间空间相等,但是首尾childre靠近收尾,没有空细逢
|
||||
/// - MainAxisAlignment.start/end/center,
|
||||
/// - start:将children放置在主轴起点方向
|
||||
/// - end:将children放置在主轴末尾方向
|
||||
/// - center:将children放置在主轴中间方向
|
||||
|
||||
final MainAxisAlignment status;
|
||||
|
||||
/*
|
||||
* > CrossAxisAlignment 属性
|
||||
- crossAxisAlignment: CrossAxisAlignment.center/end/start,
|
||||
- 即,根据设定的位置交叉对齐
|
||||
- center/end/start: children在交叉轴上居中/末端/起点 对齐展示
|
||||
- stretch:让children填满交叉轴方向
|
||||
- baseline:在交叉轴方向,使得于这个baseline对齐,如果主轴是垂直的,那么这个值是当作开始
|
||||
*/
|
||||
/// > CrossAxisAlignment 属性
|
||||
/// - crossAxisAlignment: CrossAxisAlignment.center/end/start,
|
||||
/// - 即,根据设定的位置交叉对齐
|
||||
/// - center/end/start: children在交叉轴上居中/末端/起点 对齐展示
|
||||
/// - stretch:让children填满交叉轴方向
|
||||
/// - baseline:在交叉轴方向,使得于这个baseline对齐,如果主轴是垂直的,那么这个值是当作开始
|
||||
|
||||
final CrossAxisAlignment crossStatus;
|
||||
|
||||
@ -38,7 +35,7 @@ class RowMainAxisAlignment extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Row(
|
||||
return Row(
|
||||
mainAxisAlignment: status,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
@ -66,29 +63,29 @@ class RowLayoutCreate extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Row(
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
color: Color(0xfffce4ec),
|
||||
width: 60.0,
|
||||
height: 50.0,
|
||||
),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
color: Color(0xfff8bbd0),
|
||||
width: 60.0,
|
||||
height: 50.0,
|
||||
),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
color: Color(0xfff48fb1),
|
||||
width: 60.0,
|
||||
height: 50.0,
|
||||
),
|
||||
Container(
|
||||
margin: new EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
|
||||
color: Color(0xfff06292),
|
||||
width: 60.0,
|
||||
height: 50.0,
|
||||
|
@ -49,7 +49,7 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _rowCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
RowLayoutCreate(),
|
||||
Row(
|
||||
|
@ -49,12 +49,12 @@ class SliverPaddingDemo extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new CustomScrollView(
|
||||
return CustomScrollView(
|
||||
shrinkWrap: true,
|
||||
slivers: <Widget>[
|
||||
new SliverPadding(
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(50.0,10.0,20.0,0.0),
|
||||
sliver: new SliverList(
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
return _buildItem(context, products[index]);
|
||||
|
@ -12,7 +12,7 @@ import 'package:flutter/material.dart';
|
||||
class StackDefault extends StatelessWidget {
|
||||
final int currIndex;
|
||||
|
||||
const StackDefault( this.currIndex) : super();
|
||||
const StackDefault(this.currIndex) : super();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@ -23,14 +23,14 @@ class StackDefault extends StatelessWidget {
|
||||
// backgroundImage: AssetImage('images/timg.jpeg'),
|
||||
// radius: 100.0,
|
||||
// ),
|
||||
// new Image.asset(
|
||||
// Image.asset(
|
||||
// 'images/timg.jpeg',
|
||||
// width: 600.0,
|
||||
// height: 240.0,
|
||||
// fit: BoxFit.cover,
|
||||
// ),
|
||||
CircleAvatar(
|
||||
backgroundColor: new Color(0xfff48fb1),
|
||||
backgroundColor: Color(0xfff48fb1),
|
||||
radius: 40.0,
|
||||
),
|
||||
Container(
|
||||
@ -54,34 +54,34 @@ class StackDefault extends StatelessWidget {
|
||||
class StackIndex extends StatelessWidget {
|
||||
final int currIndex;
|
||||
|
||||
const StackIndex( this.currIndex) : super();
|
||||
const StackIndex(this.currIndex) : super();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IndexedStack(
|
||||
index: currIndex,
|
||||
children: [
|
||||
new Icon(
|
||||
Icon(
|
||||
Icons.update,
|
||||
size: 40.0,
|
||||
color: Color(0xffe91e63),
|
||||
),
|
||||
new Icon(
|
||||
Icon(
|
||||
Icons.access_alarm,
|
||||
size: 40.0,
|
||||
color: Color(0xffe91e63),
|
||||
),
|
||||
new Icon(
|
||||
Icon(
|
||||
Icons.add_alarm,
|
||||
size: 40.0,
|
||||
color: Color(0xffe91e63),
|
||||
),
|
||||
new Icon(
|
||||
Icon(
|
||||
Icons.access_time,
|
||||
size: 40.0,
|
||||
color: Color(0xffe91e63),
|
||||
),
|
||||
new Icon(
|
||||
Icon(
|
||||
Icons.alarm_off,
|
||||
size: 40.0,
|
||||
color: Color(0xffe91e63),
|
||||
|
@ -38,8 +38,7 @@ class _DemoState extends State<Demo> {
|
||||
return WidgetDemo(
|
||||
title: 'IndexedStack',
|
||||
// desc: _desc,
|
||||
codeUrl:
|
||||
'elements/Frame/Stack/IndexedStack/demo.dart',
|
||||
codeUrl: 'elements/Frame/Stack/IndexedStack/demo.dart',
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/IndexedStack-class.html',
|
||||
contentList: [
|
||||
_stackText0,
|
||||
@ -50,20 +49,20 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _indexedStackCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
SizedBox(
|
||||
height: 10.0,
|
||||
),
|
||||
new Row(
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
color: new Color(0xffe91e63),
|
||||
color: Color(0xffe91e63),
|
||||
child: StackDefault(0),
|
||||
),
|
||||
Container(
|
||||
color: new Color(0xffe91e63),
|
||||
color: Color(0xffe91e63),
|
||||
child: StackDefault(1),
|
||||
)
|
||||
],
|
||||
@ -71,7 +70,7 @@ class _DemoState extends State<Demo> {
|
||||
SizedBox(
|
||||
height: 10.0,
|
||||
),
|
||||
new Row(
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
StackIndex(0),
|
||||
@ -91,7 +90,7 @@ class _DemoState extends State<Demo> {
|
||||
onPressed: () {
|
||||
_indexAdd();
|
||||
},
|
||||
icon: new Icon(Icons.adb),
|
||||
icon: Icon(Icons.adb),
|
||||
label: Text("点击这里")),
|
||||
StackIndex(currIndex)
|
||||
],
|
||||
|
@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
|
||||
* LastUpdateTime: 2018/11/22
|
||||
* LastUpdateBy: xj.deng
|
||||
*
|
||||
* Describle:Align描述
|
||||
* Describle:stack描述
|
||||
*/
|
||||
class StackDefault extends StatelessWidget {
|
||||
const StackDefault() : super();
|
||||
@ -16,19 +16,19 @@ class StackDefault extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
new Stack(
|
||||
Stack(
|
||||
//fit :定义如何设置non-positioned节点尺寸
|
||||
fit: StackFit.loose,
|
||||
overflow: Overflow.clip,
|
||||
textDirection: TextDirection.ltr,
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
new Container(
|
||||
color: new Color(0xfff48fb1),
|
||||
Container(
|
||||
color: Color(0xfff48fb1),
|
||||
width: 100.0,
|
||||
height: 50.0,
|
||||
),
|
||||
new Text("stack demo",
|
||||
Text("stack demo",
|
||||
textDirection: TextDirection.ltr,
|
||||
style: TextStyle(
|
||||
fontSize: 20.0,
|
||||
@ -49,22 +49,22 @@ class StackDefault2 extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
new Stack(
|
||||
Stack(
|
||||
//fit :定义如何设置non-positioned节点尺寸
|
||||
fit: StackFit.loose,
|
||||
overflow: Overflow.clip,
|
||||
textDirection: TextDirection.ltr,
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
new Text("stack demo",
|
||||
Text("stack demo",
|
||||
textDirection: TextDirection.ltr,
|
||||
style: TextStyle(
|
||||
fontSize: 20.0,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 5.0,
|
||||
color: Colors.white)),
|
||||
new Container(
|
||||
color: new Color(0xfff48fb1),
|
||||
Container(
|
||||
color: Color(0xfff48fb1),
|
||||
width: 100.0,
|
||||
height: 50.0,
|
||||
),
|
||||
@ -80,32 +80,32 @@ class StackPositioned extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Stack(
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: <Widget>[
|
||||
new Positioned(
|
||||
child: new Icon(
|
||||
Positioned(
|
||||
child: Icon(
|
||||
Icons.monetization_on,
|
||||
size: 40.0,
|
||||
color: Colors.yellow[300],
|
||||
)),
|
||||
new Positioned(
|
||||
Positioned(
|
||||
left: 40.0,
|
||||
child: new Icon(
|
||||
child: Icon(
|
||||
Icons.monetization_on,
|
||||
size: 40.0,
|
||||
color: Colors.yellow[600],
|
||||
)),
|
||||
new Positioned(
|
||||
Positioned(
|
||||
left: 60.0,
|
||||
child: new Icon(
|
||||
child: Icon(
|
||||
Icons.monetization_on,
|
||||
size: 40.0,
|
||||
color: Colors.yellow[600],
|
||||
)),
|
||||
new Positioned(
|
||||
Positioned(
|
||||
left: 80.0,
|
||||
child: new Icon(
|
||||
child: Icon(
|
||||
Icons.monetization_on,
|
||||
size: 40.0,
|
||||
color: Colors.yellow[600],
|
||||
@ -120,12 +120,12 @@ class StackLayout extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Stack(
|
||||
return Stack(
|
||||
overflow: Overflow.visible,
|
||||
alignment: const Alignment(0.2, 0.6),
|
||||
children: <Widget>[
|
||||
CircleAvatar(
|
||||
backgroundColor: new Color(0xfff48fb1),
|
||||
backgroundColor: Color(0xfff48fb1),
|
||||
radius: 140.0,
|
||||
),
|
||||
Container(
|
||||
|
@ -35,30 +35,28 @@ class Demo extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'Stack',
|
||||
codeUrl:
|
||||
'elements/Frame/Stack/Stack/demo.dart',
|
||||
codeUrl: 'elements/Frame/Stack/Stack/demo.dart',
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/Stack-class.html',
|
||||
contentList: [
|
||||
_stackText0,
|
||||
_stackCreate(),
|
||||
_stackText1,
|
||||
new Container(
|
||||
Container(
|
||||
width: 300.0,
|
||||
height: 100.0,
|
||||
margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),
|
||||
color: new Color(0xffe91e63),
|
||||
margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
|
||||
color: Color(0xffe91e63),
|
||||
child: StackPositioned(),
|
||||
),
|
||||
_stackText2,
|
||||
new Container(
|
||||
Container(
|
||||
width: 200.0,
|
||||
height: 200.0,
|
||||
color: new Color(0xffe91e63),
|
||||
color: Color(0xffe91e63),
|
||||
child: StackLayout(),
|
||||
),
|
||||
],
|
||||
@ -66,18 +64,18 @@ class _DemoState extends State<Demo> {
|
||||
}
|
||||
|
||||
Column _stackCreate() {
|
||||
return new Column(
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Column(
|
||||
children: <Widget>[
|
||||
new Container(
|
||||
margin: new EdgeInsets.only(top: 10.0, bottom: 10.0),
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
|
||||
width: 300.0,
|
||||
height: 100.0,
|
||||
color: Color(0xffe91e63),
|
||||
child: StackDefault(),
|
||||
),
|
||||
new Container(
|
||||
Container(
|
||||
width: 300.0,
|
||||
height: 100.0,
|
||||
color: Color(0xffe91e63),
|
||||
|
@ -1,4 +1,4 @@
|
||||
import 'spacing/index.dart' as Spacing;
|
||||
import 'Spacing/index.dart' as Spacing;
|
||||
import 'Expanded/index.dart' as Expanded;
|
||||
|
||||
// import 'Axis/index.dart' as Axis;
|
||||
|
321
lib/widgets/elements/Media/Canvas/Canvas/demo.dart
Normal file
321
lib/widgets/elements/Media/Canvas/Canvas/demo.dart
Normal file
@ -0,0 +1,321 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: ryan
|
||||
* Date: 2019/1/20
|
||||
* Time: 上午11:34
|
||||
* email: zhu.yan@alibaba-inc.com
|
||||
* tartget: Canvas 的示例
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'dart:ui';
|
||||
import 'dart:ui' as ui;
|
||||
import 'dart:typed_data';
|
||||
import 'dart:math';
|
||||
import 'package:flutter/services.dart' show rootBundle;
|
||||
|
||||
CustomPaint graph;
|
||||
var image;
|
||||
|
||||
class CustomViewPage extends StatefulWidget {
|
||||
|
||||
final String type;
|
||||
CustomViewPage({this.type='drawLine'}) : super();
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => CustomViewPageState();
|
||||
}
|
||||
|
||||
class CustomViewPageState extends State<CustomViewPage>
|
||||
with SingleTickerProviderStateMixin {
|
||||
|
||||
static Future<ui.Image> getImage(String asset) async {
|
||||
ByteData data = await rootBundle.load(asset);
|
||||
Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
|
||||
FrameInfo fi = await codec.getNextFrame();
|
||||
return fi.image;
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
getImage("assets/images/painterImg.jpeg").then((data) {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
image = data;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
graph = CustomPaint(
|
||||
painter: DrawPainter(type:widget.type)
|
||||
);
|
||||
return Container(
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: MediaQuery.of(context).size.width * 0.6,
|
||||
margin: EdgeInsets.all(10.0),
|
||||
//padding: EdgeInsets.all(10.0),
|
||||
child: graph
|
||||
//child:Center(child: graph)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@override
|
||||
void reassemble() {
|
||||
super.reassemble();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
///新建类继承于CustomPainter并且实现CustomPainter里面的paint()和shouldRepaint方法
|
||||
class DrawPainter extends CustomPainter {
|
||||
Paint painter;
|
||||
final type;
|
||||
|
||||
DrawPainter ({this.type}){
|
||||
// Paint painter = Paint()
|
||||
// ..color = Colors.blueAccent //画笔颜色
|
||||
// ..strokeCap = StrokeCap.round //画笔笔触类型
|
||||
// ..isAntiAlias = true //是否启动抗锯齿
|
||||
// ..blendMode = BlendMode.exclusion //颜色混合模式
|
||||
// ..style = PaintingStyle.fill //绘画风格,默认为填充
|
||||
// ..colorFilter = ColorFilter.mode(Colors.blueAccent,BlendMode.exclusion) //颜色渲染模式,一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
|
||||
// ..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果,flutter中只有这个
|
||||
// ..filterQuality = FilterQuality.high //颜色渲染模式的质量
|
||||
// ..strokeWidth = 15.0 ;//画笔的宽度
|
||||
|
||||
painter = new Paint()
|
||||
..color = Colors.blueAccent
|
||||
..strokeCap = StrokeCap.round
|
||||
..isAntiAlias = true
|
||||
..strokeWidth = 5.0
|
||||
..filterQuality = FilterQuality.high
|
||||
..style = PaintingStyle.stroke;
|
||||
}
|
||||
///Flutter中负责View绘制的地方,使用传递来的canvas和size即可完成对目标View的绘制
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
switch(type) {
|
||||
case 'drawPoints':
|
||||
const List<Offset> points1 = [Offset(20.0, 0.0), Offset(100.0, 50.0), Offset(150.0, 0.0),Offset(300.0, 0.0)];
|
||||
const List<Offset> points2 = [Offset(20.0, 100.0), Offset(100.0, 100.0), Offset(150.0, 100.0), Offset(300.0, 100.0)];
|
||||
const List<Offset> points3 = [Offset(20.0, 150.0), Offset(100.0, 150.0), Offset(150.0, 180.0), Offset(300.0, 150.0)];
|
||||
//绘制点
|
||||
canvas.drawPoints(
|
||||
///PointMode的枚举类型有三个,points(点),lines(线,隔点连接),polygon(线,相邻连接)
|
||||
PointMode.points,
|
||||
points1,
|
||||
painter..color = Colors.redAccent // 这里可以追加修改 painter 属性
|
||||
..strokeWidth = 10.0
|
||||
);
|
||||
canvas.drawPoints(
|
||||
///PointMode的枚举类型有三个,points(点),lines(线,隔点连接),polygon(线,相邻连接)
|
||||
PointMode.lines,
|
||||
points2,
|
||||
painter..color = Colors.orange // 这里可以追加修改 painter 属性
|
||||
..strokeWidth = 10.0
|
||||
);
|
||||
canvas.drawPoints(
|
||||
///PointMode的枚举类型有三个,points(点),lines(线,隔点连接),polygon(线,相邻连接)
|
||||
PointMode.polygon,
|
||||
points3,
|
||||
painter..color = Colors.blue // 这里可以追加修改 painter 属性
|
||||
..strokeWidth = 10.0
|
||||
);
|
||||
break;
|
||||
case 'drawLine':
|
||||
//绘制直线
|
||||
canvas.drawLine(Offset(20.0, 0.0), Offset(size.width*0.8, 200), painter ..color = Colors.redAccent);
|
||||
break;
|
||||
case 'rawCircle':
|
||||
//绘制圆 参数(圆心,半径,画笔)
|
||||
canvas.drawCircle(
|
||||
Offset(size.width/2, 100.0),
|
||||
100.0,
|
||||
painter
|
||||
..color = Colors.greenAccent
|
||||
..style = PaintingStyle.stroke //绘画风格改为stroke
|
||||
);
|
||||
break;
|
||||
case 'drawOval':
|
||||
// 绘制椭圆
|
||||
// 使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的形状
|
||||
Rect rect1 = Rect.fromPoints(Offset(0.0, 0.0), Offset(size.width, 200.0));
|
||||
canvas.drawOval(rect1, painter ..color = Colors.indigo);
|
||||
break;
|
||||
case 'drawArc':
|
||||
// 绘制圆弧
|
||||
// Rect来确认圆弧的位置,还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
|
||||
const PI = 3.1415926;
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(20, 50.0), radius: 100.0);
|
||||
canvas.drawArc(rect1, 0.0, PI / 2, false, painter ..color = Colors.pink);
|
||||
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(size.width*0.6, 50.0), radius: 100.0);
|
||||
canvas.drawArc(rect2, 0.0, PI / 2, true, painter ..color = Colors.deepPurple);
|
||||
break;
|
||||
case 'drawRRect':
|
||||
/// fromPoints(Offset a, Offset b)
|
||||
/// 使用左上和右下角坐标来确定矩形的大小和位置
|
||||
/// fromCircle({ Offset center, double radius })
|
||||
/// 使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
|
||||
/// fromLTRB(double left, double top, double right, double bottom)
|
||||
/// 使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
|
||||
/// fromLTWH(double left, double top, double width, double height)
|
||||
/// 使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
|
||||
// 用Rect构建一个边长50,中心点坐标为50,100的矩形
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(80.0, 100.0), radius: 50.0);
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(250.0, 100.0), radius: 50.0);
|
||||
// 根据上面的矩形,构建一个圆角矩形
|
||||
RRect rrect1 = RRect.fromRectAndRadius(rect1, Radius.circular(0.0));
|
||||
canvas.drawRRect(rrect1, painter);
|
||||
RRect rrect2 = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
|
||||
canvas.drawRRect(rrect2, painter);
|
||||
break;
|
||||
case 'drawDRRect':
|
||||
//绘制两个矩形
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(size.width/2, 100.0), radius: 60.0);
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(size.width/2, 100.0), radius: 40.0);
|
||||
//分别绘制外部圆角矩形和内部的圆角矩形
|
||||
RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(30.0));
|
||||
RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(5.0));
|
||||
canvas.drawDRRect(outer, inner, painter ..color = Colors.lime);
|
||||
break;
|
||||
case 'drawImage':
|
||||
// canvas.drawImage(image, Offset(0.0, 0.0), painter);
|
||||
final src = Rect.fromLTWH(0.0, 0.0, 684.0, 442.0);
|
||||
final dst = Rect.fromLTWH(0.0, 0.0, size.width, size.height);
|
||||
canvas.drawImageRect(image, src, dst, painter);
|
||||
break;
|
||||
case 'drawStar':
|
||||
var rect = Offset.zero & size;
|
||||
/// 背景颜色
|
||||
canvas.drawRect(rect, Paint()..color = Color(0xFF000000));
|
||||
/// 绘制星形
|
||||
canvas.drawPath(MathTools().regularStarPath(5, 30, Offset(50.0, 50.0)), painter..color = Colors.red);
|
||||
/// 绘制多边形
|
||||
canvas.save();// save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作
|
||||
canvas.translate(0, 100);
|
||||
canvas.scale(1.2,1.2);
|
||||
canvas.drawPath(MathTools().nStarPath(4, 30, 30, Offset(40.0, 50.0)), painter);
|
||||
canvas.restore();// 用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响
|
||||
/// 绘制旋转星形
|
||||
canvas.save();// save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作
|
||||
canvas.translate(150, 50);
|
||||
canvas.rotate(50 * pi / 180);
|
||||
canvas.drawPath(MathTools().regularStarPath(5, 30, Offset(0,0)), painter..color = Colors.green);
|
||||
canvas.restore();// 用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响
|
||||
/// 绘制变形星形
|
||||
canvas.save();// save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作
|
||||
canvas.translate(80, 100);
|
||||
canvas.skew(0.5,0.2);
|
||||
canvas.drawPath(MathTools().regularStarPath(6, 30,Offset(50,50)), painter..color = Colors.lime);
|
||||
canvas.restore();// 用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响
|
||||
|
||||
/// 绘制matrix星形
|
||||
canvas.translate(250, 0);
|
||||
Float64List matrix = Float64List.fromList(const <double>[
|
||||
// careful, this is in _column_-major order
|
||||
0.7, -0.7, 0.0, 0.0,
|
||||
0.7, 0.7, 0.0, 0.0,
|
||||
0.7, 0.0, 1.0, 0.0,
|
||||
-70.697, 98.057, 0.0, 1.0,
|
||||
]);
|
||||
canvas.transform(matrix);
|
||||
canvas.drawPath(MathTools().regularStarPath(5, 30,Offset(50,50)), painter..color = Colors.blue);
|
||||
|
||||
break;
|
||||
}
|
||||
//canvas.drawColor(Colors.red, BlendMode.colorDodge);
|
||||
}
|
||||
|
||||
///控制自定义View是否需要重绘的,返回false代表这个View在构建完成后不需要重绘。
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
class MathTools {
|
||||
static MathTools _mathTools;
|
||||
static bool _flag;
|
||||
|
||||
factory MathTools(){
|
||||
if (_flag == null) {
|
||||
_flag = true;
|
||||
}
|
||||
if (_flag) {
|
||||
_mathTools = new MathTools._internal();
|
||||
_flag = false;
|
||||
}
|
||||
return _mathTools;
|
||||
}
|
||||
MathTools._internal();
|
||||
///
|
||||
///画正n角星的路径:
|
||||
///
|
||||
///@param num 角数
|
||||
///@param R 外接圆半径
|
||||
///@return 画正n角星的路径
|
||||
///
|
||||
Path regularStarPath(int num, double R, Offset xy) {
|
||||
double degA, degB;
|
||||
if (num % 2 == 1) {
|
||||
//奇数和偶数角区别对待
|
||||
degA = 360 / num / 2 / 2;
|
||||
degB = 180 - degA - 360 / num / 2;
|
||||
} else {
|
||||
degA = 360 / num / 2;
|
||||
degB = 180 - degA - 360 / num / 2;
|
||||
}
|
||||
double r = R * sin(_rad(degA)) / sin(_rad(degB));
|
||||
return nStarPath(num, R, r, xy);
|
||||
}
|
||||
|
||||
///
|
||||
///画正n边形的路径
|
||||
///
|
||||
///@param num 边数
|
||||
///@param R 外接圆半径
|
||||
///@return 画正n边形的路径
|
||||
///
|
||||
Path regularPolygonPath(int num, double R, Offset xy) {
|
||||
double r = R * cos(_rad(360 / num / 2)); //!!一点解决
|
||||
return nStarPath(num, R, r, xy);
|
||||
}
|
||||
|
||||
///
|
||||
///n角星路径
|
||||
///
|
||||
///@param num 几角星
|
||||
///@param R 外接圆半径
|
||||
///@param r 内接圆半径
|
||||
///@return n角星路径
|
||||
///
|
||||
Path nStarPath(int num, double R, double r, Offset xy) {
|
||||
Path path = new Path();
|
||||
double perDeg = 360 / num; //尖角的度数
|
||||
double degA = perDeg / 2 / 2;
|
||||
double degB = 360 / (num - 1) / 2 - degA / 2 + degA;
|
||||
|
||||
path.moveTo(cos(_rad(degA)) * R + xy.dx, (-sin(_rad(degA)) * R + xy.dy));
|
||||
for (int i = 0; i < num; i++) {
|
||||
path.lineTo(
|
||||
cos(_rad(degA + perDeg * i)) * R + xy.dx, -sin(_rad(degA + perDeg * i)) * R + xy.dy);
|
||||
path.lineTo(
|
||||
cos(_rad(degB + perDeg * i)) * r + xy.dx, -sin(_rad(degB + perDeg * i)) * r + xy.dy);
|
||||
}
|
||||
path.close();
|
||||
return path;
|
||||
}
|
||||
double _rad(double deg) {
|
||||
return deg * pi / 180;
|
||||
}
|
||||
}
|
96
lib/widgets/elements/Media/Canvas/Canvas/index.dart
Normal file
96
lib/widgets/elements/Media/Canvas/Canvas/index.dart
Normal file
@ -0,0 +1,96 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as demoBoxs;
|
||||
|
||||
const Text = '''
|
||||
### **简介**
|
||||
> 用于操作图形的界面;
|
||||
- canvas 对象用于创建图片对象,这些对象本身可以与 SceneBuilder 一起用于构建场景;
|
||||
''';
|
||||
const Text1 = '''
|
||||
### **基本用法**
|
||||
- 以下是绘制点,线,面的基本用法
|
||||
''';
|
||||
|
||||
const Text2 = '''
|
||||
> 绘制点
|
||||
- 绘制点有三种模式, points(点),lines(线,隔点连接),polygon(线,相邻连接)
|
||||
''';
|
||||
|
||||
const Text3 = '''
|
||||
> 绘制直线
|
||||
''';
|
||||
|
||||
const Text4 = '''
|
||||
> 绘制圆
|
||||
''';
|
||||
|
||||
const Text5 = '''
|
||||
> 绘制椭圆
|
||||
- 使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的形状
|
||||
''';
|
||||
|
||||
const Text6 = '''
|
||||
> 绘制圆弧
|
||||
- Rect 来确认圆弧的位置,还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及 paint 弧度
|
||||
''';
|
||||
|
||||
const Text7 = '''
|
||||
> 绘制矩形,圆角矩形
|
||||
- 用 Rect构建矩形
|
||||
- 根据上面的矩形,构建一个圆角矩形
|
||||
''';
|
||||
|
||||
const Text8 = '''
|
||||
> 绘制两个相套矩形
|
||||
''';
|
||||
|
||||
const Text9 = '''
|
||||
> 绘制图片到canvas
|
||||
''';
|
||||
|
||||
const Text10 = '''
|
||||
> 绘制一个星形
|
||||
- 它可以使用“平移”、“缩放”、“旋转”、“倾斜”和“变换”方法进行修改;
|
||||
- 可以使用 clipRect、clipCorrect 和 clipPath 方法进行修改;
|
||||
- 可以使用由 save、savelayer和 restore 方法管理的堆栈来保存和还原当前的转换和剪辑。
|
||||
''';
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Media/Canvas/Canvas';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'Canvas',
|
||||
codeUrl: 'elements/Media/Canvas/Canvas/demo.dart',
|
||||
contentList: [
|
||||
Text,
|
||||
Text1,
|
||||
Text2,
|
||||
demoBoxs.CustomViewPage(type:'drawPoints'),
|
||||
Text3,
|
||||
demoBoxs.CustomViewPage(type:'drawLine'),
|
||||
Text4,
|
||||
demoBoxs.CustomViewPage(type:'rawCircle'),
|
||||
Text5,
|
||||
demoBoxs.CustomViewPage(type:'drawOval'),
|
||||
Text6,
|
||||
demoBoxs.CustomViewPage(type:'drawArc'),
|
||||
Text7,
|
||||
demoBoxs.CustomViewPage(type:'drawRRect'),
|
||||
Text8,
|
||||
demoBoxs.CustomViewPage(type:'drawDRRect'),
|
||||
Text9,
|
||||
demoBoxs.CustomViewPage(type:'drawImage'),
|
||||
Text10,
|
||||
demoBoxs.CustomViewPage(type:'drawStar'),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/dart-ui/Canvas-class.html',
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,105 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: ryan
|
||||
* Date: 2019/1/20
|
||||
* Time: 上午11:34
|
||||
* email: zhu.yan@alibaba-inc.com
|
||||
* tartget: CircleProgressBarPainter 的示例
|
||||
*/
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class CustomViewPage extends StatefulWidget {
|
||||
@override
|
||||
State<StatefulWidget> createState() => CustomViewPageState();
|
||||
}
|
||||
|
||||
class CustomViewPageState extends State<CustomViewPage>
|
||||
with SingleTickerProviderStateMixin {
|
||||
Animation<double> _doubleAnimation;
|
||||
AnimationController _controller;
|
||||
CurvedAnimation curvedAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller =
|
||||
AnimationController(vsync: this, duration: Duration(seconds: 2));
|
||||
curvedAnimation =
|
||||
CurvedAnimation(parent: _controller, curve: Curves.decelerate);
|
||||
_doubleAnimation = Tween(begin: 0.0, end: 360.0).animate(_controller);
|
||||
|
||||
_controller.addListener(() {
|
||||
if(mounted){
|
||||
this.setState(() {});
|
||||
}
|
||||
});
|
||||
onAnimationStart();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 100.0,
|
||||
height: 100.0,
|
||||
margin: EdgeInsets.all(8.0),
|
||||
child: CustomPaint(
|
||||
child: Center(
|
||||
child: Text((_doubleAnimation.value / 3.6).round().toString())),
|
||||
painter: CircleProgressBarPainter(_doubleAnimation.value)
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void onAnimationStart() {
|
||||
_controller.forward(from: 0.0);
|
||||
}
|
||||
|
||||
@override
|
||||
void reassemble() {
|
||||
super.reassemble();
|
||||
onAnimationStart();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
_controller.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
class CircleProgressBarPainter extends CustomPainter {
|
||||
Paint _paintBackground;
|
||||
Paint _paintFore;
|
||||
final double pi = 3.1415926;
|
||||
var jindu;
|
||||
|
||||
CircleProgressBarPainter(this.jindu) {
|
||||
_paintBackground = Paint()
|
||||
..color = Colors.grey
|
||||
..strokeCap = StrokeCap.round
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 10.0
|
||||
..isAntiAlias = true;
|
||||
_paintFore = Paint()
|
||||
..color = Colors.red
|
||||
..strokeCap = StrokeCap.round
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 10.0
|
||||
..isAntiAlias = true;
|
||||
}
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2,_paintBackground);
|
||||
Rect rect = Rect.fromCircle(
|
||||
center: Offset(size.width / 2, size.height / 2),
|
||||
radius: size.width / 2,
|
||||
);
|
||||
canvas.drawArc(rect, 0.0, jindu * 3.14 / 180, false, _paintFore);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
@ -0,0 +1,37 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as demoBoxs;
|
||||
|
||||
const Text = '''
|
||||
### **简介**
|
||||
> 操作图形的界面;
|
||||
|
||||
''';
|
||||
const Text1 = '''
|
||||
### **基本用法**
|
||||
- canvas + Animation 实现一个 loading 效果;
|
||||
''';
|
||||
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Media/Canvas/CircleProgressBarPainter';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'CircleProgressBarPainter',
|
||||
codeUrl: 'elements/Media/Canvas/CircleProgressBarPainter/demo.dart',
|
||||
contentList: [
|
||||
Text,
|
||||
Text1,
|
||||
demoBoxs.CustomViewPage()
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/dart-ui/Canvas-class.html',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
180
lib/widgets/elements/Media/Canvas/PainterPath/demo.dart
Normal file
180
lib/widgets/elements/Media/Canvas/PainterPath/demo.dart
Normal file
@ -0,0 +1,180 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: ryan
|
||||
* Date: 2019/1/20
|
||||
* Time: 上午11:34
|
||||
* email: zhu.yan@alibaba-inc.com
|
||||
* tartget: PainterPath 的示例
|
||||
*/
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
CustomPaint graph;
|
||||
|
||||
class CustomViewPage extends StatefulWidget {
|
||||
|
||||
final String type;
|
||||
CustomViewPage({this.type='simpleline'}) : super();
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => CustomViewPageState();
|
||||
}
|
||||
|
||||
class CustomViewPageState extends State<CustomViewPage>
|
||||
with SingleTickerProviderStateMixin {
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
graph = CustomPaint(
|
||||
painter: DrawPainter(type:widget.type)
|
||||
);
|
||||
return Container(
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: MediaQuery.of(context).size.width * 0.6,
|
||||
margin: EdgeInsets.all(50.0),
|
||||
//padding: EdgeInsets.all(10.0),
|
||||
child: graph
|
||||
//child:Center(child: graph)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@override
|
||||
void reassemble() {
|
||||
super.reassemble();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
///新建类继承于CustomPainter并且实现CustomPainter里面的paint()和shouldRepaint方法
|
||||
class DrawPainter extends CustomPainter {
|
||||
Paint painter;
|
||||
final type;
|
||||
|
||||
DrawPainter ({this.type}){
|
||||
// Paint painter = Paint()
|
||||
// ..color = Colors.blueAccent //画笔颜色
|
||||
// ..strokeCap = StrokeCap.round //画笔笔触类型
|
||||
// ..isAntiAlias = true //是否启动抗锯齿
|
||||
// ..blendMode = BlendMode.exclusion //颜色混合模式
|
||||
// ..style = PaintingStyle.fill //绘画风格,默认为填充
|
||||
// ..colorFilter = ColorFilter.mode(Colors.blueAccent,BlendMode.exclusion) //颜色渲染模式,一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
|
||||
// ..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果,flutter中只有这个
|
||||
// ..filterQuality = FilterQuality.high //颜色渲染模式的质量
|
||||
// ..strokeWidth = 15.0 ;//画笔的宽度
|
||||
|
||||
painter = new Paint()
|
||||
..color = Colors.blueAccent
|
||||
..strokeCap = StrokeCap.round
|
||||
..isAntiAlias = true
|
||||
..strokeWidth = 5.0
|
||||
..style = PaintingStyle.stroke;
|
||||
}
|
||||
///Flutter中负责View绘制的地方,使用传递来的canvas和size即可完成对目标View的绘制
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
//canvas.drawColor(Colors.red, BlendMode.colorDodge);
|
||||
Path path = new Path();
|
||||
drawThisPath(canvas, size, path);
|
||||
path.close();
|
||||
canvas.drawPath(path, painter);
|
||||
}
|
||||
|
||||
void drawThisPath(Canvas canvas, Size size, Path path,) {
|
||||
switch(type) {
|
||||
case 'simpleline':
|
||||
//新建了一个path,然后将路径起始点移动到坐标(100,100)的位置
|
||||
Path path = new Path()..moveTo(0.0, 0.0);
|
||||
path.lineTo(200.0, 200.0);
|
||||
canvas.drawPath(path, painter);
|
||||
break;
|
||||
case 'polyline':
|
||||
Path path = new Path()..moveTo(100.0, 10.0);
|
||||
|
||||
path.lineTo(200.0, 150.0);
|
||||
path.lineTo(100.0, 200.0);
|
||||
|
||||
canvas.drawPath(path, painter);
|
||||
break;
|
||||
case 'Besizerline2':
|
||||
Path path = new Path()..moveTo(0.0, 0.0);
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(50.0, 100.0), radius: 60.0);
|
||||
path.arcTo(rect1, 0.0, 3.14, false);
|
||||
canvas.drawPath(path, painter);
|
||||
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(200.0, 100.0), radius: 60.0);
|
||||
path.arcTo(rect2, 0.0, 3.14*2, true);
|
||||
canvas.drawPath(path, painter);
|
||||
break;
|
||||
case 'Besizerline3':
|
||||
var width = size.width;
|
||||
var height = 300;
|
||||
Path path = new Path()..moveTo(width / 2, height / 4);
|
||||
path.cubicTo((width * 6) / 7, height / 9, (width * 13) / 13,
|
||||
(height * 2) / 5, width / 2, (height * 7) / 12);
|
||||
canvas.drawPath(path, painter
|
||||
// ..style = PaintingStyle.fill
|
||||
// ..color = Colors.red
|
||||
);
|
||||
|
||||
Path path2 = new Path();
|
||||
path2.moveTo(width / 2, height / 4);
|
||||
path2.cubicTo(width / 7, height / 9, width / 21, (height * 2) / 5,
|
||||
width / 2, (height * 7) / 12);
|
||||
canvas.drawPath(path2, painter);
|
||||
break;
|
||||
case 'drawArc':
|
||||
// 绘制圆弧
|
||||
// Rect来确认圆弧的位置,还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
|
||||
const PI = 3.1415926;
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(size.width/2, 0.0), radius: 100.0);
|
||||
canvas.drawArc(rect1, 0.0, PI / 2, false, painter ..color = Colors.pink);
|
||||
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(size.width/2, 150.0), radius: 100.0);
|
||||
canvas.drawArc(rect2, 0.0, PI / 2, true, painter ..color = Colors.deepPurple);
|
||||
break;
|
||||
case 'drawRRect':
|
||||
/// fromPoints(Offset a, Offset b)
|
||||
/// 使用左上和右下角坐标来确定矩形的大小和位置
|
||||
/// fromCircle({ Offset center, double radius })
|
||||
/// 使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
|
||||
/// fromLTRB(double left, double top, double right, double bottom)
|
||||
/// 使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
|
||||
/// fromLTWH(double left, double top, double width, double height)
|
||||
/// 使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
|
||||
// 用Rect构建一个边长50,中心点坐标为50,100的矩形
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(50.0, 50.0), radius: 50.0);
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(200.0, 50.0), radius: 50.0);
|
||||
// 根据上面的矩形,构建一个圆角矩形
|
||||
RRect rrect1 = RRect.fromRectAndRadius(rect1, Radius.circular(0.0));
|
||||
canvas.drawRRect(rrect1, painter);
|
||||
RRect rrect2 = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
|
||||
canvas.drawRRect(rrect2, painter);
|
||||
break;
|
||||
case 'drawDRRect':
|
||||
//绘制两个矩形
|
||||
Rect rect1 = Rect.fromCircle(center: Offset(size.width/2, 100.0), radius: 60.0);
|
||||
Rect rect2 = Rect.fromCircle(center: Offset(size.width/2, 100.0), radius: 40.0);
|
||||
//分别绘制外部圆角矩形和内部的圆角矩形
|
||||
RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(30.0));
|
||||
RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(5.0));
|
||||
canvas.drawDRRect(outer, inner, painter ..color = Colors.lime);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
///控制自定义View是否需要重绘的,返回false代表这个View在构建完成后不需要重绘。
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
65
lib/widgets/elements/Media/Canvas/PainterPath/index.dart
Normal file
65
lib/widgets/elements/Media/Canvas/PainterPath/index.dart
Normal file
@ -0,0 +1,65 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as demoBoxs;
|
||||
|
||||
//const Text = '''
|
||||
//### **简介**
|
||||
//> 在 canvas 上绘制时使用的样式说明;
|
||||
//- canvas 上的大多数API都使用一个绘画对象来描述用于该操作的样式。
|
||||
//''';
|
||||
const Text = '''
|
||||
### **简介**
|
||||
> 在 canvas 上绘制的图案;
|
||||
- canvas + paint 的应用。
|
||||
''';
|
||||
|
||||
const Text1 = '''
|
||||
### **基本用法**
|
||||
- canvas 的 painter 的自定义绘制线的方法;
|
||||
''';
|
||||
|
||||
const Text2 = '''
|
||||
> 绘制简单直线
|
||||
''';
|
||||
|
||||
const Text3 = '''
|
||||
> 绘制折线
|
||||
''';
|
||||
|
||||
const Text4 = '''
|
||||
> 二阶贝塞尔曲线
|
||||
''';
|
||||
|
||||
const Text5 = '''
|
||||
> 三阶贝塞尔曲线
|
||||
''';
|
||||
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Media/Canvas/PainterPath';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'PainterPath',
|
||||
codeUrl: 'elements/Media/Canvas/PainterPath/demo.dart',
|
||||
contentList: [
|
||||
Text,
|
||||
Text1,
|
||||
Text2,
|
||||
demoBoxs.CustomViewPage(type:'simpleline'),
|
||||
Text3,
|
||||
demoBoxs.CustomViewPage(type:'polyline'),
|
||||
Text4,
|
||||
demoBoxs.CustomViewPage(type:'Besizerline2'),
|
||||
Text5,
|
||||
demoBoxs.CustomViewPage(type:'Besizerline3'),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/dart-ui/Paint-class.html',
|
||||
);
|
||||
}
|
||||
}
|
221
lib/widgets/elements/Media/Canvas/PainterSketch/demo.dart
Normal file
221
lib/widgets/elements/Media/Canvas/PainterSketch/demo.dart
Normal file
@ -0,0 +1,221 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: ryan
|
||||
* Date: 2019/1/20
|
||||
* Time: 上午11:34
|
||||
* email: zhu.yan@alibaba-inc.com
|
||||
* tartget: PainterSketchDome 的示例
|
||||
*/
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/rendering.dart';
|
||||
|
||||
class PainterSketchDome extends StatefulWidget {
|
||||
PainterSketchDome({Key key, this.title}) : super(key: key);
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
_PainterSketchDomeState createState() => new _PainterSketchDomeState();
|
||||
}
|
||||
|
||||
class _PainterSketchDomeState extends State<PainterSketchDome> {
|
||||
|
||||
List<LinePoints> lines = <LinePoints>[];
|
||||
List<Offset> nowPoints = <Offset>[];
|
||||
Color nowColor = Colors.redAccent;
|
||||
|
||||
void moveGestureDetector(DragUpdateDetails detail){
|
||||
RenderBox box = context.findRenderObject();
|
||||
final Offset xy = box.globalToLocal(detail.globalPosition);// 重要需要转换以下坐标位置
|
||||
Offset p = Offset(xy.dx, xy.dy - 60);
|
||||
//Offset p = Offset(detail.globalPosition.dx, detail.globalPosition.dy - 60);
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
nowPoints.add(p);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void newGestureDetector(DragStartDetails detail) {
|
||||
if (nowPoints.length != 0) {
|
||||
LinePoints l = LinePoints(new List<Offset>.from(nowPoints), nowColor);
|
||||
lines.add(l);
|
||||
nowPoints.clear();
|
||||
}
|
||||
RenderBox box = context.findRenderObject();
|
||||
final Offset xy = box.globalToLocal(detail.globalPosition);// 重要需要转换以下坐标位置
|
||||
Offset p = Offset(xy.dx, xy.dy - 60);
|
||||
//Offset p = Offset(detail.globalPosition.dx, detail.globalPosition.dy - 60);
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
nowPoints.add(p);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void changeColor (Color c){
|
||||
if (nowPoints.length != 0) {
|
||||
LinePoints l = LinePoints(new List<Offset>.from(nowPoints), nowColor);
|
||||
lines.add(l);
|
||||
}
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
nowPoints.clear();
|
||||
nowColor = c;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
List<Color> colors = <Color>[
|
||||
Colors.redAccent,
|
||||
Colors.pink,
|
||||
Colors.greenAccent,
|
||||
Colors.blueAccent,
|
||||
Colors.amber,
|
||||
Colors.purpleAccent,
|
||||
Colors.deepPurpleAccent,
|
||||
Colors.lightBlueAccent,
|
||||
Colors.lightGreenAccent,
|
||||
Colors.cyanAccent,];
|
||||
|
||||
void _tapClear(){
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
lines.clear();
|
||||
nowPoints.clear();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List<Widget> pallet = <Widget>[];
|
||||
for (int i = 0; i < colors.length; i++) {
|
||||
Color c = colors[i];
|
||||
pallet.add(ColorPallet(color: c,changeColor: changeColor,isSelect: c==nowColor,));
|
||||
}
|
||||
|
||||
return SizedBox(
|
||||
width: MediaQuery.of(context).size.width * 0.9,
|
||||
height: MediaQuery.of(context).size.height * 0.6,
|
||||
child:new Scaffold(
|
||||
primary: false,
|
||||
body: new Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white
|
||||
),
|
||||
child:new Flex(
|
||||
direction: Axis.vertical,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
decoration:BoxDecoration(
|
||||
color: Colors.black12
|
||||
),
|
||||
child: ListView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
children: pallet
|
||||
,
|
||||
),
|
||||
height: 60.0,
|
||||
),
|
||||
Expanded(
|
||||
child: AspectRatio(
|
||||
aspectRatio: 1.0,
|
||||
child: GestureDetector(
|
||||
child: CustomPaint(
|
||||
painter: PaintCanvas(lines,nowPoints,nowColor),
|
||||
),
|
||||
onHorizontalDragUpdate: moveGestureDetector,
|
||||
onVerticalDragUpdate: moveGestureDetector,
|
||||
onHorizontalDragStart: newGestureDetector,
|
||||
onVerticalDragStart: newGestureDetector,
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: _tapClear,
|
||||
backgroundColor: Colors.redAccent,
|
||||
foregroundColor: Colors.white,
|
||||
child: Icon(Icons.delete),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class PaintCanvas extends CustomPainter{
|
||||
|
||||
final List<LinePoints> lines;
|
||||
final List<Offset> nowPoints;
|
||||
final Color nowColor;
|
||||
|
||||
PaintCanvas(this.lines, this.nowPoints, this.nowColor);
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
Paint p = new Paint()
|
||||
..color = Colors.redAccent
|
||||
..strokeCap = StrokeCap.round
|
||||
..strokeWidth = 5.0;
|
||||
canvas.save();
|
||||
for (int i = 0; i < lines.length; i++) {
|
||||
LinePoints l = lines[i];
|
||||
for (int j = 1; j < l.points.length; j++){
|
||||
Offset p1 = l.points[j - 1];
|
||||
Offset p2 = l.points[j];
|
||||
p.color = l.lineColor;
|
||||
canvas.drawLine(p1, p2, p);
|
||||
}
|
||||
}
|
||||
for (int i = 1; i < nowPoints.length; i++){
|
||||
Offset p1 = nowPoints[i - 1];
|
||||
Offset p2 = nowPoints[i];
|
||||
p.color = nowColor;
|
||||
canvas.drawLine(p1, p2, p);
|
||||
}
|
||||
|
||||
canvas.restore();
|
||||
}
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
class LinePoints{
|
||||
final List<Offset> points;
|
||||
final Color lineColor;
|
||||
LinePoints(this.points, this.lineColor);
|
||||
}
|
||||
|
||||
class ColorPallet extends StatelessWidget {
|
||||
final Color color;
|
||||
final Function changeColor;
|
||||
const ColorPallet({Key key, this.color, this.changeColor, this.isSelect}) : super(key: key);
|
||||
final bool isSelect;
|
||||
|
||||
void onPressed(){
|
||||
changeColor(color);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new RawMaterialButton(
|
||||
onPressed: onPressed,
|
||||
constraints: BoxConstraints(minWidth: 60.0,minHeight: 50.0),
|
||||
child: new Container(
|
||||
margin: EdgeInsets.only(top: 5.0,bottom: 5.0),
|
||||
width: 50.0,
|
||||
height: 50.0,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.all(Radius.circular(25.0)),
|
||||
border: Border.all(color: Colors.white,width: isSelect?3.0:0.0)
|
||||
),
|
||||
)) ;
|
||||
}
|
||||
}
|
37
lib/widgets/elements/Media/Canvas/PainterSketch/index.dart
Normal file
37
lib/widgets/elements/Media/Canvas/PainterSketch/index.dart
Normal file
@ -0,0 +1,37 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as demoBoxs;
|
||||
|
||||
const Text = '''
|
||||
### **简介**
|
||||
> 操作图形的界面;
|
||||
|
||||
''';
|
||||
const Text1 = '''
|
||||
### **基本用法**
|
||||
- canvas + paint + GestureDetector 实现一个 简易的画板;
|
||||
''';
|
||||
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Media/Canvas/PainterSketch';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'PainterSketch',
|
||||
codeUrl: 'elements/Media/Canvas/PainterSketch/demo.dart',
|
||||
contentList: [
|
||||
Text,
|
||||
Text1,
|
||||
demoBoxs.PainterSketchDome()
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/dart-ui/Paint-class.html',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1 +1,31 @@
|
||||
// import 'package:flutter/material.dart';
|
||||
import 'package:flutter_go/model/widget.dart';
|
||||
import "package:flutter/material.dart";
|
||||
|
||||
import 'PainterSketch/index.dart' as PainterSketch;
|
||||
import 'Canvas/index.dart' as Canvas;
|
||||
import 'PainterPath/index.dart' as PainterPath;
|
||||
import 'CircleProgressBarPainter/index.dart' as CircleProgressBarPainter;
|
||||
|
||||
|
||||
List<WidgetPoint> widgetPoints = [
|
||||
WidgetPoint(
|
||||
name: 'PainterSketch',
|
||||
routerName: PainterSketch.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => PainterSketch.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'Canvas',
|
||||
routerName: Canvas.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => Canvas.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'PainterPath',
|
||||
routerName: PainterPath.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => PainterPath.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'CircleProgressBarPainter',
|
||||
routerName: CircleProgressBarPainter.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => CircleProgressBarPainter.Demo(),
|
||||
)
|
||||
];
|
||||
|
@ -14,7 +14,7 @@ class IconDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: new Icon(
|
||||
child: Icon(
|
||||
Icons.favorite,
|
||||
color: this.curColor,
|
||||
size: 30.0,
|
||||
|
@ -7,16 +7,16 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class IconDataDemo extends StatelessWidget {
|
||||
final Color curColor ;
|
||||
final Color curColor;
|
||||
|
||||
IconDataDemo({Key key, this.curColor}) : super();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: new Icon(
|
||||
child: Icon(
|
||||
//参考 icon constans
|
||||
new IconData(0xe567,
|
||||
IconData(0xe567,
|
||||
fontFamily: 'MaterialIcons', matchTextDirection: true),
|
||||
color: this.curColor,
|
||||
size: 30.0,
|
||||
|
@ -7,7 +7,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class IconThemeDemo extends StatelessWidget {
|
||||
final Color curColor ;
|
||||
final Color curColor;
|
||||
|
||||
IconThemeDemo({Key key, this.curColor}) : super();
|
||||
|
||||
@ -15,17 +15,20 @@ class IconThemeDemo extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return AppBar(
|
||||
actions: <Widget>[
|
||||
new IconTheme(
|
||||
data: new IconThemeData(color: curColor, opacity: 3.0),
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(20.0), child: Icon(Icons.equalizer))),
|
||||
IconTheme(
|
||||
data: IconThemeData(color: curColor, opacity: 3.0),
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(20.0),
|
||||
child: Icon(Icons.equalizer),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class IconThemeDemo2 extends StatelessWidget {
|
||||
final Color curColor ;
|
||||
final Color curColor;
|
||||
final double curSize;
|
||||
|
||||
IconThemeDemo2({Key key, this.curColor, this.curSize}) : super();
|
||||
@ -34,8 +37,8 @@ class IconThemeDemo2 extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return AppBar(
|
||||
actions: <Widget>[
|
||||
new IconTheme(
|
||||
data: new IconThemeData(color: curColor, opacity: 3.0),
|
||||
IconTheme(
|
||||
data: IconThemeData(color: curColor, opacity: 3.0),
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
Icon(
|
||||
|
@ -8,7 +8,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class IconThemeDemo extends StatelessWidget {
|
||||
final Color curColor ;
|
||||
final Color curColor;
|
||||
final double curOpacity;
|
||||
|
||||
IconThemeDemo({Key key, this.curColor, this.curOpacity}) : super();
|
||||
@ -16,20 +16,20 @@ class IconThemeDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: new IconTheme(
|
||||
child: IconTheme(
|
||||
//opacity: 设置透明
|
||||
data: new IconThemeData(
|
||||
data: IconThemeData(
|
||||
color: curColor,
|
||||
opacity: curOpacity,
|
||||
),
|
||||
child: new Icon(Icons.favorite),
|
||||
child: Icon(Icons.favorite),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class IconThemeDemo2 extends StatelessWidget {
|
||||
final Color curColor ;
|
||||
final Color curColor;
|
||||
final double curSize;
|
||||
|
||||
IconThemeDemo2({Key key, this.curColor, this.curSize}) : super();
|
||||
@ -38,8 +38,8 @@ class IconThemeDemo2 extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return AppBar(
|
||||
actions: <Widget>[
|
||||
new IconTheme(
|
||||
data: new IconThemeData(color: curColor, opacity: 1.0),
|
||||
IconTheme(
|
||||
data: IconThemeData(color: curColor, opacity: 1.0),
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
Icon(Icons.favorite_border),
|
||||
|
@ -10,8 +10,8 @@ class ImageIconDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
//注意:当你用一个图片的时候,这个图片会被整个覆盖,只保留图片的形状,填充你设置的颜色
|
||||
return new ImageIcon(
|
||||
new AssetImage('assets/images/btn_icon_dingyuehao_normal.png'),
|
||||
return ImageIcon(
|
||||
AssetImage('assets/images/btn_icon_dingyuehao_normal.png'),
|
||||
color: Colors.red,
|
||||
size: 50.0,
|
||||
);
|
||||
|
@ -17,20 +17,20 @@ List<WidgetPoint> widgetPoints = [
|
||||
name: 'ImageIcon',
|
||||
routerName: ImageIcon.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => ImageIcon.Demo(),
|
||||
), WidgetPoint(
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'IconTheme',
|
||||
routerName: IconTheme.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => IconTheme.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
WidgetPoint(
|
||||
name: 'IconData',
|
||||
routerName: IconData.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => IconData.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
WidgetPoint(
|
||||
name: 'IconThemeData',
|
||||
routerName: IconThemeData.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => IconThemeData.Demo(),
|
||||
),
|
||||
|
||||
];
|
||||
|
@ -11,8 +11,8 @@ class FadeInImageDemo extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
new ClipOval(
|
||||
child: new FadeInImage.assetNetwork(
|
||||
ClipOval(
|
||||
child: FadeInImage.assetNetwork(
|
||||
placeholder: "assets/images/normal_user_icon.png", //预览图
|
||||
fit: BoxFit.fitWidth,
|
||||
image:
|
||||
@ -24,10 +24,10 @@ class FadeInImageDemo extends StatelessWidget {
|
||||
SizedBox(
|
||||
height: 20.0,
|
||||
),
|
||||
new CircleAvatar(
|
||||
backgroundImage: new NetworkImage(
|
||||
CircleAvatar(
|
||||
backgroundImage: NetworkImage(
|
||||
"https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png"),
|
||||
child: new Text("一凨"), //可以在图片上添加文字等等
|
||||
child: Text("一凨"), //可以在图片上添加文字等等
|
||||
),
|
||||
],
|
||||
);
|
||||
|
@ -13,7 +13,7 @@ import 'dart:io';
|
||||
|
||||
class FileImageDemo extends StatefulWidget {
|
||||
@override
|
||||
_FileImageDemoState createState() => new _FileImageDemoState();
|
||||
_FileImageDemoState createState() => _FileImageDemoState();
|
||||
}
|
||||
|
||||
class _FileImageDemoState extends State<FileImageDemo> {
|
||||
@ -31,10 +31,10 @@ class _FileImageDemoState extends State<FileImageDemo> {
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
new Center(
|
||||
Center(
|
||||
child: _image == null
|
||||
? new Text('您还未选择任何图片.')
|
||||
: new Image.file(_image,scale: 0.5,fit: BoxFit.cover,),
|
||||
? Text('您还未选择任何图片.')
|
||||
: Image.file(_image,scale: 0.5,fit: BoxFit.cover,),
|
||||
),
|
||||
FlatButton(
|
||||
onPressed: getImage,
|
||||
|
@ -29,11 +29,11 @@ class _MemoryImageDemoState extends State<MemoryImageDemo> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final decoration = new BoxDecoration(
|
||||
final decoration = BoxDecoration(
|
||||
image: bytes == null
|
||||
? null
|
||||
: new DecorationImage(
|
||||
image: new MemoryImage(bytes,scale: 1.0),
|
||||
: DecorationImage(
|
||||
image: MemoryImage(bytes,scale: 1.0),
|
||||
),
|
||||
);
|
||||
return Container(
|
||||
|
@ -6,10 +6,12 @@
|
||||
*/
|
||||
import 'Image/index.dart' as Image;
|
||||
import 'Icon/index.dart' as Icon;
|
||||
import 'Canvas/index.dart' as Canvas;
|
||||
|
||||
List getWidgets() {
|
||||
List result = [];
|
||||
result.addAll(Image.widgetPoints);
|
||||
result.addAll(Icon.widgetPoints);
|
||||
result.addAll(Canvas.widgetPoints);
|
||||
return result;
|
||||
}
|
Reference in New Issue
Block a user