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

複製程式碼

執行效果如下：

---

完畢