行业知识
flutter 中使用flutter
2026-11-08 04:09:52
来源：互联网转载
flutter pub add flutter_slidable
导入
import 'package:flutter_slidable/flutter_slidable.dart';
使用
import 'package:flutter/material.dart';import 'package:flutter_slidable/flutter_slidable.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget { const MyApp({ Key? key, }) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Slidable Example', home: Scaffold( body: ListView( children: [ Slidable( // Specify a key if the Slidable is dismissible. key: const ValueKey(0), // The start action pane is the one at the left or the top side. startActionPane: ActionPane( // A motion is a widget used to control how the pane animates. motion: const ScrollMotion(), // A pane can dismiss the Slidable. dismissible: DismissiblePane(onDismissed: () {}), // All actions are defined in the children parameter. children: const [ // A SlidableAction can have an icon and/or a label. SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFFFE4A49), foregroundColor: Colors.white, icon: Icons.delete, label: 'Delete', ), SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFF21B7CA), foregroundColor: Colors.white, icon: Icons.share, label: 'Share', ), ], ), // The end action pane is the one at the right or the bottom side. endActionPane: const ActionPane( motion: ScrollMotion(), children: [ SlidableAction( // An action can be bigger than the others. flex: 2, onPressed: doNothing, backgroundColor: Color(0xFF7BC043), foregroundColor: Colors.white, icon: Icons.archive, label: 'Archive', ), SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFF0392CF), foregroundColor: Colors.white, icon: Icons.save, label: 'Save', ), ], ), // The child of the Slidable is what the user sees when the // component is not dragged. child: const ListTile(title: Text('Slide me')), ), Slidable( // Specify a key if the Slidable is dismissible. key: const ValueKey(1), // The start action pane is the one at the left or the top side. startActionPane: const ActionPane( // A motion is a widget used to control how the pane animates. motion: ScrollMotion(), // All actions are defined in the children parameter. children: [ // A SlidableAction can have an icon and/or a label. SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFFFE4A49), foregroundColor: Colors.white, icon: Icons.delete, label: 'Delete', ), SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFF21B7CA), foregroundColor: Colors.white, icon: Icons.share, label: 'Share', ), ], ), // The end action pane is the one at the right or the bottom side. endActionPane: ActionPane( motion: const ScrollMotion(), dismissible: DismissiblePane(onDismissed: () {}), children: const [ SlidableAction( // An action can be bigger than the others. flex: 2, onPressed: doNothing, backgroundColor: Color(0xFF7BC043), foregroundColor: Colors.white, icon: Icons.archive, label: 'Archive', ), SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFF0392CF), foregroundColor: Colors.white, icon: Icons.save, label: 'Save', ), ], ), // The child of the Slidable is what the user sees when the // component is not dragged. child: const ListTile(title: Text('Slide me')), ), ], ), ), ); }}void doNothing(BuildContext context) {} ActionPane的参数说明
ActionPane( key: Key(UniqueKey().toString()), extentRatio:0.2, // 滑动动效 // DrawerMotion() StretchMotion() // motion: ScrollMotion(), motion: BehindMotion(), children: const [ // SlidableAction( // // An action can be bigger than the others. // flex: 2, // onPressed: doNothing, // backgroundColor: Color(0xFF7BC043), // foregroundColor: Colors.white, // icon: Icons.archive, // label: 'Archive', // ), SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFF0392CF), foregroundColor: Colors.white, icon: Icons.save, label: 'Save', ), ], ),
实现只有同时只有一个滑块
SlidableAutoCloseBehavior 包住listview部分代码就可以
body:SlidableAutoCloseBehavior( child: ListView.builder( controller: _scrollController,//需要controller ,不然异常 itemCount: datas.length, key: Key(UniqueKey().toString()), itemBuilder: (BuildContext context, int index) { return Slidable( // 禁用滑动 enabled:true, dragStartBehavior:DragStartBehavior.start, // key: ValueKey(index), // 设置只能有一个滑块 key: Key(UniqueKey().toString()), // 右滑滑动显示的菜单 // startActionPane: ActionPane( // key: Key(UniqueKey().toString()), // // A motion is a widget used to control how the pane animates. // motion: const ScrollMotion(), // // A pane can dismiss the Slidable. // dismissible: DismissiblePane(onDismissed: () { // print("点击了"); // }), // // All actions are defined in the children parameter. // children: const [ // // A SlidableAction can have an icon and/or a label. // SlidableAction( // onPressed: doNothing, // backgroundColor: Color(0xFFFE4A49), // foregroundColor: Colors.white, // icon: Icons.delete, // label: 'Delete', // ), // SlidableAction( // onPressed: doNothing, // backgroundColor: Color(0xFF21B7CA), // foregroundColor: Colors.white, // icon: Icons.share, // label: 'Share', // ), // ], // ), //左滑划出的菜单 endActionPane: ActionPane( key: Key(UniqueKey().toString()), // 菜单宽度 extentRatio:0.2, dragDismissible:false, // 滑动动效 // DrawerMotion() StretchMotion() // motion: ScrollMotion(), motion: BehindMotion(), children: const [ // SlidableAction( // // An action can be bigger than the others. // flex: 2, // onPressed: doNothing, // backgroundColor: Color(0xFF7BC043), // foregroundColor: Colors.white, // icon: Icons.archive, // label: 'Archive', // ), SlidableAction( onPressed: doNothing, backgroundColor: Color(0xFF0392CF), foregroundColor: Colors.white, icon: Icons.save, label: 'Save', ), ], ), child: ListTile(title: Text('Slide me')), ); }, ), )
