【Flutter 專題】97 仿網易新聞標籤選擇器

阿策小和尚發表於2021-07-12
Flutter

「本文已參與好文召集令活動，點選檢視：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

      小菜前段時間剛學習了 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

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

來源： 阿策小和尚

相關文章