天天看點

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("測試"),
          ]),
        ));
  }
}
           

運作效果如下:

Flutter文本标簽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),
        ));
  }
}
           
Flutter文本标簽TextTagWidget,搜尋記錄流式布局顯示文本标簽

完畢

Flutter文本标簽TextTagWidget,搜尋記錄流式布局顯示文本标簽

繼續閱讀