我在屏幕上有一个长的可点击的列表项目列表.我需要实现的用户界面是从上到下滑入一个动作小工具,其中包含可以应用于屏幕上的选定项目的动作.

我已经 Select 了项目,但问题是,一旦我 Select 了第一个项目并从顶部显示对话框中的幻灯片,我就不能再点击屏幕的任何部分,因为对话框屏障挡住了整个屏幕.

我可以做些什么来消除这个障碍,这样我仍然可以在不关闭对话框的情况下点击列表项.

只有对话框上的操作才能关闭该对话框.

以下是我目前的对话设置:

 Future<T?> showNonBlockingTopModalSheet<T>(BuildContext context, Widget child,
    {bool barrierDismissible = false}) {
  return showGeneralDialog<T?>(
    context: context,
    barrierDismissible: barrierDismissible,
    barrierColor: Colors.transparent,
    transitionDuration: const Duration(milliseconds: 250),
    pageBuilder: (context, _, __) => child,
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Material(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [child],
              ),
            )
          ],
        ),
        position: CurvedAnimation(parent: animation, curve: Curves.easeOutCubic)
            .drive(
          Tween<Offset>(
            begin: const Offset(0, -1.0),
            end: Offset.zero,
          ),
        ),
      );
    },
  );
}

推荐答案

showGeneralDialog会在我们的页面顶部创建一个新页面,因此我们无法控制位于新页面后面的页面.
我已经根据您的需要实现了代码.您可能需要根据您的要求对其进行修改.它将帮助您更进一步. 我们使用Stack,还有Animated Positioned用于您的用例.
堆栈有两个子项,第一个是可见列表项,第二个是AnimatedPosited小部件.
这个例子的灵感来自AnimatedPositioned Demo
这是您的代码.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showModel = false;

  @override
  Widget build(BuildContext context) {
    final listItems = [0,1,2,3,4,5,6,7,8,9.10,11,12,13,14,15,16,17,18];

    return Scaffold(
      appBar: !showModel ? AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
       ):PreferredSize(child: SizedBox(), preferredSize: Size(0,0),),,
      body: Stack(
        children: <Widget>[
          ListView(
            children: listItems.map((e) {
              return Container(
                  height: 50,
                  child: Text('Widget number $e'));
            }).toList(),
          ),
          AnimatedPositioned(
          curve: Curves.easeOutCubic,
            height: 200,
            bottom: showModel ?
            MediaQuery.of(context).size.height - 200:
            MediaQuery.of(context).size.height,
            duration: const Duration(milliseconds: 250),
            child: Container(
              height: MediaQuery.of(context).size.height - 100,
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: const Center(child: Text("I am modal prompt")),
            ),)
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            showModel = !showModel;
          });
          },
        child: Text("Toggle"),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Flutter相关问答推荐

如何增加容器高度?

Android元数据为1.9.0,预期版本为1.7.1,如何解决flutter应用程序构建失败问题?

Flutter版本3.19.2需要更新版本的Kotlin Gradle插件./android/build.gradle:ext.kotlin_version = latest-version>'

build_runner显示错误没有为类ClassDeclaration定义getter宏关键字'

允许冻结在初始化时使用工厂

Flutter 布局-全屏幕容器

在Flutter 中每次点击按钮时都很难调用自定义函数

如何从DART中的事件列表中获取即将到来的日期

DART:如何判断有时可以为空的泛型类型?

Flutter 日期时间格式

从图标启动器打开时,VSCode未检测到Web设备

Flutter 需要 Xcode 14 或更高版本

参数类型void Function()无法分配给参数类型void Function(LongPressEndDetails)?

Flutter http 请求获取 null

如何从 showModalBottomSheet 中的 topRight 和 topLeft 移除平边

Flutter:制作自定义小部件的最佳做法是什么?

CircleAvatar 在 ListTile 中领先

为什么这个循环只发生一次?Flutter /dart

如何在 IntroductionScreen 小部件 Flutter 中制作全屏渐变色

如何在Flutter 中专注于列表视图中最新添加的项目