一: main.dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable_demo/1slidable_page.dart';
import 'package:flutter_slidable_demo/2slidable_dismissal_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TextButton(
child: Text("跳转到SlidablePage界面"),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext) {
return SlidablePage();
}));
},
),
TextButton(
child: Text("跳转到SlidableDismissalPage界面"),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext) {
return SlidableDismissalPage();
}));
},
),
],
),
),
);
}
}
二: SlidablePage.dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class SlidablePage extends StatefulWidget {
@override
_SlidablePageState createState() => _SlidablePageState();
}
class _SlidablePageState extends State<SlidablePage> {
List<String> _list = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20"
];
///initState
@override
void initState() {
// TODO: implement initState
super.initState();
}
///dispose
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
///build
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("SlidablePage"),
),
body: Container(
color: Colors.yellow,
child: ListView.separated(
// shrinkWrap: true, //ListView在Column或Row或Stack布局中,需要设置
separatorBuilder: _separatorBuilder, //底线
itemBuilder: _itemBuilder, //内容
itemCount: _list.length, //个数
),
),
);
}
///separatorBuilder
Widget _separatorBuilder(BuildContext context, int index) {
return Container(
height: 1,
color: Colors.red,
);
}
///itemBuilder
Widget _itemBuilder(BuildContext context, int index) {
GlobalKey key = GlobalKey();
return Slidable(
actionPane: SlidableScrollActionPane(), //侧滑出现的动画方式
actionExtentRatio: 0.25, //侧滑按钮占的宽度
// closeOnScroll: false,
child: _slidableItemBuilder(key, context, index), //slidableBuilder内容
actions: _actions(key, context, index), //左侧滑动-按钮列表
secondaryActions: _secondaryActions(key, context, index), //右侧滑动-按钮列表
);
}
///SlidableItemBuilder
Widget _slidableItemBuilder(GlobalKey key, BuildContext context, int index) {
return Container(
key: key,
height: 66,
alignment: Alignment.center,
color: Colors.blue,
child: Text(
_list[index],
style: TextStyle(color: Colors.white),
),
);
}
///左侧滑动-按钮列表
List<Widget> _actions(GlobalKey key, BuildContext context, int index) {
return [
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () {},
),
IconSlideAction(
caption: 'Share',
color: Colors.indigo,
icon: Icons.share,
onTap: () {},
),
];
}
///右侧滑动-按钮列表
List<Widget> _secondaryActions(
GlobalKey key, BuildContext context, int index) {
return [
//自由度最高
SlideAction(
child: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.more_horiz,
color: Colors.white,
),
Text(
"More",
style: TextStyle(
color: Colors.white,
fontSize: 11,
),
),
],
),
),
color: Colors.black45,
onTap: () {},
),
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () {
print("delete");
//关闭滑动
// Slidable.of(key.currentContext).dismiss();
//删除
_list.removeAt(index);
//变化
setState(() {});
},
),
];
}
}
三: SlidableDismissalPage.dart
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class SlidableDismissalPage extends StatefulWidget {
@override
_SlidableDismissalPageState createState() => _SlidableDismissalPageState();
}
class _SlidableDismissalPageState extends State<SlidableDismissalPage> {
List<String> _list = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20"
];
///initState
@override
void initState() {
// TODO: implement initState
super.initState();
}
///dispose
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
///build
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("SlidableDismissalPage"),
),
body: Container(
color: Colors.yellow,
child: ListView.separated(
shrinkWrap: true, //ListView在Column或Row或Stack布局中,需要设置
separatorBuilder: _separatorBuilder, //底线
itemBuilder: _itemBuilder, //内容
itemCount: 15, //个数
),
),
);
}
///separatorBuilder
Widget _separatorBuilder(BuildContext context, int index) {
return Container(
height: 1,
color: Colors.red,
);
}
///itemBuilder
Widget _itemBuilder(BuildContext context, int index) {
return Slidable(
key: GlobalKey(),
actionPane: SlidableScrollActionPane(), //滑出选项的面板 动画
child: _slidableItemBuilder(context, index), //slidableBuilder内容
actions: _actions(context, index), //左侧滑动-按钮列表
secondaryActions: _secondaryActions(context, index), //右侧滑动-按钮列表
dismissal: _dismissal(context, index), //滑动删除
);
}
///SlidableItemBuilder
Widget _slidableItemBuilder(BuildContext context, int index) {
return Container(
height: 50,
alignment: Alignment.center,
color: Colors.blue,
child: Text(
_list[index],
style: TextStyle(color: Colors.white),
),
);
}
///左侧滑动-按钮列表
List<Widget> _actions(BuildContext context, int index) {
return [
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () {},
),
IconSlideAction(
caption: 'Share',
color: Colors.indigo,
icon: Icons.share,
onTap: () {},
),
];
}
///右侧滑动-按钮列表
List<Widget> _secondaryActions(BuildContext context, int index) {
return [
//自由度最高
SlideAction(
color: Colors.black45,
child: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.more_horiz,
color: Colors.white,
),
Text(
"More",
style: TextStyle(
color: Colors.white,
fontSize: 11,
),
),
],
),
),
onTap: () {},
),
IconSlideAction(
caption: 'ADB',
color: Colors.red,
icon: Icons.adb,
onTap: () {},
),
];
}
///滑动删除
Widget _dismissal(BuildContext context, int index) {
return SlidableDismissal(
child: SlidableDrawerDismissal(),
onWillDismiss: (actionType) {
return showDialog<bool>(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示？'),
content: Text('确定删除该条记录？'),
actions: <Widget>[
TextButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop(false);
},
),
TextButton(
child: Text('确定'),
onPressed: () {
//删除数据
_list.removeAt(index);
//删除界面
Navigator.of(context).pop(true);
//变化
setState(() {});
},
),
],
);
});
},
onDismissed: (actionType) {
print(actionType);
},
);
}
}
参考:
https://zhuanlan.zhihu.com/p/89192575
https://pub.dev/packages/flutter_slidable
网友评论