Wrap组件实践 2023-07-25 周二

简介

标签按钮还是经常遇到的。比如像这样的

企业微信截图_b85119a3-0a2a-442c-9b04-bee26e77eec7.png

这种场景，Row和Column都力不从心，用Wrap是最合适的。

属性定义

• wrap默认是横向的，大多数情况都是如此，不需要改。超出限制，就会换行；而不是像Row一样出错。所以，可以把wrap看做会换行的Row

• 不一样的是wrap模式是紧缩型的，不像Row一样默认是撑开的。所以默认情况，子组件会紧挨着。

• spacing一般是指子组件之间的横向距离；

• runSpacing一般是指子组件之间的纵向距离；

• 子组件的按钮用Container来模拟；

• 因为有文字和图标，所以需要一个Row；这里的要将Row的默认的撑开型修改为紧缩型
  mainAxisSize: MainAxisSize.min, 不然的话，每行就只有一个子组件。

企业微信截图_66ad3e94-436e-4ac6-bc41-0d9ba991f7b9.png

• 删除图标不是一直显示的，这种可以用三目方法，用占位的SizedBox替代；不过，更好的方式是外面套一个Visibility组件

例子代码

不能直接copy使用，仅能做参考

  /// 关键字标签
  Widget _buildTag(List itemList) {
    return Visibility(
      visible: itemList.isNotEmpty,
      child: Wrap(
        spacing: 10.w,
        runSpacing: 10.h,
        children: itemList
            .map((item) => Container(
                  height: 25.h,
                  padding: EdgeInsets.symmetric(horizontal: 10.w),
                  decoration: BoxDecoration(
                      color: PandaColorConfig().backgroundF2F2F2,
                      borderRadius: BorderRadius.circular(12.5.h)),
                  child: InkWell(
                    onTap: () {
                      if (logic.removeButton) {
                        var index = itemList.indexOf(item);
                        logic.deleteSearch(index);
                      } else {
                        logic.btnSearch('$item');
                      }
                    },
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                          constraints: BoxConstraints(
                            maxWidth: 280.w,
                          ),
                          child: Text(
                            '$item',
                            style: TextStyle(
                              color: PandaColorConfig().col666666,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w400,
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Visibility(
                          visible: logic.removeButton,
                          child: Image.asset(
                            R.assetsImgTagDelete,
                            width: 12.w,
                            height: 12.w,
                          ),
                        ),
                      ],
                    ),
                  ),
                ))
            .toList(),
      ),
    );
  }

关于标签的插件

• 一般情况下，标签不需要自己写，可以直接使用插件：
  flutter_tags_x

• 一开始我们也是用上面那个插件实现历史关键字标签，也是可以用的。只是后来UI提出的需求通过设置插件属性怎么也达不到效果，所以才有后来的自己用wrap模拟一个。