Flutter 仿iOS左滑刪除,長按拖動

先上效果圖
左滑刪除.PNG
Untitled4.gif
用到的plugin有1.左滑刪除。 2.長按拖動
#拖動組件
  reorderables: ^0.4.0

  #左滑刪除
  flutter_slidable: 1.3.0

創(chuàng)建左滑刪除視覺
Widget _buildChildItem(PlaceChildItem childItem) {
    //滑動組件
    return Padding(
      key: ValueKey(childItem.id),
      padding: EdgeInsets.only(bottom: 15),
      child: Slidable(
        key: ValueKey(childItem.id),
        direction: Axis.horizontal,
        enabled: items.length <= 1 ? false : true,
        endActionPane:
            ActionPane(motion: ScrollMotion(), extentRatio: 0.5, children: [
//左右兩個空的站位,為了視覺顯示效果,
          SlidableAction(
            onPressed: (BuildContext context) {},
            label: "",
            backgroundColor: Colors.transparent,
          ),
          SlidableAction(
            flex: 5,
            onPressed: (BuildContext context) {
              _deleteItem(childItem);
            },
            icon: Icons.delete,
            label: "刪除",
            borderRadius: BorderRadius.all(Radius.circular(12)),
            backgroundColor: Colors.orange,
          ),
          SlidableAction(
            onPressed: (BuildContext context) {},
            label: "",
            backgroundColor: Colors.transparent,
          ),
        ]),
//視覺上顯示的widget,可根據(jù)需求自定義
        child: Container(
          height: 130,
          width: widget.width! - 30,
//        color: Colors.amber,
          padding: EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(12)),
              image: DecorationImage(
                image: new ExactAssetImage(
                  'assets/images/weather_bg.jpg',
                ), //
                fit: BoxFit.fitWidth,
              )),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    childItem.name ?? "",
                    style: GpOtherTheme.size20Green(context)!.copyWith(
                        color: CommonColors.onPrimaryTextColor, fontSize: 27),
                  ),
                  Text(childItem.temperature ?? "",
                      style: GpOtherTheme.size20Green(context)!.copyWith(
                          color: CommonColors.onPrimaryTextColor,
                          fontSize: 40,
                          fontWeight: FontWeight.w300)),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    childItem.skycon ?? "",
                    style: GpOtherTheme.size14(context).copyWith(
                        color: CommonColors.onPrimaryTextColor, fontSize: 16),
                  ),
                  Text("${childItem.max ?? ""} ${childItem.min ?? ""}",
                      style: GpOtherTheme.size14(context).copyWith(
                          color: CommonColors.onPrimaryTextColor,
                          fontSize: 16)),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
創(chuàng)建可拖動視覺組件
Widget _buildReorderables() {
    _rows = items.map((e) => _buildChildItem(e)).toList();
    void _onReorder(int oldIndex, int newIndex) {
      if (mounted) {
        if (widget.onReorderCallback != null) {
          widget.onReorderCallback!(oldIndex, newIndex);
        }
        setState(() {
          Widget row = _rows.removeAt(oldIndex);
          _rows.insert(newIndex, row);
          PlaceChildItem childItem = items.removeAt(oldIndex);
          items.insert(newIndex, childItem);
        });
      }
    }

    return ReorderableColumn(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 15),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: _rows,
      onReorder: _onReorder,
      buildDraggableFeedback:
          (BuildContext context, BoxConstraints constraints, Widget child) {
//包裹的目的是,child有切圓角,防止長按拖動時,顯示背景
        return Material(
          color: Colors.transparent,
          child: child,
        );
      },
    );
  }


代碼比較少,通俗易懂,位置在lib --> sections --> weather --> widget --> place.dart line 208
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容