flutter_tag_layout 0.0.3

Flutter Android iOS web

文本标签

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

重要消息


1 添加依赖

flutter_tag_layout: ^0.0.3

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

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


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