Flutter 流式佈局wrap實現顏色標籤選擇器

敏而好學，不恥下問。——孔子

Flutter從前年出來以後，慢慢的被各大老闆看好，並招聘一些會進行雙端頁面開發。目前在開發者如果有開源的插件讓我們去使用那簡直太好了，如果沒有開源的插件，也許我們就需要自定義了。一個小小的問題，夠讓你折騰很久了。

最近遇到的問題通過在對話框上彈出流式標籤進行選擇，一開始用的GridView，佈局完成後發現了一個問題，每一項的寬度一樣了。流式佈局需要的是不一樣，或許我們可以從流式佈局（Wrap、Flow）去進行一個選擇，今天我首選Wrap着手來開發一個顏色標籤選擇器。

開始了

1、除了使用dialog，我們也可以把StatefulWidget改成成對話框的樣式，

2、設置StatefulWidget寬、高、邊距以及背景顏色達到對話框的效果。

3、流式佈局wrap添加多個自定義圓角標籤

4、通過點擊其中一個標籤來改變其他標籤的背景色。

接下來我們要一一實現這些小目標了。雖然不能向業界那些大佬那樣，任何一個目標就是幾個億，但是我們可以在程序中實現自己的每一個小目標。

StatefulWidget修改成對話框

首先設置Container寬高和背景顏色-半透明，爲了看起來像個對話框；接下來設置對話框的圓角。

 @override
  Widget build(BuildContext context) {
    double marginLr = ViewUtils.currentWidth(50.0);
    double marginTb = ViewUtils.currentHeight(300.0);
    return Container(
      color: Color(0x80000000),
      child: Container(
        padding: EdgeInsets.only(
            left: ViewUtils.currentWidth(48.0),
            right: ViewUtils.currentWidth(48.0)),
        margin: EdgeInsets.only(
            top: marginTb, left: marginLr, right: marginLr, bottom: marginTb),
      ),
    );
  }

 @override
  Widget build(BuildContext context) {
    double marginLr = ViewUtils.currentWidth(50.0);
    double marginTb = ViewUtils.currentHeight(300.0);
    return Container(
      color: Color(0x80000000),
      child: Container(
        padding: EdgeInsets.only(
            left: ViewUtils.currentWidth(48.0),
            right: ViewUtils.currentWidth(48.0)),
        margin: EdgeInsets.only(
            top: marginTb, left: marginLr, right: marginLr, bottom: marginTb),
        decoration: BoxDecoration(//邊框顏色+圓角
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(ViewUtils.currentWidth(40.0)),
          ),
        ),
      ),
    );
  }

流式佈局wrap每一項佈局樣式+圓角背景(BoxDecoration,borderRadius)+文本(Text)+點擊事件( GestureDetector\onTap)

  @override
  Widget build(BuildContext context) {
    double marginLr = ViewUtils.currentWidth(50.0);
    double marginTb = ViewUtils.currentHeight(300.0);
    return Container(
      color: Color(0x80000000),
      child: Container(
        padding: EdgeInsets.only(
            left: ViewUtils.currentWidth(48.0),
            right: ViewUtils.currentWidth(48.0)),
        margin: EdgeInsets.only(
            top: marginTb, left: marginLr, right: marginLr, bottom: marginTb),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _label(context),
            Container(
              padding: EdgeInsets.only(
                  bottom: ViewUtils.currentHeight(30.0),
                  top: ViewUtils.currentHeight(30.0)),
              child: Text(
                "顏色",
                style: TextStyle(
                    fontSize: 22.0,
                    color: Color(0xFF6D7278),
                    decoration: TextDecoration.none),
              ),
            ),
            Wrap(
              spacing: ViewUtils.currentWidth(20.0),
              runSpacing: ViewUtils.currentHeight(20.0),
              children: _widgets(this),
            ),
          ],
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(ViewUtils.currentWidth(40.0)),
          ),
        ),
      ),
    );
  }

 

List<String> colors = ["銀色", "金色", "深空灰", "暗夜綠"];
  List<bool> colorCheck = [true, false, false, false];
  Widget _colorLvItem(index) {
    Radius radius = Radius.circular(ViewUtils.currentHeight(40.0));
    return GestureDetector(
      onTap: () {
        setState(() {
          for (int i = 0; i < colorCheck.length; i++) {
            colorCheck[i] = (i == index);
          }
          ViewUtils.toast(context,colors[index]);
        });
      },
      child: Container(
        padding: EdgeInsets.only(
            top: ViewUtils.currentHeight(10.0),
            bottom: ViewUtils.currentHeight(10.0),
            left: ViewUtils.currentWidth(44.0),
            right: ViewUtils.currentWidth(44.0)),
        decoration: new BoxDecoration(
          color: Color(colorCheck[index] ? 0xFFFFCA59 : 0x4F1E1E1E),
          borderRadius: BorderRadius.all(radius),
        ),
        child: Text(
          colors[index],
          style: TextStyle(
              color: Color(0xFFffffff),
              fontSize: 16.0,
              decoration: TextDecoration.none),
        ),
      ),
    );
  }

  List<Widget> _widgets(State state) {
    return colors.asMap().keys.map((index) => _colorLvItem(index)).toList();
  }

GestureDetector+onTap()+setState()缺一不可：

如果沒有setState，我們就無法去動態修改顏色數組的值：

若取消setState，效果如何呢？

我們點擊其他標籤切換顏色的時候沒有顏色變化了。

setState(){}的調用時吧視圖重新繪製了一遍，所以爲了完成重新繪製，你懂的。

總結：不管在新的技術或者看似很簡單的技術面前，我們不要去退縮，要跟好的完成每一個細節，也許離成功就不遠了。

參考：

流式佈局 Wrap：https://book.flutterchina.club/chapter4/wrap_and_flow.html?h=wrap

手勢識別：https://book.flutterchina.club/chapter8/gesture.html?h=GestureDetector

List :https://www.dartcn.com/guides/language/language-tour#list

Map :https://www.dartcn.com/guides/language/language-tour#map