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

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

1 个答案: