- wrap换行显示
- divider分割线
- actionChip 动作碎片
- FilterChip 过滤碎片
- ChoiceChip 选择碎片
import 'package:flutter/material.dart';
class ChipDemo extends StatefulWidget {
@override
_ChipDemoState createState() => _ChipDemoState();
}
class _ChipDemoState extends State<ChipDemo> {
List<String> _tags = [
'Apple',
'Banana',
'Lemon',
];
String _action = 'Nothings';
// 这个需要和FloatButton 配合使用
List<String> _selected = [];
String _choice = 'Lemon';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用row 控件超出部分会报黄色 RITHT OVERFLOWED BY 325 PIxELS
Wrap(
// 列之间的间隔
spacing: 8.0,
// 行之间的间隔
runSpacing: 8.0,
children: <Widget>[
Chip(
label: Text('Life'),
),
Chip(
label: Text('Sunset'),
backgroundColor: Colors.orange,
),
Chip(
label: Text('liuan'),
avatar: CircleAvatar(
backgroundColor: Colors.green,
child: Text('安'),
),
),
Chip(
label: Text('liuan'),
avatar: CircleAvatar(
backgroundImage: NetworkImage(
'https://avatar.csdn.net/9/3/9/1_mp624183768.jpg?1547430707'),
),
),
Chip(
label: Text('City'),
// 删除按钮
onDeleted: () {},
deleteIcon: Icon(Icons.delete),
deleteIconColor: Colors.redAccent,
// 长按删除按钮会出来此提示
deleteButtonTooltipMessage: "REmove this tag",
),
Divider(
color: Colors.grey,
height: 32.0,
//左边缩进
// indent: 32.0,
),
// 列表chip
Wrap(
spacing: 8.0,
children: _tags.map((tag) {
return Chip(
label: Text(tag),
onDeleted: () {
setState(() {
_tags.remove(tag);
});
},
);
}).toList()),
// 动作碎片
Divider(
color: Colors.grey,
height: 32.0,
//左边缩进
// indent: 32.0,
),
// 列表chip
Container(
width: double.infinity,
child: Text('ActionChip:$_action'),
),
Wrap(
spacing: 8.0,
children: _tags.map((tag) {
return ActionChip(
label: Text(tag),
onPressed: () {
setState(() {
_action = tag;
});
},
);
}).toList(),
),
// 过滤碎片
Divider(
color: Colors.grey,
height: 32.0,
//左边缩进
// indent: 32.0,
),
// 列表chip
Container(
width: double.infinity,
child: Text('FilterChip:$_selected.toString()'),
),
Wrap(
spacing: 8.0,
children: _tags.map((tag) {
return FilterChip(
label: Text(tag),
selected: _selected.contains(tag),
onSelected: (value) {
setState(() {
if (_selected.contains(tag)) {
_selected.remove(tag);
} else {
_selected.add(tag);
}
});
},
);
}).toList(),
),
// 选择碎片
Divider(
color: Colors.grey,
height: 32.0,
//左边缩进
// indent: 32.0,
),
// 列表chip
Container(
width: double.infinity,
child: Text('ChoiceChip:$_choice'),
),
Wrap(
spacing: 8.0,
children: _tags.map((tag) {
return ChoiceChip(
label: Text(tag),
selected: _choice==tag,
selectedColor: Colors.black,
onSelected: (value) {
setState(() {
_choice=tag;
});
},
);
}).toList(),
),
],
)
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.restore),
onPressed: () {
setState(() {
_tags = [
'Apple',
'Banana',
'Lemon',
];
_selected = [];
_choice='Lemon';
});
},
),
);
}
}