Android 颤振中的重叠卡效应

如何在滑动应用条中创建重叠卡效果，如图所示：

我尝试了下面这篇文章，但问题是它使用了堆栈

堆栈{
...
溢出：溢出。可见，
...
}

为了实现这一点，在堆栈中，溢出的部分小部件不接受输入，从而使我的选项卡栏半死不活

---

如何避免这种情况？

完整代码

import 'package:flutter/material.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MenuList(),
    );
  }
}

class MenuList extends StatefulWidget {
  @override
  _MenuListState createState() => _MenuListState();
}


class _MenuListState extends State<MenuList> {
  static const double _appBarBottomBtnPosition =
  24.0; //change this value to position your button vertically

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text(
              'Testing',
              style: TextStyle(color: Colors.red),
            ),
          ),
          SliverAppBar(
            pinned: true,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              titlePadding: EdgeInsets.only(bottom: 25),
              title: Text('Title'),
            ),
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(0.0),
              child: Transform.translate(
                offset: const Offset(0, _appBarBottomBtnPosition),
                child: RaisedButton(
                  shape: StadiumBorder(),
                  child: Text("Click Here"),
                  onPressed: () {},
                ),
              ),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.only(top: _appBarBottomBtnPosition),
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
                (context, index){
                  Color color = Colors.red.withOpacity(1- (index%10)/10);
                  return Container(
                    color: color,
                    alignment: Alignment.center,
                    child: Text("Color: $color"),
                  );
                }
            ),
          ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
Future main（）异步{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主页：MenuList（），
);
}
}
类MenuList扩展StatefulWidget{
@凌驾
_MenuListState createState（）=>\u MenuListState（）；
}
类_MenuListState扩展状态{
静态常数双\u appBarBottomBtnPosition=
24.0；//更改此值以垂直放置按钮
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：自定义滚动视图(
条子：[
滑杆(
标题：正文(
"测试",，
样式：TextStyle（颜色：Colors.red），
),
),
滑杆(
对,，
扩展高度：200.0，
flexibleSpace:FlexibleSpaceBar(
标题：对，
标题添加：仅限边集（底部：25），
标题：文本（“标题”），
),
底部：首选尺寸(
首选大小：常量大小。从高度（0.0），
子：Transform.translate(
偏移量：常量偏移量（0，_appBarBottomBtnPosition），
孩子：升起按钮(
形状：StadiumBorder（），
子：文本（“单击此处”），
按下：（）{}，
),
),
),
),
填缝料(
填充：仅限边缘设置（顶部：_appBarBottomBtnPosition），
),
SliverFixedExtentList(
项目范围：50，
代表：SliverChildBuilderDelegate(
（上下文、索引）{
颜色=颜色。红色。不透明度（1-（索引%10）/10）；
返回容器(
颜色：颜色，
对齐：对齐.center，
子项：文本（“颜色：$Color”），
);
}
),
),
],
),
);
}
}

也许可以尝试

溢出框

或

大小溢出框

否。我使用了大小溢出框，但它仍然不接受任何输入。请检查我的答案。它可能会帮助您了解您的答案，但即使在使用

首选大小

和

转换.翻译

后，位于外部的部分也没有响应。