flutter - 如何使用可滚动的小部件和不可滚动的小部件来制作堆叠式小部件

Question

我想做一个屏幕，其中有一个可滚动的小部件和一个不可滚动的小部件，其中不可滚动的小部件将在dart flutter中的可滚动小部件的顶部。
我已经尝试过以下方法:伪代码:

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行为