flutter框架一文通(二)
(续)第三部分 StatefulWidget 带界面改变交互的组件
三十五. FittedBox //自适应填充盒模型
此盒子允许他的子组件有自适应性
image
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("FittedBox")),
body: Column(
children: [
Container(
width: 200,
height: 100,
color: Colors.greenAccent,
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.center,
child: Text("使用fill模式自适应"),
),
)
],
),
),
);
}
}
image
三十六. OverflowBox //允许溢出的盒模型
此盒子允许他的子组件溢出
image
image
三十七. RotatedBox //允许旋转盒模型
此盒子允许他的子组件旋转,会顺时针旋转 quarterTurns × 90°
image
image
注意data的方向
三十八. SizedBox //限定大小的盒模型
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("RotatedBox")),
body: SizedBox(
width: 200,
height: 200,
child: Container(
width: 400,
height: 100,
color: Colors.blue,
)),
),
);
}
}
image
子组件设置了宽高,但不管用了
三十九. FlatButton //扁平按钮组件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("FlatButton")),
body: Center(
child: Column(
children: [
FlatButton(
child: Text("data"),
colorBrightness: Brightness.dark,
onHighlightChanged: (n) {},
onPressed: () {},
onLongPress: () {},
color: Colors.pinkAccent,
),
FlatButton.icon(
color: Colors.amberAccent,
onPressed: () {},
icon: Icon(Icons.history),
label: Text("null")),
],
),
),
),
);
}
}
image
四十. IconButton //图标按钮组件
image
四十一 OutlineButton //外边线按钮组件
image
四十二. RawMaterialButton //原始按钮组件
image
四十三. GridTile //网格瓦片
image
四十四. GridTileBar//GridTile的导航条
image
四十五. GridPaper //带图纸格的网格瓦片
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("GridTile组件")),
body: Page1(),
));
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 4,
padding: EdgeInsets.all(4),
children: [
GridTile(
header: GridTileBar(
leading: Icon(Icons.ac_unit),
title: Text("这是个GridTile"),
subtitle: Text("这是个GridTileBar"),
trailing: Icon(Icons.queue),
backgroundColor: Colors.amber,
),
child: Image.network(
"http://5b0988e595225.cdn.sohucs.com/images/20180703/9816cbfecebf42478739877b5aa2c712.gif"),
footer: Text("footer也可以添加GridTileBar"),
),
GridPaper(
color: Colors.red,
interval :200,//网格大小
divisions :2,//每个网格分成几份
subdivisions :5,//每个小网格再分几份
child: Image.asset('images/4.jpg'),
),
Image.asset('images/2.jpg'),
Image.asset('images/3.jpg'),
Image.asset('images/1.jpg'),
Image.asset('images/5.jpg'),
Image.asset('images/7.jpg'),
Image.asset('images/8.jpg'),
],
);
}
}
image
四十六. Wrap排排坐布局组件
放不开就换行继续排排坐
image
image
(续)第四部分 StatefulWidget 带界面改变交互的组件
三. 下拉按钮组件
image
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("DropdownButDemo")),
body: Center(
child: DropdownButDemo(),
),
),
);
}
}
class DropdownButDemo extends StatefulWidget {
@override
_DropdownButDemoState createState() => _DropdownButDemoState();
}
class _DropdownButDemoState extends State with SingleTickerProviderStateMixin {
int _cureentValue=1;
List dropItemsList(){
final List mitems=List();
final DropdownMenuItem item1 =DropdownMenuItem(child: Text("book"),value: 1);
final DropdownMenuItem item2 =DropdownMenuItem(child: Text("shop"),value: 2);
final DropdownMenuItem item3 =DropdownMenuItem(child: Text("cake"),value: 3);
final DropdownMenuItem item4 =DropdownMenuItem(child: Text("bank"),value: 4);
mitems.add(item1);
mitems.add(item2);
mitems.add(item3);
mitems.add(item4);
return mitems;
}
@override
Widget build(BuildContext context) {
return DropdownButton(
value: _cureentValue,
items: dropItemsList(),//下拉列表
hint: Text("请下拉"),//提示文本
iconSize: 48,//图标大小
elevation: 10,//阴影
isExpanded: true,//继承父容器的大小
focusColor: Colors.redAccent, //获得焦点的颜色
iconEnabledColor: Colors.amber,//按钮可用时的颜色
iconDisabledColor: Colors.grey,//按钮不可用时的颜色
icon: Icon(Icons.keyboard_arrow_down),
style: TextStyle(fontSize: 30,color: Colors.black54,),//字体样式
isDense:true,
itemHeight:80,
autofocus: true,
onChanged: (T){
setState((){
_cureentValue=T;
});
},
);
}
}
image
四. Checkbox打勾组件
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("FlatButton")),
body: Demo(),
));
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State {
bool _currentValue = false;
@override
Widget build(BuildContext context) {
return Checkbox(
tristate: false, //可不可以为null
value: _currentValue,
activeColor: Colors.amber,
checkColor: Colors.red,
focusColor: Colors.red,
hoverColor: Colors.red,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (t) {
setState(() {
_currentValue = t;
});
},
);
}
}
五. CheckboxListTile //打勾瓦片组件
image
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("FlatButton")),
body: Demo(),
));
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State {
bool value = false;
List _currentValue = [false, false, false, false];
void _valueChange(t) {
setState(() {
value=t;
for (int i = 0; i < _currentValue.length; i++) {
_currentValue[i] = t;
}
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
CheckboxListTile(
isThreeLine: false, //是否三行显示,一般选false
title: Text("选中所有"), //标题
dense: false, //紧凑布局
selected: true,
controlAffinity: ListTileControlAffinity.trailing,
value: value,
onChanged: _valueChange,
),
CheckboxListTile(
isThreeLine: false, //是否三行显示,一般选false
title: Text("杨玉环"), //标题
subtitle: Text("女,18岁"), //副标题
dense: false, //紧凑布局
selected: true,
controlAffinity: ListTileControlAffinity.platform,
secondary: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581360787949&di=2075de533e3f6802d2b8f566e2cccc47&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180830%2F22%2F1535639077-NaJgkzElOK.jpg"),
value: _currentValue[0],
onChanged: (t) {
setState(() {
_currentValue[0] = t;
});
},
),
CheckboxListTile(
isThreeLine: false, //是否三行显示,一般选false
title: Text("西施"), //标题
subtitle: Text("女,18岁"), //副标题
dense: false, //紧凑布局
selected: true,
controlAffinity: ListTileControlAffinity.trailing,
secondary: Image.network(
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3182256423,1717147835&fm=11&gp=0.jpg"),
value: _currentValue[1],
onChanged: (t) {
setState(() {
_currentValue[1] = t;
});
},
),
CheckboxListTile(
isThreeLine: false, //是否三行显示,一般选false
title: Text("王昭君"), //标题
subtitle: Text("女,18岁"), //副标题
dense: false, //紧凑布局
selected: true,
controlAffinity: ListTileControlAffinity.trailing,
secondary: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581359280191&di=7a5561c54cdebbd1c086e20fff74cb69&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F03%2F1533152912-BmPIzdDxuT.jpg"),
value: _currentValue[2],
onChanged: (t) {
setState(() {
_currentValue[2] = t;
});
},
),
CheckboxListTile(
isThreeLine: false, //是否三行显示,一般选false
title: Text("貂蝉"), //标题
subtitle: Text("女,18岁"), //副标题
dense: false, //紧凑布局
selected: true,
controlAffinity: ListTileControlAffinity.trailing,
secondary: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581360805579&di=a766843271f7c675f0fcacbafd78756c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201409%2F25%2F20140925221655_vX8Z4.thumb.1000_0.jpeg"),
value: _currentValue[3],
onChanged: (t) {
setState(() {
_currentValue[3] = t;
});
},
),
],
);
}
}
image
六. Chip //小标签组件
image
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("Chip组件")),
body: Demo(),
));
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State {
List _tag=["android","IOS","Win","linux"];
@override
Widget build(BuildContext context) {
return Column(
children: _tag.map((tag) { //这里用map().toList函数生成chip组件
return Chip(
label: Text(tag),
avatar: CircleAvatar(
child: Icon(Icons.desktop_mac),
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onDeleted: (){
setState(() {
_tag.remove(tag);
});
},
);
}).toList(),
);
}
}
image
七.ActionChip //可交互小标签
和上面的组件用法基本一致,交互动作改为了onPress.
多了tooltip 少了delete相关的属性
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("Chip组件")),
body: Demo(),
));
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State {
List _tag = ["android", "IOS", "Win", "linux"];
@override
Widget build(BuildContext context) {
return Column(
children: _tag.map((tag) {
return ActionChip(
label: Text(tag),
avatar: CircleAvatar(
child: Icon(Icons.desktop_mac),
),
materialTapTargetSize: MaterialTapTargetSize.padded,
onPressed: () {
setState(() {
Scaffold.of(context).removeCurrentSnackBar();
Scaffold.of(context).showSnackBar(SnackBar(content: Text(tag)));
});
},
);
}).toList(),
);
}
}
image
八. FilterChip //过滤小标签
过滤小标签特色是有一个属性叫select,有一个动作叫onSelected()
image
所以是可以打勾的.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("ActionChip组件")),
body: Demo(),
));
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State {
List _tag = ["android", "IOS", "Win", "linux"];
List _selected = [];
@override
Widget build(BuildContext context) {
return Column(
children: [
Center(child: Text(_selected.toString())),
Column(
children: _tag.map((tag) {
return FilterChip(
selected: _selected.contains(tag),
label: Text(tag),
avatar: CircleAvatar(
child: Icon(Icons.desktop_mac),
),
materialTapTargetSize: MaterialTapTargetSize.padded,
onSelected: (value) {
setState(() {
if (_selected.contains(tag)) {
_selected.remove(tag);
} else {
_selected.add(tag);
}
});
},
);
}).toList(),
)
],
);
}
}
image
九. ChoiceChip //允许从一组选项中进行单一选择
同FilterChip,只是selected风格不一样
image
例:单选
image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("ActionChip组件")),
body: Demo(),
));
}
}
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State {
List _tag = ["android", "IOS", "Win", "linux"];
String _selected;
@override
Widget build(BuildContext context) {
return Column(
children: [
Center(child: Text(_selected.toString())),
Column(
children: _tag.map((tag) {
return ChoiceChip(
selected: tag == _selected,
label: Text(tag),
avatar: CircleAvatar(
child: Icon(Icons.desktop_mac),
),
materialTapTargetSize: MaterialTapTargetSize.padded,
onSelected: (value) {
setState(() {
_selected = tag;
});
},
);
}).toList(),
)
],
);
}
}
十 AboutDialog //关于对话框
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("AboutDialog组件")),
body: Page1(),
));
}
}
void myAboutDialog(context) {
showDialog(
context: context,
builder: (_) => AboutDialog(
applicationIcon: Icon(Icons.ac_unit),
applicationName: "MyApp",
applicationVersion: "v0.0.1",
applicationLegalese: "@oliver,@google",
));
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text("关于"),
onPressed: () {
myAboutDialog(context
);
}),
);
}
}
image
十一 SimpleDialog //选择对话框
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("SimpleDialog组件")),
body: Page1(),
));
}
}
void mySimpleDialog(context) {
showDialog(
context: context,
builder: (context) => SimpleDialog(
title: Text("data"),
children: [
SimpleDialogOption(
child: Text("选项1"),
onPressed: () {
Navigator.of(context).pop(context);
},
),
SimpleDialogOption(
child: Text("选项2"),
onPressed: () {
Navigator.of(context).pop();
},
),
SimpleDialogOption(
child: Text("选项3"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
));
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text("关于"),
onPressed: () {
mySimpleDialog(context);
}),
);
}
}
image
十二 AlertDialog //报警组件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "TEST",
home: Scaffold(
appBar: AppBar(title: Text("AlertDialog组件")),
body: Page1(),
));
}
}
void mySimpleDialog(context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text("温馨提示"),
titlePadding: EdgeInsets.all(15),
semanticLabel: "??",
content: Text("您的余额不足!请您滚一边去!谢谢!!!"),
actions: [
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("确定")),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("取消"))
],
));
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text("关于"),
onPressed: () {
mySimpleDialog(context);
}),
);
}
}
image
作者：熊爸天下_56c7
链接：https://www.jianshu.com/p/dbd735a488e8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。