Flutter基礎-057-Chip

構造方法

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,// 陰影顏色
  })
複製程式碼

示例

程式碼

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,
            ),
          ],
        ),
      ),
    );
  }
}
複製程式碼