flutter - 如何一次只允许打开一个 Slidable
问题描述
我正在使用 flutter_sildable 进行聊天应用幻灯片,我希望当时只打开一张幻灯片,所以我尝试了他们在文档中推荐的内容,但它不起作用,我不知道为什么
class _ChatTileState extends State<ChatTile> {
final SlidableController slidableController = SlidableController();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Slidable(
key: UniqueKey(),
controller: slidableController,
movementDuration: Duration(milliseconds: 100),
...
解决方案
嘿,为了使用 flutter_slidable 包一次打开一个图块。您需要对所有图块使用相同的可滑动控制器。从您的代码中,您似乎正在为每个图块实例化新的可滑动控制器。您应该做的是从父小部件实例化 SlidableController 并将其传递给平铺小部件。
这是父小部件
...
String title = 'Customers';
final SlidableController slidableController = SlidableController();
@override
Widget build(BuildContext context) {
return ScaffoldBody(
centerTitle: true,
title: title,
drawer: CustomerScreen.isOrderAdding == true ? null : AppDrawer(),
body: FutureBuilder(
future: _refreshCustomers(context),
builder: (ctx, snapshot) =>
snapshot.connectionState == ConnectionState.waiting
? Center(
child: Center(
child: Image(
image: AssetImage('assets/img/LoadingCartoon.gif'),
),
),
)
: RefreshIndicator(
onRefresh: () => _refreshCustomers(context),
child: Consumer<CustomerHttps>(
builder: (ctx, customerData, _) => Padding(
padding: EdgeInsets.all(5),
child: ListView.builder(
itemCount: customerData.items.length,
itemBuilder: (_, i) => CustomerTile(
slidableController: slidableController,
id: customerData.items[i].id,
name: customerData.items[i].name,
),
),
),
),
),
),
);
在我的可滑动平铺小部件(子小部件)中
final String id;
final String name;
final SlidableController slidableController;
CustomerTile({
this.id,
this.name,
this.slidableController,
});
Widget build(BuildContext context) {
return CustomerScreen.isOrderAdding
? Container(
padding: EdgeInsets.only(bottom: 9),
child: Material(
elevation: 5,
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.white,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(10)),
splashColor: Theme.of(context).primaryColor,
onTap: () {
//clears any products and signature saved after selecting a new customer
var provider =
Provider.of<AddingProductOrder>(context, listen: false);
provider.clear();
Navigator.of(context).pushNamed(
EditOrderScreen.routeName,
arguments: [id, 'selection'],
);
},
child: Container(
width: double.infinity,
child: ListTile(
title: Text(name,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false),
leading: Icon(
Icons.person,
color: Theme.of(context).primaryColor,
),
),
),
),
),
)
: Slidable(
key: Key(id),
actionPane: SlidableDrawerActionPane(),
controller: slidableController,
actionExtentRatio: 0.25,
child: Container(...
推荐阅读
- vue.js - 无法安装;mac中的vue/cli
- spring - 无法自动装配 bean 我正在使用 spring 3.1
- google-cloud-platform - Google cloud sdk root 从 PS C:\Users\mausa\AppData\Local\Google\Cloud SDK> 到这个 studentplan@instance-1 ~] $
- r - 用Rbase中的NA替换数据框中的字符
- python - 为什么 Sklearn TruncatedSVD 的解释方差比不是按降序排列的?
- ios - 无法以我自己定义的速度移动我的头像
- javascript - 我的 js 在 html 完全加载之前运行
- javascript - addClass 和 removeClass jQuery 问题(SetTimeout 在循环内不起作用)
- html - 是否可以选择 HTML 表格中特定单元格下的单元格(CSS、JS、Bootstrap...)
- php - .htaccess 重写到包含 css/js 的不同文件夹