如何点击卡在底层的stack item？答案

【问题标题】：How can I click on the stack item stuck in the bottom layer?如何点击卡在底层的stack item？
【发布时间】：2022-11-26 21:38:41
【问题描述】：

下面是我的代码的简单视图。它有两个堆栈元素，都包含可点击的内容。顶部元素覆盖了底部元素，我无法点击底部元素。我应该怎么办？

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Container(
       ///decoration
        height: SizeConfig.screenHeight,
        width: SizeConfig.screenWidth,
        child: Stack(
          children: [
            Container(
              width: SizeConfig.screenWidth,
              height: SizeConfig.screenHeight! * 0.3,
              ///decoration
              ///child: content
              ///THIS IS FIXED CONTENT. LIKE AN 'HEADER'
              ///clickable contents here
            ),
            SingleChildScrollView(
              child: Container(
                margin: EdgeInsets.only(top: SizeConfig.screenHeight! * 0.25),
                constraints: BoxConstraints(
                  minHeight: SizeConfig.screenHeight! * 0.75,
                  maxHeight: double.infinity,
                ),
                ///decoration and child, content
                ///THIS IS CONTENT SIDE FOR PAGE.
                ///this is scrollable and when scrolling up it goes above the header, continues up
                ///looks like DraggableScrollableSheet
                //////clickable contents here
              ),
            )
          ],
        ),
      ),
    ),
  );
}

IgnorePointer、AbsorbPointer 等我试过了，但我无法解决。

【问题讨论】：

标签： flutter dart

【解决方案1】：

你可以用Positioned包裹SingleChildScrollView并将top属性设置为SizeConfig.screenHeight! * 0.25这是顶部元素的高度，像这样：

Stack(
    children: [
      Container(
        width: SizeConfig.screenWidth,
        height: SizeConfig.screenHeight! * 0.3,
      ),
      Positioned(
        top: SizeConfig.screenHeight! * 0.25,
        left: 0,
        right: 0,
        child: SingleChildScrollView(
          child: Container(
            constraints: BoxConstraints(
              minHeight: SizeConfig.screenHeight! * 0.75,
              maxHeight: double.infinity,
            ),
          ),
        ),
      )
    ],
  )

【讨论】：