android - 当 Flutter 抽屉里面有 Dismissible 时，如何让它关闭？

Question

我有一个结束抽屉，里面有一个 Dismissibles 的 ListView。

在每个 dismissible 中我都设置了 'direction: DismissDirection.endToStart'。

这会正确地停止向抽屉关闭的方向散播，但不会关闭抽屉。

如何让抽屉继续关闭，同时仍然能够以另一种方式关闭？

Answer 1

我设法通过使用 IgnorePointer 和 Listener 作为您的 Dismissible 的父级来解决您的问题。

当用户打开抽屉时，他会发现所有 Dismissibles 默认情况下都是禁用的，但是在抽屉关闭的相反方向上滑动一次就会激活它们。此处以颜色从灰色变为黑色为标志。

要再次关闭 Drawer，您必须停用 Dismissibles，这是通过一次小的滑动完成的，然后您可以使用 End to Start 轻松关闭 滑动。

我知道您想在不将手指离开屏幕的情况下实现类似的行为，但我无法做到这一点，因为更改状态需要完成指针事件。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  final appTitle = 'Dismissibles demonstration';

  MyApp({Key key,}) : super(key: key);

  @override
 _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.appTitle,
      home: MyHomePage(title: widget.appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState() ;
}

 class _MyHomePageState extends State<MyHomePage> {

   final items = List<String>.generate(100, (i) => "Item ${i + 1}");

   var ignoreSwitch = true ;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(child: Text('Example')),
      drawer: Drawer(
        child: Listener(
          onPointerMove: (PointerMoveEvent event) {
            print(event.delta.dx);
            if(event.delta.dx > 0.0){
              print('all items enabled');
              setState(() {
                      ignoreSwitch = false ;
                    });
            }
          },
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              final item = items[index];
              if(index == 0){
                return DrawerHeader(child: Text('Drawer Header',style: TextStyle(fontSize: 36.0),),decoration: BoxDecoration(color: Colors.cyan,),);
              }
              return Listener(
                onPointerMove: (PointerMoveEvent event) {
                  if(event.delta.dx > 0.0){
                    setState(() {
                      print('Inner listener working ! item $index enabled');
                      ignoreSwitch = false ;
                    });
                  }else{
                    setState(() {
                      print('Inner listener working ! item $index disabled');
                      ignoreSwitch = true ;
                    });
                  }
                },
                child: IgnorePointer(
                  ignoring: ignoreSwitch,
                  child: Dismissible(
                    key: Key(item),
                    direction: DismissDirection.startToEnd,
                    background: Container(
                      color: Colors.green,
                    ),
                    onDismissed: (direction) {
                      // Remove the item from our data source.
                      setState(() {
                        items.removeAt(index);
                      });
                    },
                    child: ListTileTheme(
                      textColor: ignoreSwitch ? Colors.grey : Colors.black,
                      style: ListTileStyle.drawer,
                      child: ListTile(
                        title: Text('item $index', style: TextStyle(fontSize: 18.0)),
                        onTap: () {
                          //Navigator.pop(context);
                        },
                      ),
                    )
                  ),
                ),
              );
            },
          ),
        )
      ),
    );
  }
}