Flutter Wrap & Chip

本文介绍了如何使用Flutter的Wrap和Chip组件轻松创建具有自动换行功能的历史搜索列表。通过设置spacing和runSpacing调整间距,利用Chip展示搜索项,并添加删除功能。通过ListView配合删除事件实现搜索历史的编辑,完整代码已上传至GitHub。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在写业务的时候,难免有搜索功能,一般搜索功能的页面如下:

640?wx_fmt=png

那如果在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 的效果:

640?wx_fmt=png

下面再加入 avatar:

640?wx_fmt=png

再来加入 delete:

640?wx_fmt=png

这里注意,一定要设置上 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()	
        ));	
  }	
}

效果如下:

640?wx_fmt=gif

总结

Flutter 提供给我们很多好用的 widget, 我们只需要组合起来就可以达到我们的目的。


完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

640?wx_fmt=jpeg


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值