flutter - How to send Pointer events to Lower children in Stack
问题描述
As the title says, when using Stacks in flutter, only the "last" rendered children can be interacted with if that child overlaps all other children. In my application i have a ListWheelScrollView which is contained in a Stack, and afterwards "styled" with gradients that lie on top of the ScrollView.
This makes more sense when given an example.
There is an existing issue on almost this exact situation here: Flutter- GestureDetector not working with containers in stack
However, it assumes you are working with a gesture detector.
Stack(children: <Widget>[
Container(
height: 250,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: _style.fontSize * 1.5,
child: ListWheelScrollView.useDelegate(
controller: fixedExtentScrollController,
physics: FixedExtentScrollPhysics(),
itemExtent: _style.fontSize * 1.5,
childDelegate: ListWheelChildLoopingListDelegate(
children: hours
.map((hour) => hour < 10
? Text(
"0$hour",
style: _style,
)
: Text(
"$hour",
style: _style,
))
.toList())),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
":",
style: _style,
),
SizedBox(
height: 25,
)
],
),
Container(
width: _style.fontSize * 1.5,
child: ListWheelScrollView.useDelegate(
physics: FixedExtentScrollPhysics(),
itemExtent: _style.fontSize * 1.5,
childDelegate: ListWheelChildLoopingListDelegate(
children: minutes
.map((minute) => minute < 10
? Text(
"0$minute",
style: _style,
)
: Text(
"$minute",
style: _style,
))
.toList())),
),
],
),
),
Container(
height: 250,
child: Column(
children: <Widget>[
Container(
height: 75.3,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.white.withOpacity(0.1),
Theme.of(context).scaffoldBackgroundColor
])),
),
Center(
child: Container(
height: 83.3,
width: 220,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFc0ccd4), width: 5),
))),
],
),
)
]),
The design works perfectly as expected, however i am no longer able of scrolling since the containers are on top of the scroll widget.
Any workarounds?
解决方案
You only need to wrap all of your widgets that are not supposed to receive tap events in IgnorePointer
widgets.
In the comments it was said that you should use AbsorbPointer
, however, you do not want to catch tap events on the ignoring widgets.
In your case, you want to wrap your upper, upper as in top of the stack, Container
in an IgnorePointer
widget:
Stack(
children: <Widget>[
Container(...),
IgnorePointer(
child: Container(...),
),
],
)
推荐阅读
- java - 如何在 Android 的 EditText 中移动光标
- tensorflow2.0 - 将输入张量从 CPU 复制到 GPU 以运行 GatherVe 失败:Dst 张量未初始化。[操作:GatherV2]
- reactjs - 自定义 AmplifySignOut 的布局
- javascript - 如何在javascript中按id嵌套数据过滤和分组?
- c# - 如何在模型 csharp 中使用 DynamicObject
- html - 展开元素“向上”而不是“向下”
- laravel - 是否可以在 Laravel Nova 中自定义右上角的用户菜单?
- python - 如何在 matplotlib 图中使用外部颜色图(例如 plotly)?
- api - 如何制作 POST API URL
- json - 带有流按钮的 SharePoint 列表列上的条件格式