Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

网易云【玩转大前端】配套课程
EDU配套教程
Flutter开发的点滴积累系列文章

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> {@overrideWidget 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 = ["文本标签", "测试", "这是什么", "早上好","吃饭", "再来一次"];@overrideWidget 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),));}
}

运行效果如下：

完毕

Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签相关推荐

搜索历史记录流式布局展示
Config package com.tan.searchhistory.constants;public class Config {//数据库public static final int DAT ...
自定义 FlowLayout流式布局搜索框加 GreenDao存取搜索记录，使用RecyclerView展示
输入框布局的shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android ...
仿唯品会/京东/淘宝搜索流式布局的隐藏与展示
1. 项目需求: 如下,如果没有向下箭头(显示/隐藏剩余搜索词条)的话,采用flexbox-layout+Recycleview+FlexboxLayoutManager 可以实现流式布局. 加了这个 ...
flutter圆形动画菜单，Flow流式布局动画圆形菜单
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 flutter中网络请求dio使用分析视频教程在这里 Flutter 从入门实践到开发一个APP之UI基础 ...
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
46、Flutter之布局组件流式布局Wrap，Flow
Row 和 Colum 如果子 widget 超出屏幕范围,则会报溢出错误,如: Row(children: <Widget>[Text("xxx"*100)], ); ...
Android第三方流式布局FlowLayout简单实用（搜索历史记录）
效果图: 导入大Model下: maven { url 'https://jitpack.io' } builde.gradle依赖: implementation 'com.github.LRH19 ...
Flutter 流式布局、自动换行（Wrap、Flow）
文章目录流式布局 Wrap Flow 流式布局流式布局在移动端是非常常见的,比如商品列表,瀑布流.标签页等等.使用Android原生来实现流式布局还是有点麻烦的,甚至需要自定义view或者使用第三 ...
Flutter流式布局
Row(children: <Widget>[Text("大帅哥"*100),],), 如果子widget超出屏幕范围,则会报溢出错误.这是因为Row默认只有一行,如果 ...

Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签

1 添加依赖

2 导包

3 标签创建文本

4 结合流式布局使用

Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签相关推荐

最新文章

热门文章