flutter tagview

tagview是一款提供tag顯示的widget，默認內容是Text widget，也提供了自定義內容區的builder，提供各種屬性，基本滿足日常開發對於該功能的需求

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_repairstation/utils/scale.dart';

/// 點擊回調 index
typedef TagClick = Function(int index);

/// 自定義tag builder
typedef TagBuilder = Widget Function(BuildContext context, int index);

/// 快速創建tagView
class TagView extends StatefulWidget {
  /// 內容列表
  final List<String> tags;

  /// margin
  EdgeInsets margin;

  /// padding
  EdgeInsets padding;

  /// 視圖總寬度
  final double width;

  /// tag高度
  final double tagHeight;

  /// 文字樣式
  TextStyle itemStyle;

  /// 內容文字上下左右間距
  EdgeInsets itemPadding;

  /// tag背景顏色
  Color color;

  /// tagView背景顏色
  Color backgroundColor;

  /// 圓角度數
  final double radius;

  /// tag橫向間距
  final double spacing;

  /// tag縱向間距
  final double runSpacing;

  /// 點擊回調
  final TagClick onTap;

  /// 自定義Tag
  TagBuilder builder;

  TagView({
    Key key,
    this.tags,
    this.margin,
    this.padding,
    this.width,
    this.tagHeight,
    this.itemPadding,
    this.itemStyle,
    this.backgroundColor,
    this.radius: 2,
    this.runSpacing: 10,
    this.spacing: 10,
    this.onTap,
    this.color,
    this.builder,
  }) : super(key: key) {
    /// 初始化默認值
    this.itemPadding = this.itemPadding ?? EdgeInsets.fromLTRB(5, 2, 5, 2);
    this.itemStyle = this.itemStyle ??
        TextStyle(color: Color(0xFFF0441C), fontSize: FONT_SCALE(12));
    this.color = this.color ?? Color.fromRGBO(254, 237, 233, 1);
    this.padding = this.padding ??
        EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10);
  }

  @override
  _TagViewState createState() => _TagViewState();
}

class _TagViewState extends State<TagView> {
  @override
  Widget build(BuildContext context) {
    if (widget.tags.length == 0 || widget.tags == null) return Container();
    return Material(
      color: Colors.transparent,
      child: Container(
        width: widget.width,
        color: widget.backgroundColor,
        margin: widget.margin,
        padding: widget.padding,
        child: Wrap(
          spacing: widget.spacing,
          runSpacing: widget.runSpacing,
          children: widget.tags.map((res) {
            int i = widget.tags.indexOf(res);
            return GestureDetector(
              onTap: widget.onTap == null
                  ? null
                  : () {
                      if (widget.onTap != null) {
                        widget.onTap(i);
                      }
                    },
              child: widget.builder != null
                  ? Builder(
                      builder: (context) {
                        return widget.builder(context, i);
                      },
                    )
                  : Row(
                      /// 為了處理container中設置了alignment寬度無限大的問題，這里使用row來包裹
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          alignment: Alignment.center,
                          height: widget.tagHeight,
                          child: Text(
                            widget.tags[i],
                            style: widget.itemStyle,
                          ),
                          padding: widget.itemPadding,
                          decoration: BoxDecoration(
                            color: widget.color,
                            borderRadius: BorderRadius.circular(widget.radius),
                          ),
                        )
                      ],
                    ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

使用也很簡單

1. 默認內容區為Text widget

 List<String> tags =  [
      '我要好好學習',
      'Java',
      'Object-C',
      'Swift',
      'Dart',
      'Python',
      'Javascript'
    ];

TagView(
                tags: tags,
                backgroundColor: Colors.orange,
                itemStyle: TextStyle(color: Colors.brown,fontSize: 14),
                radius: 15,
                tagHeight: 30,
                width: 250,
                onTap: (text) {
                  print(text);
                },
      ),

2. 如果內容區不是Text,可以通過builder來自定義內容區

TagView(
                tags: tags,
                backgroundColor: Colors.orange,
                width: 250,
             builder: (context,index) => Container(
                   color: Colors.blueGrey,
                   child: Row(
                     mainAxisSize: MainAxisSize.min,
                       children: <Widget>[
                         Icon(Icons.star,color: Colors.red,),
                         Text('${tags[index]}'),
                       ],
                     ),
                 ),
                onTap: (text) {
                  print(text);
                },
      ),