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

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

重要消息


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

运行效果如下:
在这里插入图片描述


完毕
公众号 我的大前端生涯

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页