Flutter Wrap & Chip

最新推荐文章于 2024-04-08 00:39:07 发布
VIP文章 最新推荐文章于 2024-04-08 00:39:07 发布
阅读量877 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23756803/article/details/94593374
版权

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

640?wx_fmt=png

那如果在Android上面写的话，

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

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

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

先来说一下Wrap。

Wrap

最低0.47元/天 解锁文章
Flutter 笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter Chip详解
yechaoa
05-21 6696
文章目录ChipActionChipChoiceChip示例代码： 效果： Chip 标签 使用场景：事物的属性或标签，历史搜索记录等。 const Chip({ Key key, this.avatar,//标签左侧的Widget @required this.label, this.labelStyle, this.labelPadding, ...
Flutter Chip 标签
10-21
Flutter Chip 标签
Flutter中的Wrap
Dream It Possible
07-14 6349
我们在flutter中使用能够包含多个child的widget的时候，经常会遇到超出边界范围的情况，尤其是在Column和Row的情况下，那么我们有没有什么好的解决办法呢？答案就是今天我们要讲解的Wrap。Row和Column中可以包含多个子widget，如果子widget超出了Row或者Column的范围会出现什么情况呢？我们以Row的情况举个例子： 上面的例子中，我们在Row中添加了几个YellowBox，YellowBox是一个width=100,height=50的长方形： 运行上面的代码，
Flutter 中 Wrap 的使用详解（含对比图） _ Flutter Widgets，整理几个重要的Android知识
最新发布
2301_79056696的博客
04-08 627
如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。最后针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
flutter组件 ExpansionPanelList,ExpansionPanel,Chip,ActionChip,ChoiceChip,FilterChip,InputChip
litter_lj的博客
08-06 1174
1.ExpansionPanelList const ExpansionPanelList({ Key key, this.children = const <ExpansionPanel>[], //子集 this.expansionCallback, //展开闭合的回调 this.animationDuration = kThemeAnimat...
flutter 有状态组件StatefulWidget、控制子组件高宽组件SiezedBox、标签组件Chip
weixin_43294560的博客
04-14 424
有状态组件: 能够动态改变数据状态 安装插件 Flutter Widget Snippets Awesome Flutter Snippets 快捷键生成有状态和无状态组件: statefulw statelessw 控制子组件高宽组件: 也可以用来设置组件间的间距 SizedBox( height, width, child:组件 )...
Flutter_09_流式布局
m0_49349981的博客
08-21 72
Wrap(解决内容溢出问题) spacing(主轴方向组件的间距) alignment(主轴方向的对齐方式) runSpacing(纵轴方向组件的间距) runAlignment(纵轴方向的对齐方式) Chip（标签） CircleAvatar(圆形头像) import 'package:flutter/material.dart'; void main() { //下一个组件 runApp(MyApp()); } //MaterialApp class MyApp extends S.
flutter 仿微信展开收起两种写法
whs867712232的博客
07-12 1875
第一种是行数判断： 项目需求是超过6行显示展开，超过12行跳到其他页面，所以我这样写，其中图片文字可随意改。 import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'dart:ui'; ///展示全文查看全文行数text class ExpandableText extends StatefulWidget { final String text; final Gestu.
flutter 单选按钮_【Flutter】Chip标签组件
weixin_42434656的博客
12-27 931
说明Chip是标签组件，常用的有：RawChip：是Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用其他的标签控件。InputChip：以紧凑的形式表示一条复杂的信息，例如实体(人，地方或事物)或对话文本。InputChip 本质上也是RawChip，用法和RawChip一样ChoiceChip：允许从一组选项中进行单个选择，创建一个类似...
Flutter 标签类控件大全Chip
老孟Flutter
05-10 3459
老孟导读：Flutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将其放在放在一起学习，方便记忆。 RawChip Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用如下控件： Chip InputChip ChoiceChip FilterChip ActionChip 如果你想自定义标签类控件时通常使用此控件。 RawChip可以通过设置onSelected被选中，设置onDeleted被删除...
flutter 文字的展开以及收起
weixin_40570474的博客
11-17 1189
flutter 文字的展开以及收起
Flutter 中 Wrap 的使用详解（含对比图） _ Flutter Widgets
03-17 1294
之前两篇我们聊了滚动列表ListView和GridView，这篇我们来聊聊Wrap，看字面意思就是「包裹」，与列表型 Widget 区别在于他是可以根据子项 Widget 的大小来实现自动排列的，而且自身不支持滚动。
Flutter wrap组件
01-20
flutter wrap组件 写的搜索记录 import 'dart:core'; import 'package:flutter/material.dart'; // 使用换行 显示搜索记录 class WarpPage extends StatelessWidget { final List tags = [ 肯德基, 小哥哥你的...
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
Flutter wrap组件与自定义组件
01-20
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold...
陈新新 - Flutter & Dart全栈开发.pdf
10-30
Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式
Flutter 流式布局、自动换行（Wrap、Flow）
Dream It Possible
09-06 3861
使用Android原生来实现流式布局还是有点麻烦的，甚至需要自定义view或者使用第三方的库。而在Flutter中，官方为我们提供了流式布局的控件，我们可以很方便的实现流式布局。FlowDelegate是一个抽象类，我们一般会重写paintChildren方法，在该方法中，我们可以来控制子控件的摆放。在正常情况下，能用wrap就用wrap，实现其来比较简单，如果是比较个性化的排列规则，可以使用Flow来实现。首先来看Wrap，Wrap是一个可以使子控件自动换行的控件，默认的方向是水平的，使用起来非常简单。
Flutter 搞定宽高不统一的布局开发
Flutter 跨平台技术研究
07-16 562
我们在开发移动端界面的时候，经常会遇到一组尺寸不一的组件需要作为同一组展示，典型的就是下面这种搜索历史。搜索内容的文字长短不一，导致显示的宽度不一致。而且，需要根据屏幕的宽度来自动换行显示。
Flutter Chip的使用
chuyouyinghe的专栏
09-07 669
已经是很久很久很久没有更新了，这段时间过得略糟糕，此处省略一万字。。。 感觉一眨眼，flutter都1.6了，落后了好多了，又重新捡起来熟悉了一遍，才想起来页面咋创建的，好抱歉~~~~ 昨晚偶然看到了一个比较好玩的组件，叫 Chip，应用场景（关于应用场景，这个链接说得很详细），官方翻译叫标签或者芯片 一、效果 二、构造函数解析： const Chip({ Key key, this.avatar,//左侧的图标 @required this.label,
flutter wrap空行
07-29
在Flutter中，如果你想在布局中添加空行，可以使用Wrap组件。Wrap组件可以将子组件按照一行或多行的方式进行排列，并且会自动换行。在Wrap组件中，你可以使用SizedBox来添加空行。例如，你可以在Wrap组件中添加多个SizedBox来实现多个空行的效果。具体的代码示例可以参考Flutter官方文档\[1\]中的实用教程和Flutter中文社区\[1\]提供的相关问题解答。另外，如果你想深入了解Flutter的运行机制，可以阅读Flutter的源码并进行大量的实践、思考和总结\[3\]。这样可以帮助你更好地解决实际开发中的问题，包括渲染、动画机制、数据绑定和流数据处理等方面。 #### 引用[.reference_title] - *1* [【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )](https://blog.csdn.net/han1202012/article/details/114271961)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [分享 Flutter 学习总结](https://blog.csdn.net/H176Nhx7/article/details/108395695)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值