如何使用可滚动小部件和不可滚动小部件进行堆叠小部件

Question

我想做一个屏幕，其中有一个可滚动的小部件和一个不可滚动的小部件，其中不可滚动的小部件将位于飞镖颤振中的可滚动小部件的顶部。

我尝试过这个东西：伪代码：

Stacked(
children: <Widget>[
SingleChildScrollView(
child: // scrollable widget 
),
Align(
alignment: Alignment.bottomCenter,
child: // non-scrollable widget eg container
),
]
)

但是可滚动小部件没有滚动。此实现没有错误，但滚动不起作用

Answer 1

这里的问题是不可滚动的小部件位于可滚动小部件的顶部，并且倾向于阻止所有触摸事件到底部小部件(可滚动的小部件(。

您有几种方法可以解决此问题，第一种方法是将不可滚动的小部件包装在IgnorePointer

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(children: [
ListView.builder(itemBuilder: (context, index) {
return Text("item ${index + 1}");
}),
IgnorePointer(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(color: Colors.red.withAlpha(50))),
),
]));
}

但这将阻止重叠小部件上的任何输入

如果你想实现相同的目的，但能够与重叠的小部件进行交互，你可能想用一个GestureDetector更改 IgnorePointer ，并玩弄行为 https://api.flutter.dev/flutter/widgets/GestureDetector/GestureDetector.html