Flutter Wrap & Chip

在写业务的时候，不免有***搜索***功能，通常搜索功能的页面以下：

那若是在Android上面写的话，

通常来说是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。

固然这个自动换行的LayoutManager 还得本身定义，去算坐标。

那 Flutter 提供给咱们很方便的控件 Wrap + Chip，用这两个就能轻松实现上诉效果。

先来讲一下Wrap。

Wrap

看名字咱们也能看出来，它就是一个包裹住子布局的 Widget，而且能够自动换行。

先看一下构造函数，来肯定一下须要传入什么参数：

Wrap({
  Key key,
  this.direction = Axis.horizontal, // 子布局排列方向
  this.alignment = WrapAlignment.start, // 子布局对齐方向
  this.spacing = 0.0, // 间隔
  this.runAlignment = WrapAlignment.start, // run 能够理解为新的一行，新的一行的对齐方向
  this.runSpacing = 0.0, // 两行的间距
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
}) : super(key: key, children: children);
复制代码

最基本的咱们只须要传入一个children便可，可是咱们想要好的效果，通常都会传入 spacing 和 runSpacing。

Chip

下面看一下 Chip，Chip能够理解为碎片的意思，仍是先来看一下构造函数：

Chip({
    Key key,
    this.avatar,//左侧Widget，通常为小图标
    @required this.label,//标签
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon//删除图标
    this.onDeleted//删除回调，为空时不显示删除图标
    this.deleteIconColor//删除图标的颜色
    this.deleteButtonTooltipMessage//删除按钮的tip文字
    this.shape//形状
    this.clipBehavior = Clip.none,
    this.backgroundColor//背景颜色
    this.padding, // padding
    this.materialTapTargetSize//删除图标material点击区域大小
  })
复制代码

能够看到这里东西仍是很多的，最基本的要传入一个label。

label 通常就为咱们的 text，先来看一下只定义一个 label 的效果：

下面再加入 avatar：

再来加入 delete：

这里注意，必定要设置上 onDeleted 参数，不然不显示delete控件。

编写 '历史搜索'

前面都是在 children 里添加widget 来达到目的，很差作删除工做。

如今咱们来使用 ListView，并添加删除事件。

代码以下：

import 'package:flutter/material.dart';

class WrapPage extends StatefulWidget {
  @override
  _WrapPageState createState() => _WrapPageState();
}

class _WrapPageState extends State<WrapPage> {

  // 生成历史数据
  final List<String> _list = List<String>.generate(10, (i) => 'chip$i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('WrapPage'),
        ),
        body: Wrap(
            spacing: 10,
            runSpacing: 5,
            children: _list.map<Widget>((s) {
              return Chip(
                label: Text('$s'),
                avatar: Icon(Icons.person),
                deleteIcon: Icon(
                  Icons.close,
                  color: Colors.red,
                ),
                onDeleted: () {
                  setState(() {
                    _list.remove(s); // 删除事件
                  });
                },
              );
            }).toList()
        ));
  }
}
复制代码

效果以下：

总结

Flutter 提供给咱们不少好用的 widget， 咱们只须要组合起来就能够达到咱们的目的。

完整代码已经传至GitHub：github.com/wanglu1209/…