实现代码:
import 'package:flutter/material.dart';
class ChipDemo extends StatefulWidget {
@override
_ChipDemoState createState() => _ChipDemoState();
}
class _ChipDemoState extends State<ChipDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ChipDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(//自动换行
spacing: 8.0, //一行中两个chip的间距,当不设置时,自动调整间隔
runSpacing: 8.0, //两行之间的间距
children: <Widget>[
Chip(
label: Text('Life')
),
Chip(
label: Text('Sunset'),
backgroundColor: Colors.orange,
),
Chip(
label: Text('Wanghao'),
avatar: CircleAvatar(
backgroundColor:Colors.grey,
child:Text('皓'),
),
),
Chip(
label: Text('Wanghao'),
avatar: CircleAvatar(
backgroundImage:NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
),
),
],
),
],
),
),
);
}
}
效果如下:
chip1.png
Divider分割线
Divider(
color: Colors.grey,
height: 32.0,
// indent: 32.0,//左缩进
),
带删除的chip
List<String> _tags = ['Apple', 'Banana', 'Lemon'];
Wrap(
spacing: 8.0,
children: _tags.map(
(tag) {
return Chip(
label: Text(tag),
onDeleted: () {
setState(() {
_tags.remove(tag);
});
},
);
},
).toList(),
),
带动作的ActionChip
List<String> _tags = ['Apple', 'Banana', 'Lemon'];
String _action = 'Nothing';
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(),
),
过滤碎片FilterChip
List<String> _selected = [];
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(),
),
单选ChoiceChip
String _choice = 'Lemon';
Container(
width: double.infinity,
child: Text('ChoiceChip ${_selected.toString()}'),
),
Wrap(
spacing: 8.0,
children: _tags.map(
(tag) {
return ChoiceChip(
label: Text(tag),
selectedColor: Colors.black,
selected: _choice == tag,
onSelected: (value) {
setState(() {
_choice = tag;
});
},
);
},
).toList(),
),
网友评论