1.Checkbox
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
// 当前Index
var currentIndex = 0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Checkbox(
// 激活颜色
activeColor: Colors.red,
// 是否被选中
value: currentIndex == 0,
// 表示值 又可能是 ture false null (正常步包含null )
tristate: true,
onChanged: (bool check){
setState(() {
currentIndex = 0;
});
},
),
Checkbox(
// 激活颜色
activeColor: Colors.red,
// 是否被选中
value: currentIndex == 1,
onChanged: (bool check){
setState(() {
currentIndex = 1;
});
},
)
],
);
}
}
2.CheckboxListTile组件
class _DemoPageState extends State<DemoPage> {
// 当前Index
bool _value = false;
List<bool> isChecks = [false, false, false];
void _valueChanged(bool value){
for(int i=0; i<isChecks.length; i++){
isChecks[i] = value;
}
}
bool isCheck = false;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
CheckboxListTile(
// value: currentIndex,
value: _value,
// 默认文字是否选中
selected: true,
onChanged: _valueChanged,
// 文字是否对齐 图标高度
dense: false,
// 文字是否有三行显示
isThreeLine: false,
//
title: Text('文本内容'),
// 文本和选择器的位置
controlAffinity: ListTileControlAffinity.leading,
// 子标题
subtitle: Text('勾选下列选项'),
// 左侧小图标
secondary: Icon(Icons.archive),
activeColor: Colors.red,
)
],
);
}
}
3.Chip
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
// 当前Index
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Wrap(
spacing: 8.0,
runSpacing: 8.0
),
Chip(
label: Text('Flutter')
),
Chip(
label: Text('React'),
backgroundColor: Colors.orange,
),
Chip(
label: Text('Vue'),
// 头部
avatar: CircleAvatar(
backgroundColor: Colors.green,
child: Text('1')
),
),
Chip(
label: Text('JQuery'),
// 头部
avatar: CircleAvatar(
backgroundImage: NetworkImage('https://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png'),
),
),
Chip(
label: Text('删除'),
// 删除
onDeleted: (){},
deleteIcon: Icon(Icons.delete),
deleteIconColor: Colors.redAccent,
deleteButtonTooltipMessage: "删除这个标签",
),
Divider(
color: Colors.grey
),
// 可交互
ActionChip(
label: Text('IOS'),
onPressed: (){
},
),
// 过滤
FilterChip(
label: Text('IOS'),
// 当前选中
selected: true,
onSelected: (value){
},
),
// 选中后 颜色改变
ChoiceChip(
label: Text('IOS'),
// 当前选中
selected: true,
selectedColor: Colors.black,
onSelected: (value){
},
)
],
);
}
}
4.Dialog
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
// 当前Index
void showDialogs(BuildContext context){
showDialog(
context: context,
builder: (_) => AboutDialog(
applicationName: 'IOS',
applicationIcon: Icon(Icons.apps),
applicationVersion: 'V3.1.2',
children: <Widget>[
Text('data')
],
)
);
}
void showSimpleDialog(BuildContext context){
showDialog(
context: context,
// 构造器
builder: (BuildContext context) => new SimpleDialog(
title: Text('选择'),
children: <Widget>[
SimpleDialogOption(
child: Text('选项1'),
onPressed: (){
}
),
SimpleDialogOption(
child: Text('选项1'),
onPressed: (){
}
)
],
),
);
}
void showAlter(BuildContext context){
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('标题'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223'),
Text('1223')
],
)
),
actions: <Widget>[
FlatButton(
onPressed: (){
Navigator.of(context).pop();
},
child: Text('取消'))
],
)
);
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Dialog(
child: Container(
height: 200.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('这是一个Dialog'),
RaisedButton(
child: Text('取消'),
onPressed: (){
Navigator.of(context).pop();
}
)
]
)
)
),
RaisedButton(
child: Text('打开AboutDialog'),
onPressed: (){
// showSimpleDialog(context);
showAlter(context);
// showDialogs(context)
}
)
],
);
}
}
5.Expanded填充组件
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RaisedButton(
color: Colors.orange,
child: Text('橘红色'),
onPressed: (){}
),
// 填充剩余可占用的空间
Flexible(
flex: 1,
child: RaisedButton(
onPressed: (){},
color: Colors.green,
child: Text('绿色按钮'),
),
),
// 填充剩余的所有空间
Expanded(
flex: 1,
child: RaisedButton(
onPressed: (){},
color: Colors.green,
child: Text('绿色按钮'),
),
),
RaisedButton(
color: Colors.orange,
child: Text('橘红色'),
onPressed: (){}
)
],
);
}
}
6.GridTile,GridPaper
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: 400.0,
color: Colors.blue,
child: GridView.count(
// 列的个数
crossAxisCount: 2,
// 垂直空隙
mainAxisSpacing: 10.0,
// 水平空隙
crossAxisSpacing: 4.0,
// 内边距
padding: EdgeInsets.all(4.0),
// 内容
children: <Widget>[
GridTile(
child: Text('child'),
header: Text('header'),
footer: Text('footer'),
),
Image.network('https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2488674699,968179528&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=c1366cfecb0f392b2735ffb82aface2f'),
GridTile(
child: Text('child'),
header: GridTileBar(
title: Text('header',style: TextStyle(color: Colors.red)),
// 前置图标
leading: Icon(Icons.ac_unit),
),
footer: Text('footer'),
),
Image.network('https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2488674699,968179528&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=c1366cfecb0f392b2735ffb82aface2f'),
// 添加网格效果
GridPaper(
child: Text('child'),
color: Colors.red,
),
Image.network('https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2488674699,968179528&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=c1366cfecb0f392b2735ffb82aface2f'),
],
)
)
],
);
}
}
7.GridView网格组件
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
// return Column(
// children: <Widget>[
// _buildGridExtent()
// ],
// );
return Center(
child: _buildGridSliver(),
);
}
Widget _buildGridExtent(){
return GridView.extent(
// 横轴的最大长度
maxCrossAxisExtent: 180.0,
// 横轴的最大列数
// 内边距
padding: EdgeInsets.all(4.0),
// 垂直方向的间距
mainAxisSpacing: 4.0,
// 水平方向的间距
crossAxisSpacing: 4.0,
children: _buildGridTitleList(30),
);
}
Widget _buildGridCount(){
return GridView.count(
// 横轴的最大列数
crossAxisCount: 3,
// 横轴的最大列数
// 内边距
padding: EdgeInsets.all(4.0),
// 垂直方向的间距
mainAxisSpacing: 4.0,
// 水平方向的间距
crossAxisSpacing: 4.0,
children: _buildGridTitleList(30),
);
}
// 懒加载的Grid(只加载可见部分)
Widget _buildGridSliver(){
return CustomScrollView(
primary: false,
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(20.0),
sliver: SliverGrid.count(
crossAxisCount: 2,
crossAxisSpacing: 10.0,
children: _buildGridTitleList(30),
),
)
],
);
}
// 自定义Grid
Widget _bulidGridCustoms(){
return GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0
),
childrenDelegate: SliverChildBuilderDelegate(
(Content,index){
return Image.asset('assets/1.png');
},
childCount: 30,
)
);
}
List<Container> _buildGridTitleList(int count){
return List.generate(count, (int index) => Container(
child: Image.asset('assets/1.png'),
));
}
}
8.Icon
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// 不可点击
Icon(
Icons.apps,
color: Colors.red,
size: 30.0,
),
ImageIcon(
// 可以下载阿里图标库的png图片
AssetImage('assets/1.png'),
color: Colors.blue,
),
// 可点击的Icons
IconButton(
icon: Icon(Icons.home),
onPressed: (){}
),
// Icon 内部实现
Icon(
IconData(
0xe8ad,
fontFamily: 'MaterialIcons'
),
color: Colors.blue
),
/**
* 自定义字体 pubspec.yaml 中引入字体库
* # fonts:
# - family: Schyler
# fonts:
*
* 然后就可以使用字体图标了
* Icon(
IconData(
0xe8ad, 复制code码就可以了
fontFamily: 'MaterialIcons' 字体文件
),
color: Colors.blue
),
*/
],
);
}
}
9.IconTheme
用于统一图标颜色
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
IconTheme(
data: IconThemeData(
// 统一图标颜色
color:Colors.green,
opacity: 1.0
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.favorite_border,
size: 40,
),
Icon(
Icons.featured_play_list,
size: 38
)
],
)
)
],
);
}
}
10.AssetImage
可以自动根据分变率区分2.0x 3.0x 等
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
/**
* 根据分辨率适配图片
* 2.0x
* 3.0x
*
*
* */
SizedBox(
width: 200.0,
height: 200.0,
child: CircleAvatar(
backgroundImage: AssetImage('assets/1.png')
)
),
Container(
child: Image(
width: 300.0,
height: 300.0,
image: AssetImage('assets/1.png')
)
),
// 可缩放的图片组件
Image(
image: ExactAssetImage(
'assets/1.png',
scale: 1.0 // 缩放 值越大 图片越小
),
)
],
);
}
11.DecorationImage
image_picker: ^0.4.10
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
child: Center(
child: Text(
'装饰图片',
style: TextStyle(color: Colors.white)
),
),
height: 200.0,
width: 200.0,
// 装饰器
decoration: BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage(
'assets/1.png',
),
fit: BoxFit.contain,
alignment: Alignment.bottomCenter
)
),
margin: EdgeInsets.only(
top: 20.0
),
)
],
);
}
}
11.Image_fileImage
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
// 打开本地图片 需要导入库 image_picker: ^0.4.10
File _image;
// 异步获取本地文件
getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Center(
child: _image == null ? Text('你还没选择任何图片') : Image.file(_image,scale:0.5, fit: BoxFit.cover)
),
FlatButton(
onPressed: getImage,
child: Text('点击选择图片')
)
],
);
}
}
