Flutter文本标签TextTagWidget,搜索记录流式布局显示文本标签
2023-09-11 14:14:53 时间
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
重要消息
1 添加依赖
flutter_tag_layout: ^0.0.3
github源码在这里
pub.flutter-io.cn最新版在这里
2 导包
在使用到文本标签的地方
import 'package:flutter_tag_layout/flutter_tag_layout.dart';
3 标签创建文本
class TextTagPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<TextTagPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("文本标签"),
),
body: Container(
margin: EdgeInsets.all(30.0),
child: Row(children: [
TextTagWidget("文本标签"),
TextTagWidget("测试"),
]),
));
}
}
运行效果如下:
4 结合流式布局使用
class TextWarpTagPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<TextWarpTagPage> {
///文本标签集合
List<String> tagList = ["文本标签", "测试", "这是什么", "早上好","吃饭", "再来一次"];
@override
Widget build(BuildContext context) {
List<Widget> itemWidgetList = [];
for (var i = 0; i < tagList.length; i++) {
var str = tagList[i];
itemWidgetList.add(TextTagWidget("$str"));
}
return Scaffold(
appBar: AppBar(
title: Text("文本标签"),
),
body: Container(
margin: EdgeInsets.only(top: 30.0, left: 10, right: 10),
///流式布局
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
///子标签
children: itemWidgetList),
));
}
}
运行效果如下:
完毕
相关文章
- destoon8.0生成输出热门搜索sitemap地图方法
- 一个完整推荐系统的设计实现-以百度关键词搜索推荐为例
- NET插件系统之四——提升系统搜索插件和启动速度的思考
- Java实现 LeetCode 581 最短无序连续子数组(从两遍搜索找两个指针)
- Java实现 LeetCode 96 不同的二叉搜索树
- Java实现 LeetCode 35 搜索插入位置
- 第二百一十节,jQuery EasyUI,SearchBox(搜索框)组件
- Linux动态库(.so)搜索路径
- LeetCode-385. 迷你语法分析器【深度优先搜索,栈】
- LeetCode-35. 搜索插入位置
- deepin v20.4设置全局搜索的快捷键
- SAP CRM产品搜索支持的标准搜索条件的渲染逻辑
- CRM webClient UI搜索参数里max hit是怎么被后台服务器处理的
- Atitit.软件gui按钮and面板---os区-----linux windows搜索文件 文件夹
- 基于混沌搜索策略的鲸鱼优化算法-附代码
- 扇区搜索机制的果蝇优化算法-附代码
- SDUT 2893-B(DP || 记忆化搜索)
- 【Leetcode刷题Python】450. 删除二叉搜索树中的节点
- 基于变邻域搜索平衡优化算法与粘菌算法的柔性车间调度(Matlab代码实现)