先上效果圖
左滑刪除.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,
);
},
);
}