Flutter入门（五）--表单+单选/多选+日期+轮播+对话框
* 表单
class TextFieldDemo extends StatelessWidget {
const TextFieldDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
TextField(),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
hintText: "请输入搜索的内容",
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextField(
maxLines: 4,
decoration: InputDecoration(
hintText: "多行文本框",
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "密码框",
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "用户名",
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
icon: Icon(Icons.people),
hintText: "请输入用户名",
),
),
],
),
);
}
}
效果图
* CheckBox多选
import 'package:flutter/material.dart';
class CheckBoxPage extends StatefulWidget {
CheckBoxPage({Key key}) : super(key: key);
@override
_CheckBoxPageState createState() => _CheckBoxPageState();
}
class _CheckBoxPageState extends State<CheckBoxPage> {
var flag = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("checkbox"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Checkbox(
value: this.flag,
onChanged: (v) {
setState(() {
this.flag = v;
});
},
activeColor: Colors.red,
)
],
),
Row(
children: <Widget>[Text(this.flag ? "选中" : "未选中")],
),
SizedBox(height: 20),
CheckboxListTile(
value: this.flag,
onChanged: (v) {
setState(() {
this.flag = v;
});
},
title: Text("标题"),
subtitle: Text("这是二级标题"),
),
Divider(),
CheckboxListTile(
value: this.flag,
onChanged: (v) {
setState(() {
this.flag = v;
});
},
title: Text("标题"),
subtitle: Text("这是二级标题"),
secondary: Icon(Icons.help),
),
],
),
);
}
}
效果图
* Radio单选
import 'package:flutter/material.dart';
class RadioPage extends StatefulWidget {
RadioPage({Key key}) : super(key: key);
@override
_RadioPageState createState() => _RadioPageState();
}
class _RadioPageState extends State<RadioPage> {
var sex = 1;
bool flag = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Radio"),
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
// Row(
// children: <Widget>[
// Text("男"),
// Radio(
// value: 1,
// onChanged: (v) {
// setState(() {
// this.sex = v;
// });
// },
// groupValue: this.sex,
// ),
// Text("女"),
// Radio(
// value: 2,
// onChanged: (v) {
// setState(() {
// this.sex = v;
// });
// },
// groupValue: this.sex,
// )
// ],
// ),
// Row(
// children: <Widget>[
// Text(this.sex == 1 ? "男" : "女"),
// ],
// ),
SizedBox(
height: 20,
),
RadioListTile(
value: 1,
onChanged: (v) {
setState(() {
this.sex = v;
});
},
groupValue: this.sex,
title: Text("标题"),
subtitle: Text("二级标题"),
secondary: Icon(Icons.help),
selected: this.sex == 1,
),
RadioListTile(
value: 2,
onChanged: (v) {
setState(() {
this.sex = v;
});
},
groupValue: this.sex,
title: Text("标题"),
subtitle: Text("二级标题"),
secondary: Icon(Icons.help),
selected: this.sex == 2,
),
SizedBox(height: 20),
Switch(
value: this.flag,
onChanged: (v) {
setState(() {
print(v);
this.flag = v;
});
},
)
],
),
),
);
}
}
效果图
* 日期选择showTimePicker+showDatePicker
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
class DatePage extends StatefulWidget {
DatePage({Key key}) : super(key: key);
@override
_DatePageState createState() => _DatePageState();
}
class _DatePageState extends State<DatePage> {
DateTime _nowDate = DateTime.now();
var _nowTime = TimeOfDay(hour: 12, minute: 20);
_showDatePicker() {
showDatePicker(
context: context,
initialDate: _nowDate,
firstDate: DateTime(1980),
lastDate: DateTime(2100),
).then((result) {
setState(() {
this._nowDate = result;
});
});
}
_showTimePicker() {
showTimePicker(
context: context,
initialTime: _nowTime,
).then((result) {
setState(() {
this._nowTime = result;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DatePicker"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd, '日'])}"),
Icon(Icons.arrow_drop_down)
],
),
onTap: () {
_showDatePicker();
},
),
SizedBox(height: 10),
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("${_nowTime.format(context)}"),
Icon(Icons.arrow_drop_down)
],
),
onTap: () {
_showTimePicker();
},
),
],
),
);
}
}
国际化方案http://bbs.itying.com/topic/5cfb2a12f322340b2c90e764
效果图
* 第三方日期库
库地址https://pub.dev/packages/datetime_picker_formfield
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
import 'package:date_format/date_format.dart';
class DatePubPage extends StatefulWidget {
DatePubPage({Key key}) : super(key: key);
@override
_DatePubPageState createState() => _DatePubPageState();
}
class _DatePubPageState extends State<DatePubPage> {
DateTime _dateTime = DateTime.now();
_showDatePicker() {
DatePicker.showDatePicker(
context,
pickerTheme: DateTimePickerTheme(
showTitle: true,
confirm: Text('确定', style: TextStyle(color: Colors.red)),
cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
),
minDateTime: DateTime.parse('1980-01-01'),
maxDateTime: DateTime.parse('2020-12-30'),
initialDateTime: _dateTime,
dateFormat: 'yyyy-MM-dd',
locale: DateTimePickerLocale.zh_cn,
onClose: () => print("----- onClose -----"),
onCancel: () => print('onCancel'),
onChange: (dateTime, List<int> index) {
setState(() {
_dateTime = dateTime;
});
},
onConfirm: (dateTime, List<int> index) {
setState(() {
_dateTime = dateTime;
});
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第三方日期"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
child: Row(
children: <Widget>[
Text("${formatDate(_dateTime,[yyyy,'年',mm,'月','dd','日'])}"),
Icon(Icons.arrow_drop_down),
],
),
onTap: _showDatePicker,
)
],
)
],
),
);
}
}
效果图
* 轮播图
库地址https://pub.dev/packages/flutter_swiper
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class SwiperPage extends StatefulWidget {
SwiperPage({Key key}) : super(key: key);
@override
_SwiperPageState createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList = [
{"url": "https://www.itying.com/images/flutter/2.png"},
{"url": "https://www.itying.com/images/flutter/3.png"},
{"url": "https://www.itying.com/images/flutter/4.png"},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('轮播图组件'),
),
body: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
pagination: new SwiperPagination(), //底部分页器
control: new SwiperControl(), //左右箭头
),
);
}
}
效果图
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class SwiperPage extends StatefulWidget {
SwiperPage({Key key}) : super(key: key);
@override
_SwiperPageState createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList = [
{"url": "https://www.itying.com/images/flutter/2.png"},
{"url": "https://www.itying.com/images/flutter/3.png"},
{"url": "https://www.itying.com/images/flutter/4.png"},
{"url": "https://www.itying.com/images/flutter/5.png"},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('轮播图组件'),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
child: AspectRatio(
aspectRatio: 16 / 9,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
pagination: new SwiperPagination(), //底部分页器
// control: new SwiperControl(), //左右箭头
autoplay: true,
),
),
)
],
),
);
}
}
效果图
其他效果
* Dialog（对话框）
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class DialogPage extends StatefulWidget {
DialogPage({Key key}) : super(key: key);
_DialogPageState createState() => _DialogPageState();
}
class _DialogPageState extends State<DialogPage> {
_alertDialog() async {
var result = await showDialog(
barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示信息!"),
content: Text("您确定要删除吗?"),
actions: <Widget>[
FlatButton(
child: Text("取消"),
onPressed: () {
print("取消");
Navigator.pop(context, 'Cancle');
},
),
FlatButton(
child: Text("确定"),
onPressed: () {
print("确定");
Navigator.pop(context, "Ok");
},
)
],
);
});
print(result);
}
_simpleDialog() async {
var result = await showDialog(
barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return SimpleDialog(
title: Text("选择内容"),
children: <Widget>[
SimpleDialogOption(
child: Text("Option A"),
onPressed: () {
print("Option A");
Navigator.pop(context, "A");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option B"),
onPressed: () {
print("Option B");
Navigator.pop(context, "B");
},
),
Divider(),
SimpleDialogOption(
child: Text("Option C"),
onPressed: () {
print("Option C");
Navigator.pop(context, "C");
},
),
Divider(),
],
);
});
print(result);
}
_modelBottomSheet() async {
var result = await showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 220,
child: Column(
children: <Widget>[
ListTile(
title: Text("分享 A"),
onTap: () {
Navigator.pop(context, "分享 A");
},
),
Divider(),
ListTile(
title: Text("分享 B"),
onTap: () {
Navigator.pop(context, "分享 B");
},
),
Divider(),
ListTile(
title: Text("分享 C"),
onTap: () {
Navigator.pop(context, "分享 C");
},
)
],
),
);
});
print(result);
}
_toast() {
Fluttertoast.showToast(
msg: "提示信息",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIos: 1,
backgroundColor: Colors.black,
textColor: Colors.white,
fontSize: 16.0);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dialog"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('alert弹出框-AlertDialog '),
onPressed: _alertDialog,
),
SizedBox(height: 20),
RaisedButton(
child: Text('select弹出框-SimpleDialog'),
onPressed: _simpleDialog,
),
SizedBox(height: 20),
RaisedButton(
child: Text('ActionSheet底部弹出框-showModalBottomSheet'),
onPressed: _modelBottomSheet,
),
SizedBox(height: 20),
RaisedButton(
child: Text('toast-fluttertoast第三方库'),
onPressed: _toast,
),
// fluttertoast
],
),
));
}
}
效果图
代码地址https://github.com/king1039/FlutterRoute/tree/master/lib
Flutter学习就暂告一段落，Flutter中文网的文档很齐全，Flutter实战电子书也很棒，大家可以自行学习
欢迎关注我的微信公众号：安卓圈
