import 'package:flutter/material.dart';
class _ChipDemoState extends State<ChipDemo> {
List<String> _tags = ['Apple','Orange','Bannar','Peach','Mango'];
String _selectedFruit = 'Notiong';
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ChipDemo'),
),
body: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0, //间隔
runSpacing: 20.0,//两行之间的间距
children: <Widget>[
Chip(
label: Text(
'二次元',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.green,
),
Chip(
label: Text(
'热血',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.blue,
avatar: CircleAvatar(
child: Icon(Icons.directions_bike),
),
),
Chip(
label: Text(
'青春',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.blue,
avatar: CircleAvatar(
backgroundColor: Colors.pink,
child: Text('青'),
),
),
Chip(
label: Text(
'偶像练习生',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.orange,
avatar: CircleAvatar(
backgroundColor: Colors.pinkAccent,
child: Text('偶像练习生'.substring(0, 1)),
),
),
Chip(//可删除
onDeleted: (){
},
label: Text(
'70后',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.purple,
avatar: CircleAvatar(
backgroundColor: Colors.pink,
child: Text('70'),
),
),
Chip(
label: Text(
'80后',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.blue,
avatar: CircleAvatar(
backgroundImage: NetworkImage(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564121683900&di=9d4dd51badeebff12f9cb841e7632ce7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F31%2F20160831064159_C8KkV.jpeg'),
backgroundColor: Colors.pink,
child: Text('80'),
),
),
Divider(
color: Colors.grey,
indent: 10.0,//缩进
height: 32,//距离相邻控件之间的距离
),
Wrap(
spacing: 8.0,
runSpacing: 8.0,
runAlignment: WrapAlignment.center,
children: _tags.map((tag){
return Chip(
label: Text(tag),
onDeleted: (){
_tags.remove(tag);
setState(() {
});
},
);
}).toList(),
),
Container(
width: double.infinity,
child: Text('您选择的水果是 ： $_selectedFruit'),
),
Divider(
height: 20,
),
Wrap(
spacing: 8.0,
runSpacing: 8.0,
runAlignment: WrapAlignment.center,
children: _tags.map((tag){
return ActionChip(
label: Text(tag),
onPressed: (){
_selectedFruit = tag;
setState(() {
});
},
);
}).toList(),
)
],
)
],
),
),
);
}
}
效果图：
chip.jpg
