文章目录
appBar 返回按钮
Scaffold 设置了appBar,就会自动添加返回按钮
4 Checkbox:复选框
import 'package:flutter/material.dart';
class CheckBoxDemo extends StatefulWidget {
CheckBoxDemo({Key key}) : super(key: key);
@override
_CheckBoxDemoState createState() => _CheckBoxDemoState();
}
class _CheckBoxDemoState extends State<CheckBoxDemo> {
bool _checkBoxItemA=true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CheckBoxDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(
value: _checkBoxItemA, //false 未勾选状态,true勾选状态,未勾选的颜色默认是Theme的accentColor
onChanged: (value){
setState(() {
_checkBoxItemA=value;
});
},
activeColor:Colors.yellow ,//勾选后的颜色
)
],
)
],
),
),
);
}
}
5 CheckboxListTile:带标签与图标的复选框
import 'package:flutter/material.dart';
class CheckBoxDemo extends StatefulWidget {
CheckBoxDemo({Key key}) : super(key: key);
@override
_CheckBoxDemoState createState() => _CheckBoxDemoState();
}
class _CheckBoxDemoState extends State<CheckBoxDemo> {
bool _checkBoxItemA=true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CheckBoxDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CheckboxListTile(
value: _checkBoxItemA,
onChanged: (value){
setState(() {
_checkBoxItemA=value;
});
},
title: Text('Checkbox Item A'),//主标题
subtitle: Text('Description'),//子标题
secondary:Icon(Icons.bookmark) ,//图标
selected: _checkBoxItemA,//选择状态,对应状态下图标颜色会变化
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
/*Checkbox(
value: _checkBoxItemA, //false 未勾选状态,true勾选状态,未勾选的颜色默认是Theme的accentColor
onChanged: (value){
setState(() {
_checkBoxItemA=value;
});
},
activeColor:Colors.yellow ,//勾选后的颜色
)*/
],
)
],
),
),
);
}
}
6 Radio:单选按钮
import 'package:flutter/material.dart';
class RadioDemo extends StatefulWidget {
RadioDemo({Key key}) : super(key: key);
@override
_RadioDemo createState() => _RadioDemo();
}
class _RadioDemo extends State<RadioDemo> {
int _radioGroupA=0;
void _handleRadioValueChanged(int value){
setState(() {
_radioGroupA=value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadioDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Radio(
value: 0,
groupValue: _radioGroupA,
onChanged: _handleRadioValueChanged,
activeColor: Colors.black,
),
Radio(
value: 1,
groupValue: _radioGroupA,
onChanged: _handleRadioValueChanged,
activeColor: Colors.black,
)
],
)
],
),
),
);
}
}
7 RadioListTile:带标签与图标的单选按钮
import 'package:flutter/material.dart';
class RadioDemo extends StatefulWidget {
RadioDemo({Key key}) : super(key: key);
@override
_RadioDemo createState() => _RadioDemo();
}
class _RadioDemo extends State<RadioDemo> {
int _radioGroupA=0;
void _handleRadioValueChanged(int value){
setState(() {
_radioGroupA=value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadioDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('RadioGroupValue:$_radioGroupA'),
SizedBox(height:32.0),
RadioListTile(
value: 0,
groupValue: _radioGroupA,
onChanged: _handleRadioValueChanged,
title: Text('Options A'),
subtitle: Text('Description'),
secondary: Icon(Icons.filter_1),
selected: _radioGroupA==0,//是否使用选中的颜色
),
RadioListTile(
value: 1,
groupValue: _radioGroupA,
onChanged: _handleRadioValueChanged,
title: Text('Options B'),
subtitle: Text('Description'),
secondary: Icon(Icons.filter_2),
selected: _radioGroupA==1,//是否使用选中的颜色
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
)
],
),
),
);
}
}
8 Switch:开关
import 'package:flutter/material.dart';
class SwitchDemo extends StatefulWidget {
SwitchDemo({Key key}) : super(key: key);
@override
_SwitchDemo createState() => _SwitchDemo();
}
class _SwitchDemo extends State<SwitchDemo> {
bool _switchItemA=false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadioDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_switchItemA?'😀':'😔'),
Switch(
value: _switchItemA,
onChanged: (value){
setState(() {
_switchItemA=value;
});
}
)
],
)
],
),
),
);
}
}
9 SwitchListTile:带标签与图标的开关
import 'package:flutter/material.dart';
class SwitchDemo extends StatefulWidget {
SwitchDemo({Key key}) : super(key: key);
@override
_SwitchDemo createState() => _SwitchDemo();
}
class _SwitchDemo extends State<SwitchDemo> {
bool _switchItemA=false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadioDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SwitchListTile(
value: _switchItemA,
onChanged: (value){
setState(() {
_switchItemA=value;
});
},
title: Text('Switch Item A'),
subtitle: Text('Description'),
secondary: Icon(_switchItemA?Icons.visibility:Icons.visibility_off),
selected: _switchItemA,
) ,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
)
],
),
),
);
}
}
10 Slider:滑动选择器
import 'package:flutter/material.dart';
class SliderDemo extends StatefulWidget {
@override
_SliderDemoState createState() => _SliderDemoState();
}
class _SliderDemoState extends State<SliderDemo> {
double _sliderItemA = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SliderDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Slider(
value: _sliderItemA,
onChanged: (value) {
setState(() {
_sliderItemA = value;
});
},
activeColor: Theme.of(context).accentColor,
inactiveColor: Theme.of(context).accentColor.withOpacity(0.3),
min: 0.0,
max: 10.0,
divisions: 10,
label: '${_sliderItemA.toInt()}',
),
],
),
SizedBox(height: 16.0,),
Text('SliderValue: $_sliderItemA'),
],
),
)
);
}
}
11 安装第三方包(演示安装 Intl 包)
搜索包,打开,找到版本号
点击运行会自动安装。
12 显示格式化日期
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class DateTimeDemo extends StatefulWidget {
DateTimeDemo({Key key}) : super(key: key);
@override
_DateTimeDemo createState() => _DateTimeDemo();
}
class _DateTimeDemo extends State<DateTimeDemo> {
final DateTime selectedDate=DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DateTimeDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(//可以添加一个onTap属性
onTap:(){
},
child: Row(
children:<Widget>[
Text(DateFormat.yMMMd().format(selectedDate)),
Icon(Icons.arrow_drop_down),
]
),
),
],
)
],
),
),
);
}
}
13 showDatePicker:选择日期
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class DateTimeDemo extends StatefulWidget {
DateTimeDemo({Key key}) : super(key: key);
@override
_DateTimeDemo createState() => _DateTimeDemo();
}
class _DateTimeDemo extends State<DateTimeDemo> {
final DateTime selectedDate=DateTime.now();
_selectDate(){
showDatePicker(
context: context,
initialDate: selectedDate,//初始时间
firstDate: DateTime(1900), //可选择的最早日期
lastDate: DateTime(2100)//可选择的未来期限
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DateTimeDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(//可以添加一个onTap属性
onTap:_selectDate,
child: Row(
children:<Widget>[
Text(DateFormat.yMd().format(selectedDate)),
Icon(Icons.arrow_drop_down),
]
),
),
],
)
],
),
),
);
}
}
showDatePicker:获取选择的日期
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
class DateTimeDemo extends StatefulWidget {
DateTimeDemo({Key key}) : super(key: key);
@override
_DateTimeDemo createState() => _DateTimeDemo();
}
class _DateTimeDemo extends State<DateTimeDemo> {
DateTime selectedDate=DateTime.now();
_selectDate() async {
final DateTime date=await showDatePicker(
context: context,
initialDate: selectedDate,//初始时间
firstDate: DateTime(1900), //可选择的最早日期
lastDate: DateTime(2100)//可选择的未来期限
);
if(date== null)return;
setState(() {
selectedDate=date;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DateTimeDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(//可以添加一个onTap属性
onTap:_selectDate,
child: Row(
children:<Widget>[
Text(DateFormat.yMd().format(selectedDate)),
Icon(Icons.arrow_drop_down),
]
),
),
],
)
],
),
),
);
}
}
15 showTimePicker:时间选择器
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
class DateTimeDemo extends StatefulWidget {
DateTimeDemo({Key key}) : super(key: key);
@override
_DateTimeDemo createState() => _DateTimeDemo();
}
class _DateTimeDemo extends State<DateTimeDemo> {
DateTime selectedDate=DateTime.now();
TimeOfDay selectedTime=TimeOfDay(hour: 9, minute: 30);
_selectDate() async {
final DateTime date=await showDatePicker(
context: context,
initialDate: selectedDate,//初始时间
firstDate: DateTime(1900), //可选择的最早日期
lastDate: DateTime(2100)//可选择的未来期限
);
if(date== null)return;
setState(() {
selectedDate=date;
});
}
_selectTime() async{
final TimeOfDay time=await showTimePicker(
context: context,
initialTime: selectedTime,
);
if(time==null)return;
setState(() {
selectedTime=time;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DateTimeDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(//可以添加一个onTap属性
onTap:_selectDate,
child: Row(
children:<Widget>[
Text(DateFormat.yMd().format(selectedDate)),
Icon(Icons.arrow_drop_down),
]
),
),
InkWell(//可以添加一个onTap属性
onTap:_selectTime,
child: Row(
children:<Widget>[
Text(selectedTime.format(context)),
Icon(Icons.arrow_drop_down),
]
),
),
],
)
],
),
),
);
}
}
16 Future:异步程序
如果程序里有一些接口需要花费一些时间去执行,比如读取文件等等,我们一般不会一直等待它完成。一般会让他先返回一个初始值,然后等他执行完了,再更新新的值。
async