flutter_tag_layout

Description:

flutter tag layout

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


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


EDU配套 教程


Flutter开发的点滴积累系列文章



1 添加依赖
flutter_tag_layout: ^0.0.3
copied to clipboard
2 导包
在使用到文本标签的地方
import 'package:flutter_tag_layout/flutter_tag_layout.dart';
copied to clipboard
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("测试"),
]),
));
}
}

copied to clipboard
运行效果如下：

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

copied to clipboard
运行效果如下：


完毕