flutter - ListView (flutter_slidable) - 删除时平滑淡入淡出效果。（提供者）

Question

我正在使用flutter_slidable包并provider在我的应用程序中。帮助我理解。单击幻灯片中的按钮删除它时如何使幻灯片淡出效果，就像滑出时删除一样流畅。幻灯片立即淡出而不是平滑。也许我需要申请ClosableSlideAction，但我不明白如何......

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:provider/provider.dart';

class PrMain with ChangeNotifier {
  List dataMap = [
    {"id": 0, "title": "First", "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."},
    {"id": 1, "title": "Second", "body": "Contrary to popular belief, Lorem Ipsum is not simply random text."},
    {"id": 2, "title": "Third", "body": "It has roots in a piece of classical Latin literature from 45 BC"},
  ];

  void removeFromAllCardsList(int id) {
    dataMap.removeAt(id);
    print(dataMap);
    notifyListeners();
  }
}

void main() {
  runApp(PrWidget());
}

class PrWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [ChangeNotifierProvider<PrMain>(
        create: (context) => PrMain(),),
      ],
      child: MyApp(),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'ListView Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("Test"),
          ),
          body: Material(
            type: MaterialType.transparency,
            child: Column(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.fromLTRB(10,10,10,10),
                    child: ListView.builder(
                      itemCount: context.watch<PrMain>().dataMap.length,
                      addAutomaticKeepAlives: false,
                      cacheExtent: 100.0,
                      itemBuilder: (context, index) {
                        return Slidable(
                          key: UniqueKey(),
                          dismissal: SlidableDismissal(
                              child: SlidableDrawerDismissal(),
                              onDismissed: (actionType) async {
                                context.read<PrMain>().removeFromAllCardsList(index);
                              }),
                          actionPane: SlidableBehindActionPane(),
                          actionExtentRatio: .85,
                          //
                          actions: <Widget>[
                            Card(
                              elevation: 2,
                              child: Container(
                                child: IconSlideAction(
                                  caption: 'Under Construction. ${context.watch<PrMain>().dataMap[index]["id"]}',
                                  color: Colors.lightBlueAccent,
                                  icon: Icons.help_outline,
                                  onTap: () {
                                    context.read<PrMain>().removeFromAllCardsList(index);
                                  },
                                ),
                              ),
                            ),
                          ],
                          secondaryActions: [
                            Card(
                              elevation: 2,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Expanded(
                                    flex: 17,
                                    child: Container(
                                      padding: EdgeInsets.fromLTRB(5,5,5,5),
                                      margin: EdgeInsets.only(left: 0),
                                      child: MaterialButton(
                                        onPressed: () async {
                                          context.read<PrMain>().removeFromAllCardsList(index);
                                        },
                                        child: Icon(Icons.access_time, size: 18,),
                                        color: Colors.yellow,
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    flex: 80,
                                    child: Container(
                                      padding: EdgeInsets.fromLTRB(5, 5, 10, 5),
                                      height: double.infinity,
                                      child: Align(
                                        alignment: Alignment.centerRight,
                                        child: Text(
                                          context.watch<PrMain>().dataMap[index]["body"],
                                          textAlign: TextAlign.right,
                                          style: TextStyle(

                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                          child: Card(
                            child: ListTile(
                              leading: GestureDetector(
                                onTap: () async {
                                  context.read<PrMain>().removeFromAllCardsList(index);
                                },
                                child: Container(
                                  child: Icon(
                                    Icons.done_outline_sharp,
                                    color: Colors.green,
                                  ),
                                ),
                              ),
                              onTap: () {
                                context.read<PrMain>().removeFromAllCardsList(index);
                              },
                              title: Text(context.watch<PrMain>().dataMap[index]["title"],),
                              subtitle: Text(context.watch<PrMain>().dataMap[index]["body"],),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
    );
  }
}

标签： flutterdartflutter-providerflutter-listview

Answer 1

您在彼此内部使用两个灵活的小部件的问题。

1. 卡片
2. IconSlideAction

因此，当您滚动以关闭磁贴时。Flutter 无法确定正确的大小来显示IconSlideAction小部件。

解决方案：
您可以模拟IconSlideAction小部件。通过在里面嵌套卡片Expanded-> SizedBox.expand。

Expanded(
  child: SizedBox.expand(
    child: Card(
        elevation: 2,
        child: Container(child: Text('Text'),
        onTap: () {
           context.read<PrMain>().removeFromAllCardsList(index);
        },
      ),
    ),
  ),
),

使用完整的源代码flutter_slidable: ^1.1.0

ListView.builder(
    itemCount: context.watch<PrMain>().dataMap.length,
    addAutomaticKeepAlives: false,
    cacheExtent: 100.0,
    itemBuilder: (context, index) {
        return Slidable(
        key: UniqueKey(),
        endActionPane: ActionPane(
            extentRatio: 0.85,
            dismissible: DismissiblePane(
            onDismissed: () async {
                context
                    .read<PrMain>()
                    .removeFromAllCardsList(index);
            },
            ),
            motion: ScrollMotion(),
            children: <Widget>[
              Expanded(
                child: SizedBox.expand(
                  child: Card(
                    elevation: 2,
                    child: Container(child: Text('Text')),
                    onTap: () {
                       context.read<PrMain>().removeFromAllCardsList(index);
                    },
                  ),
                ),
              ),
            ],
        ),
        child: Card(
            child: ListTile(
            leading: GestureDetector(
                onTap: () async {
                context
                    .read<PrMain>()
                    .removeFromAllCardsList(index);
                },
                child: Container(
                child: Icon(
                    Icons.done_outline_sharp,
                    color: Colors.green,
                ),
                ),
            ),
            onTap: () {
                context
                    .read<PrMain>()
                    .removeFromAllCardsList(index);
            },
            title: Text(
                context.watch<PrMain>().dataMap[index]["title"],
            ),
            subtitle: Text(
                context.watch<PrMain>().dataMap[index]["body"],
            ),
            ),
        ),
        );
    },
),