如何使用可滚动小部件和不可滚动小部件制作堆叠小部件

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