Flutter Wrap & Chip

最新推荐文章于 2024-09-01 13:30:00 发布
最新推荐文章于 2024-09-01 13:30:00 发布
阅读量916 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23756803/article/details/94593374
版权
本文介绍了如何使用Flutter的Wrap和Chip组件轻松创建具有自动换行功能的历史搜索列表。通过设置spacing和runSpacing调整间距，利用Chip展示搜索项，并添加删除功能。通过ListView配合删除事件实现搜索历史的编辑，完整代码已上传至GitHub。
摘要由CSDN通过智能技术生成

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

640?wx_fmt=png

那如果在Android上面写的话，

一般来讲是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。

当然这个自动换行的LayoutManager 还得自己定义，去算坐标。

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

先来说一下Wrap。

Wrap

最低0.47元/天 解锁文章
Flutter 笔记
关注
Flutter Chip详解
yechaoa
05-21 6783
文章目录ChipActionChipChoiceChip示例代码： 效果： Chip 标签 使用场景：事物的属性或标签，历史搜索记录等。 const Chip({ Key key, this.avatar,//标签左侧的Widget @required this.label, this.labelStyle, this.labelPadding, ...
flutter wrap和chip
weixin_44911775的博客
11-08 222
chip参考 chip参考 wrap参考 wrap参考 chip参考 chip参考
flutter中的Wrap
KQe397773106的博客
08-11 374
Wrap可以通过使用不同的direction来替换Row或者Column，我们在组件可能会超出范围的时候，就可以考虑使用Wrap了。本文的例子：https://github.com/ddean2009/learn-flutter.git。
flutter Wrap+Chip
androidhyf的博客
02-21 105
flutter Wrap+Chip
【自学Flutter】10 Wrap布局和 Chip标签组件的使用
技术宅-Nopi的博客
06-27 894
10 Wrap布局和Chip标签组件的使用 1.源代码 import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState...
Flutter 中 Wrap 的使用详解（含对比图） _ Flutter Widgets
2301_79099460的博客
05-06 1057
/// 获取子项目 Widget getItem(int index) { var item = listData[index % listTotal]; return Chip( // 圆形头像 avatar: CircleAvatar( backgroundImage: NetworkImage(item.url), ), // 文字标签 label: Text(item.title), // 删除按钮，添加后回自动设置 Icon onDeleted: () {}, ); }Wrap( // 子项间距
flutter GridView和Wrap
qq_36865892的博客
09-20 1812
GridView有2种gridDelegate； [记录小嵌套冲突的问题，SingleChildScrollView，ListView,GrilView嵌套问题解决，子布局添加属性] physics: NeverScrollableScrollPhysics(), shrinkWrap: true, SliverGridDelegateWithMaxCrossAxisExtent...
Flutter Chip 标签
10-21
Flutter Chip 标签
（十三）Flutter chip控件 warp divider
丿灬安之若死
01-21 1330
wrap换行显示 divider分割线 actionChip 动作碎片 FilterChip 过滤碎片 ChoiceChip 选择碎片 import 'package:flutter/material.dart'; class ChipDemo extends StatefulWidget { @override _ChipDemoState createState() =&g...
Flutter Chip的使用
Dream It Possible
08-29 1504
Chip 属性介绍avatar左侧图标组件label@required 文本 WidgetlabelStyle文本样式，TextStyle文本外边距 PaddingdeleteIcon右侧删除按钮 WidgetonDeleted删除按钮点击事件删除按钮颜色长按删除按钮的提示语shape形状，ShapeBorder裁剪方式，默认为 Clip.nonefocusNode焦点控制，Flutter 组件之 FocusNode 详解autofocus。...
Flutter 初识：Chip控件
最新发布
yang_6799的博客
09-01 729
InputChip 是 Flutter 中的一个小部件，用于显示可交互的紧凑信息。ActionChip 是 Flutter 中的一种 Chip，用于表示一个可以触发操作的选项。ChoiceChip 是 Flutter 中的一种 Chip，用于从一组选项中进行单选。Chip 是 Flutter 中用于显示紧凑信息的小部件，通常包含一个标签和可选的图标或删除按钮，并且可以用作交互式元素。FilterChip 是 Flutter 中的一种 Chip，用于表示一个可以选择或取消选择的选项，通常用于筛选内容。
【Flutter】入门16-chip
夜雨Gecer的博客
02-06 369
List<String> _tags = [ 'Apple', 'Banana', 'Lemon', ]; List<String> _tags01 = [ 'item01', 'item02', 'item03', ]; String _action = 'Nothing'; List<S...
flutter 单选按钮_【Flutter】Chip标签组件
weixin_42434656的博客
12-27 962
说明Chip是标签组件，常用的有：RawChip：是Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用其他的标签控件。InputChip：以紧凑的形式表示一条复杂的信息，例如实体(人，地方或事物)或对话文本。InputChip 本质上也是RawChip，用法和RawChip一样ChoiceChip：允许从一组选项中进行单个选择，创建一个类似...
Flutter 中的 ActionChip 小部件：全面指南
smileKH的博客
05-14 369
你可以通过修改ActionChip// 处理点击事件},ActionChip是一个在需要突出显示操作时非常有用的组件。它在设计上旨在引导用户进行某些操作，因此在使用时应谨慎，避免在界面上放置过多ActionChip，以免造成用户的困扰。记住，合理使用ActionChip可以提升应用的交互性和用户体验。通过上述示例，你应该能够理解如何在Flutter应用中使用ActionChip，并且可以根据你的需求进行自定义。
Flutter 中的 Chip 小部件：全面指南
smileKH的博客
05-13 514
ChipChip是 Flutter 中一个多功能的小部件，它提供了一种简洁的方式来展示和操作小块信息。无论是用于标签、过滤条件还是用户输入，Chip都能以一种直观和一致的方式呈现信息。掌握Chip的使用，可以帮助你创建出既美观又实用的用户界面。
flutter wrap
07-09
在 Flutter 库中，`Wrap` 是一个 Widget 类，它通常用于创建网格布局（grid layout），使得子 Widget 自动换行并在一行内均匀分布。当你有多个 Widget 需要在一行内显示，并且当容器不够大时会自动滚动到下一行时，可以使用 `Wrap`。 使用 `Wrap` 的基本语法是这样的： ```dart Wrap( children: <Widget>[ child1, child2, // 更多的子 Widget... ], // 可选属性，例如：主轴方向（mainAxisAlignment）、交叉轴方向（crossAxisAlignment）、最大列数（wrapCount）等 ) ``` 这里的 `children` 属性是一个 List 子 Widget，它们会在 `Wrap` 内部按照指定的规则排列。你可以通过设置 `mainAxisAlignment` 和 `crossAxisAlignment` 控制主轴（水平方向）和交叉轴（垂直方向）的对齐方式，如 `Start`、`End`、`Center` 等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值