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

Z时代
2024-01-10
分类：技术分享

题记

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

重要消息

网易云【玩转大前端】配套课程

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 标签创建文本

classTextTagPageextendsStatefulWidget{
@override
_FirstPageState createState()=> _FirstPageState();
}
class_FirstPageStateextendsState<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 结合流式布局使用


classTextWarpTagPageextendsStatefulWidget{
@override
_FirstPageState createState()=> _FirstPageState();
}
class_FirstPageStateextendsState<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),
));
}
}