Flutter基础-057-Chip

360 阅读1分钟
构造方法
const Chip({
    Key key,
    this.avatar,// 左侧的widget
    @required this.label,// 显示的内容
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon,// 右侧的widget
    this.onDeleted,// 右侧的widget的点击回调方法
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.shape,
    this.clipBehavior = Clip.none,
    this.backgroundColor,// 标签的背景色
    this.padding,
    this.materialTapTargetSize,
    this.elevation,// 阴影大小
    this.shadowColor,// 阴影颜色
  })
示例

image.png

代码
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Chip(
              label: Text("I am a Chip"),
              avatar: Icon(Icons.add_alarm),
              deleteIcon: Icon(Icons.delete),
              deleteButtonTooltipMessage: "delete",
              deleteIconColor: Colors.red[200],
              onDeleted: (){
                print("delete");
              },
              backgroundColor: Colors.orange[100],
              padding: EdgeInsets.symmetric(horizontal: 15),
              elevation: 10,
              shadowColor: Colors.orange,
            ),
          ],
        ),
      ),
    );
  }
}