Flutter 标签类控件大全Chip

移动开发 作者: 2024-08-25 10:55:01
老孟导读:Flutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆。 RawChip Material风格标签控件,此
  • Chip
  • InputChip
  • ChoiceChip
  • FilterChip
  • ActionChip
RawChip(
  label: Text('老孟'),)
RawChip(
  label: Text('老孟'),isEnabled: false,)
RawChip(
  avatar: CircleAvatar(
    child: Text('孟'),),label: Text('老孟'),)
RawChip(
  label: Text('老孟'),labelStyle: TextStyle(color: Colors.blue),labelPadding: EdgeInsets.symmetric(horizontal: 10),)
RawChip(
  label: Text('老孟'),onDeleted: (){
    print('onDeleted');
  },deleteIcon: Icon(Icons.delete),deleteIconColor: Colors.red,deleteButtonTooltipMessage: '删除',)
RawChip(
  label: Text('老孟'),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),backgroundColor: Colors.blue,padding: EdgeInsets.symmetric(vertical: 10),)
RawChip(
  label: Text('老孟'),elevation: 8,shadowColor: Colors.blue,)
bool _selected = false;
RawChip(
  label: Text('老孟'),selected: _selected,onSelected: (v){
    setState(() {
      _selected = v;
    });
  },selectedColor: Colors.blue,selectedShadowColor: Colors.red,)
RawChip(
  label: Text('老孟'),selected: true,showCheckmark: true,checkmarkColor: Colors.red,)
RawChip(
  label: Text('老孟'),onPressed: (){
    print('onPressed');
  },pressElevation: 12,)
@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,label: label,labelStyle: labelStyle,labelPadding: labelPadding,deleteIcon: deleteIcon,onDeleted: onDeleted,deleteIconColor: deleteIconColor,deleteButtonTooltipMessage: deleteButtonTooltipMessage,tapEnabled: false,shape: shape,clipBehavior: clipBehavior,focusNode: focusNode,autofocus: autofocus,backgroundColor: backgroundColor,padding: padding,materialTapTargetSize: materialTapTargetSize,elevation: elevation,shadowColor: shadowColor,isEnabled: true,);
}
@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,onSelected: onSelected,onPressed: onPressed,pressElevation: pressElevation,selected: selected,tapEnabled: true,disabledColor: disabledColor,selectedColor: selectedColor,tooltip: tooltip,selectedShadowColor: selectedShadowColor,showCheckmark: showCheckmark,checkmarkColor: checkmarkColor,isEnabled: isEnabled && (onSelected != null || onDeleted != null || onPressed != null),avatarBorder: avatarBorder,);
}
int _selectIndex = 0;
Wrap(
  spacing: 15,children: List.generate(10,(index) {
    return ChoiceChip(
      label: Text('老孟 $index'),selected: _selectIndex == index,onSelected: (v) {
        setState(() {
          _selectIndex = index;
        });
      },);
  }).toList(),)
List<String> _filters = [];

Column(
  children: <Widget>[
    Wrap(
      spacing: 15,(index) {
        return FilterChip(
          label: Text('老孟 $index'),selected: _filters.contains('$index'),onSelected: (v) {
            setState(() {
              if(v){
                _filters.add('$index');
              }else{
                _filters.removeWhere((f){
                  return f == '$index';
                });
              }
            });
          },);
      }).toList(),Text('选中:${_filters.join(',')}'),],)
ActionChip(
    avatar: CircleAvatar(
      backgroundColor: Colors.grey.shade800,child: Text('孟'),onPressed: () {
      print("onPressed");
    })
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68356.html