马俊展 發表於 2022-10-20 15:56:50

Flutter Widgets之标签类控件Chip详解

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>概述：</li><li>RawChip</li><li>Chip</li><li>InputChip</li><li>ChoiceChip</li><li>FilterChip</li><li>总结：</li></ul></div><p class="maodian"></p><h2>概述：</h2>
<p>Flutter 标签类控件大全ChipFlutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将其放在放在一起学习，方便记忆。</p>
<p class="maodian"></p><h2>RawChip</h2>
<p>Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用如下控件：</p>
<ul><li>Chip</li><li>InputChip</li><li>ChoiceChip</li><li>FilterChip</li><li>ActionChip</li></ul>
<p>如果你想自定义标签类控件，通常使用此控件。</p>
<p>RawChip可以通过设置<code>onSelected</code>被选中，设置<code>onDeleted</code>被删除，也可以通过设置<code>onPressed</code>而像一个按钮，它有一个<code>label</code>属性，有一个前置（<code>avatar</code>）和后置图标（<code>deleteIcon</code>）。</p>
<div class="jb51code"><pre class="brush:java;"> RawChip(label: Text('RawChip')),
</pre></div>
<p>效果：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252045.jpg" /></p>
<p>设置左侧控件，一般是图标：</p>
<div class="jb51code"><pre class="brush:java;"> RawChip(
            avatar: CircleAvatar(child: Text('R'),),
            label: Text('RawChip'),
            isEnabled: false,//禁止点选状态
          ),
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252046.jpg" /></p>
<p>设置label的样式和内边距：</p>
<div class="jb51code"><pre class="brush:java;"> RawChip(
            avatar: CircleAvatar(child: Text('R'),),
            label: Text('RawChip'),
            // isEnabled: false,//禁止点选状态
            labelPadding: EdgeInsets.symmetric(horizontal: 20),
            padding: EdgeInsets.only(left: 10,right: 10,top: 5),
          ),
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252047.jpg" /></p>
<p>设置删除相关属性：</p>
<div class="jb51code"><pre class="brush:java;">RawChip(
            label: Text('RawChip'),
            onDeleted: (){
            print('onDeleted');
            },
            deleteIcon: Icon(Icons.delete),
            deleteIconColor: Colors.red,
            deleteButtonTooltipMessage: "删除",
            // isEnabled: false,//禁止点选状态
            labelPadding: EdgeInsets.symmetric(horizontal: 10),
            padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
          ),
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252048.jpg" /></p>
<p>设置形状、背景颜色及内边距,阴影：</p>
<div class="jb51code"><pre class="brush:java;"> RawChip(
            label: Text('RawChip'),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            backgroundColor: Colors.blue,
            padding: EdgeInsets.symmetric(vertical: 10),
            elevation: 8,
            shadowColor: Colors.grey,
          )
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252049.jpg" /></p>
<p>materialTapTargetSize是配置组件点击区域大小的属性，很多组件都有此属性，比如：</p>
<div class="jb51code"><pre class="brush:java;">, only the mini tap target size is increased.
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
</pre></div>
<p>MaterialTapTargetSize有2个值，分别为：</p>
<ul><li>padded：最小点击区域为48*48。</li><li>shrinkWrap：子组件的实际大小。</li></ul>
<p>设置选中状态、颜色：</p>
<div class="jb51code"><pre class="brush:java;"> RawChip(
            label: Text('RawChip'),
               selected: _selected,
            onSelected: (v){
                setState(() {
                  _selected =v;
                });
            },
            selectedColor: Colors.blue,
            selectedShadowColor: Colors.red,
          )
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252050.jpg" /></p>
<p class="maodian"></p><h2>Chip</h2>
<p>Chip是一个简单的标签控件，仅显示信息和<code>删除</code>相关属性，是一个简化版的RawChip，用法和RawChip一样。源代码如下：</p>
<div class="jb51code"><pre class="brush:java;">@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,
);
}
</pre></div>
<p class="maodian"></p><h2>InputChip</h2>
<p>以紧凑的形式表示一条复杂的信息，例如实体（人，地方或事物）或对话文本。</p>
<p>InputChip 本质上也是RawChip，用法和RawChip一样。源代码如下：</p>
<div class="jb51code"><pre class="brush:java;">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,
    onSelected: onSelected,
    onPressed: onPressed,
    pressElevation: pressElevation,
    selected: selected,
    tapEnabled: true,
    disabledColor: disabledColor,
    selectedColor: selectedColor,
    tooltip: tooltip,
    shape: shape,
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    backgroundColor: backgroundColor,
    padding: padding,
    materialTapTargetSize: materialTapTargetSize,
    elevation: elevation,
    shadowColor: shadowColor,
    selectedShadowColor: selectedShadowColor,
    showCheckmark: showCheckmark,
    checkmarkColor: checkmarkColor,
    isEnabled: isEnabled &amp;amp;&amp;amp; (onSelected != null || onDeleted != null || onPressed != null),
    avatarBorder: avatarBorder,
);
}
</pre></div>
<p>基本用法：</p>
<div class="jb51code"><pre class="brush:java;"> InputChip(
    avatar: CircleAvatar(
    radius: 12.0,
    ),
    label: Text(
    'InputChip',
    style: TextStyle(fontSize: 12.0),
    ),
    shadowColor: Colors.grey,
    deleteIcon: Icon(
    Icons.close,
    color: Colors.black54,
    size: 14.0,
    ),
    onDeleted: () {
      print('onDeleted');
    },
    onSelected: (bool selected) {
      setState(() {
          _selected = selected;
      });
    },
    selectedColor: Colors.orange,
    disabledColor: Colors.grey,
    selected: _selected,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    labelStyle: TextStyle(color: Colors.black54),
    ),
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252051.gif" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252052.jpg" /></p>
<p class="maodian"></p><h2>ChoiceChip</h2>
<p>允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上ChoiceChip也是一个RawChip，ChoiceChip本身不具备单选属性。</p>
<div class="jb51code"><pre class="brush:java;">int _selectedIndex = 0;
Wrap(
            spacing: 5,
            children: List.generate(20, (index){
            return ChoiceChip(
                label: Text('测试 $index'),
                selected: _selectedIndex==index,
            onSelected: (v){
                  setState(() {
                  _selectedIndex =index;
                  });
            },
            );
          }).toList(),
          )
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252053.gif" /></p>
<p class="maodian"></p><h2>FilterChip</h2>
<p>FilterChip可以作为过滤标签，本质上也是一个RawChip，用法如下：</p>
<div class="jb51code"><pre class="brush:java;">List&amp;lt;String&amp;gt; _filters = [];
_buildFilterChip(){
    return Column(
      children: [
      Wrap(
          spacing: 15,
          children: List.generate(10, (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(',')}'),
      ],
    );
}
</pre></div>
<p>运行效果：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202210/20221020085252054.gif" /></p>
<p class="maodian"></p><h2>总结：</h2>
<p>本篇主要讲了以下几种chip组件的用法案例：</p>
<ul><li>RawChip：是Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用其他的标签控件。</li><li>InputChip：以紧凑的形式表示一条复杂的信息，例如实体(人，地方或事物)或对话文本。InputChip 本质上也是RawChip，用法和RawChip一样</li><li>ChoiceChip：允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上ChoiceChip也是一个RawChip，ChoiceChip本身不具备单选属性。</li><li>FilterChip：可以作为过滤标签，本质上也是一个RawChip</li><li>ActionChip：显示与主要内容有关的一组动作，本质上也是一个RawChip</li><li>Chip：一个简单的标签控件，仅显示信息和删除相关属性，是一个简化版的RawChip，用法和RawChip一样</li></ul>
<p>以上就是Flutter Widgets之标签类控件Chip详解的详细内容，更多关于Flutter Widgets标签类控件Chip的资料请关注琼殿技术社区其它相关文章！</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>Android&nbsp;Flutter实现兴趣标签选择功能</li><li>Flutter使用 input chip 标签组件示例详解</li><li>Flutter进阶质感设计之标签栏</li><li>Flutter替换字符串中的html标签</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: Flutter Widgets之标签类控件Chip详解