• 項(xiàng)目地址

先上效果圖

左滑刪除.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