H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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> {
@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),
));
}
}
 

运行效果如下:

在这里插入图片描述

完毕

公众号 我的大前端生涯

本文地址:H5W3 » Flutter文本标签TextTagWidget,搜索记录流式布局显示文本标签

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址