Flutter 97: 仿網易新聞标簽選擇器

      小菜前段時間剛學習了 Draggable + DragTarget 實作基本的拖拽效果，現在嘗試以此為基礎仿照網易新聞用戶端實作一個簡單的标簽選擇器；

預期功能

1. 标簽選項器中單個标簽可以拖拽換位；
2. 【編輯】狀态下可以删除單個标簽；
3. 可随時添加新的标簽位；
4. 拖拽過程中添加動畫效果(後期優化)；

   

案例嘗試

      小菜簡單羅列了一下預期功能，其中拖拽動畫小菜還未嘗試，先把其他的功能實作；

1. 單個拖拽标簽

      标簽需要拖拽，小菜将 DragTarget 作為 Draggable 的子 Widget 嵌套應用；主要實作三個回調，分别為是否接收 Draggable 狀态的 onWillAccept 回調，接收 Draggable 的 onAccept 回調和取消接收狀态的 onLeave 回調；

_itemDragableWid(list, index) {
  return Draggable(
      data: index,
      childWhenDragging: Container(),
      dragAnchor: DragAnchor.child,
      feedback: _itemClipWid(list, index, true),
      child: DragTarget(onWillAccept: (data) {
        print("Draggable onWillAccept data --> $data");
        return data != null;
      }, onAccept: (data) {
        print("Draggable onAccept data --> $data");
        setState(() {
          final temp = list[data];
          list.remove(temp);
          list.insert(index, temp);
        });
      }, onLeave: (data) {
        print("Draggable onLeave data --> $data");
      }, builder: (context, candidateData, rejectedData) {
        return _itemClipWid(list, index, false);
      }));
}           

      小菜繪制了一個圓角标簽 item，其中【删除/添加 icon】根據清單類型判斷；小菜還設定了在拖拽過程中與未拖拽标簽顔色大小的區分；

      小菜在測試過程中拖動時文字會變大且有下劃線，主要是主題設定問題，小菜在外層嵌套一個 Material Widget 來避免文字樣式變化；

      但與此同時會帶來新的問題，小菜設定的圓角 Container 的四個角在拖動過程中有白色背景，其原因是設定 Material 嵌套後，預設背景色為白色，于是小菜設定 Material 背景色為透明，設定 Container BoxDecoration 背景色為白色即可；

_itemClipWid(list, index, isFeedBack) {
  return Material(
      color: Colors.transparent,
      child: Container(
          width: (MediaQuery.of(context).size.width - 40) / 4,
          child: Padding(
              padding: EdgeInsets.symmetric(vertical: isFeedBack ? 8.0 : 4.0),
              child: Center(child:Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                (isEdit && list == mList) ? Icon(Icons.clear, size: 12.0, color: Colors.grey) : Container(),
                (list == recList) ? Icon(Icons.add, size: 12.0, color: Colors.grey) : Container(),
                Text(list[index], style: TextStyle(color: isFeedBack ? Colors.red : Colors.black))
              ]))),
          decoration: BoxDecoration(
              border: Border.all(
                  color: isFeedBack ? Colors.red : Colors.black54,
                  width: 0.5),
              color: Colors.white70,
              borderRadius: BorderRadius.all(Radius.circular(50.0)))));
}           

2. 網格清單

      網格清單就是最常用的 GridView；小菜設定兩個 GridView 分别存儲【我的欄目】和【推薦欄目】；其中标簽 item 的點選事件和拖拽事件并不沖突；

      小菜測試過程中删除或加入單個标簽時會錯位，其原因是小菜 list.remove(list[index]); recList.add(list[index]); 這樣 list 在第一次 remove 時就已經改變了數量，再次 add 時目前 index 對應的标簽已經更換；于是小菜設定一個臨時變量 temp 來避免此類情況；

_comGridView(list) {
  return Padding(
      padding: EdgeInsets.only(left: 14.0, right: 14.0),
      child: GridView.builder(
          physics: ScrollPhysics(),
          primary: false, shrinkWrap: true,
          scrollDirection: Axis.vertical,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4, mainAxisSpacing: 8.0, crossAxisSpacing: 8.0, childAspectRatio: 2.6),
          itemCount: list.length,
          itemBuilder: (context, index) {
            return GestureDetector(
                child: _itemDragableWid(list, index),
                onTap: () {
                  Toast.show(list[index], context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
                  if (list == recList) {
                    final temp = list[index];
                    recList.remove(temp);
                    list.remove(temp);
                    mList.add(temp);
                    setState(() {});
                  } else {
                    final temp = list[index];
                    mList.remove(temp);
                    list.remove(temp);
                    recList.add(temp);
                    setState(() {});
                  }
                });
          }));
}           

3. 編輯狀态

      小菜添加了【編輯/完成】兩種業務邏輯，在【編輯】狀态可以【删除】标簽；

      小菜預期的想法是隻允許【我的欄目】中進行拖拽更新，不允許【推薦欄目】内和與【我的欄目】互相拖拽；因為小菜是采用 Draggable + DragTarget 嵌套，是以在拖拽過程中會執行兩次 onWillAccept 判斷，此時不能确定是由哪個标簽 item 起始的，導緻清單重新整理異常；于是小菜設定了一個臨時數組，分别存放起始和終止 onWillAccept 回調時是哪個 DataList，隻有在【我的欄目】内才允許 onAccept 接收回調；

_titleRightWid(isRec) {
  if (isRec)
    return Container();
  else
    return GestureDetector(
        child: Container(
            child: Padding(
                padding: EdgeInsets.symmetric(vertical: 3.0, horizontal: 14.0),
                child: Text(!isEdit ? '編輯' : '完成', textAlign: TextAlign.right, style: TextStyle(color: Colors.red))),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(50.0)))),
        onTap: () {
          setState(() => isEdit = !isEdit);
          Toast.show(!isEdit ? '編輯' : '完成', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
        });
}

_tempState(list) {
  if (tempList != null) {
    if (tempList.length == 2) {
      tempList = [];
      tempList.add((list == mList) ? 0 : 1);
    } else if (tempList.length == 1) {
      tempList.add((list == mList) ? 0 : 1);
    } else {
      tempList.add((list == mList) ? 0 : 1);
    }
  } else {
    tempList = [];
    tempList.add((list == mList) ? 0 : 1);
  }
}           

新聞标簽選擇器 Demo

      小菜自定義的标簽選擇器還不夠完善，後期主要會對動畫效果進行逐漸優化；如有錯誤，請多多指導！

來源： 阿策小和尚