我在屏幕上有一个长的可点击的列表项列表。我需要实现的UI是从上到下滑动一个动作小部件,其中包含可以应用于屏幕上所选项目的动作。
我已经选择了项目,但问题是,一旦我选择了第一个项目并从顶部显示对话框中的幻灯片,我就不能再点击屏幕的任何部分了,因为对话框屏障挡住了整个屏幕。
我能做些什么来消除这个障碍,这样我仍然可以点击列表项而不关闭对话框。
只有对话框上的操作才能关闭对话框。
以下是我当前的对话框设置:
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,
),
),
);
},
);
}
1条答案
按热度按时间7tofc5zh1#
showGeneralDialog在我们的页面上创建了一个新页面,因为这个页面我们无法控制我们的页面,这是在新页面后面。
我已经按照您的需要执行代码。您可能需要根据您的要求进行修改。它将帮助你继续前进。我们将使用Stack以及Animated Positioned来满足您的用例。
Stack有两个子组件,第一个是可见列表项,第二个是AnimatedPositioned小部件。
该示例的灵感来自AnimatedPositioned Demo
这是你的代码。