Flutter Chip


简介

chip是表示属性,文本,实体或动作的元素

  • 需要在Material wedige 中。

基本用法

  • 需要Material widget.
  • 这个label和clipBehavior参数不能为空

实例演示

import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  String dec = '点击回收';
  int count = 0;
  _modifty() {
    setState(() {
      dec = 'delete success: $count';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          child: Chip(
            padding: EdgeInsets.only(
              right: 100.0,
            ),
            //标签前面的小widget
            avatar: CircleAvatar(
              backgroundColor: Colors.red.shade200,
              child: Text(
                'A',
                style: TextStyle(color: Colors.white),
              ),
            ),
            label: Text(
              'pai mai  ',
              style: TextStyle(color: Colors.white, fontSize: 18.0),
            ),
            backgroundColor: Colors.red.shade100,
            labelPadding: EdgeInsets.all(6.0),
          ),
        ),
        Container(
          height: 100.0,
          child: Chip(
            //头像
            avatar: CircleAvatar(
              child: Icon(
                Icons.account_circle,
                color: Colors.red.shade200,
              ),
              backgroundColor: Colors.white,
            ),
            //设置widget背景颜色
            backgroundColor: Colors.red.shade100,
            //剪辑窗口widget内容
            // antiAlias:剪辑具有抗锯齿功能,它比antiAliasWithSaveLayer快得多,但比hardEdge慢。
            //antiAliasWithSaveLayer:立即剪辑具有抗锯齿,并且可以分配屏幕外缓冲区,后续涂料都在该缓冲区完成,然后再进行修剪和合成
            clipBehavior: Clip.antiAlias,

            //设置padding值
            labelPadding: EdgeInsets.all(8.0),
            label: Text(dec),
            //设置onDeleted时候显示的图标
            deleteIcon: Icon(
              Icons.delete,
              color: Colors.white,
              size: 20.0,
            ),
            onDeleted: () {
              count++;
              _modifty();
            },
            deleteButtonTooltipMessage: '删除',
            deleteIconColor: Colors.blueGrey.shade100,
            //将最小点击目标大小扩展到48*48px
            materialTapTargetSize: MaterialTapTargetSize.padded,
            padding: EdgeInsets.all(2.0),
            //修改字体格式
            labelStyle: TextStyle(fontWeight: FontWeight.bold),
            // shape: _MyBorder(),
          ),
        )
      ],
    );
  }
}