Flutter 我怎样才能在SliverAppBar的底部添加一个按钮，并使其在ExtentList上重叠？

我尝试将一列（其中的一个容器）作为按钮放在SliveAppBar底部属性中，但它不能与ExtentList重叠，只能溢出底部边距。 我想让它像Spotify应用程序一样重叠

这是Spotify示例：

这就是我尝试过的：

我的代码：

class\u MenuListState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：自定义滚动视图(
条子：[
填缝料(
填充：仅限边缘设置（顶部：10，底部：10），
银条：银条(
对,，
扩展高度：300，
标题：正文(
"测试",，
样式：TextStyle（颜色：Colors.red），
),
flexibleSpace:FlexibleSpaceBar(
标题：文本（“”），
背景：Image.asset(
“图片/w.jpg”，
适合：BoxFit.cover，
),
),
底部：首选尺寸(
子项：列（子项：[
正文(
"测试",，
样式：TextStyle（），
),
容器(
装饰：盒子装饰(
颜色：颜色。来自RGBO（109,76,65,1），
borderRadius:borderRadius.all(
圆形半径（20），
),
),
身高：54，
宽度：100，
),
]),
),
),
),
SliverFixedExtentList（//extentlist）
],
),
);
}
}

试试这个

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: 300.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              titlePadding: EdgeInsets.only(bottom: 25),
              title: Text('Title'),
              background: Image.asset(
                'images/w.jpg',
                fit: BoxFit.cover,
              ),
            ),
            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(
              //extentlist
          ),
        ],
      ),
    );
  }
}

class\u MenuListState扩展状态{
静态常数双\u appBarBottomBtnPosition=
24.0；//更改此值以垂直放置按钮
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：自定义滚动视图(
条子：[
滑杆(
标题：正文(
"测试",，
样式：TextStyle（颜色：Colors.red），
),
),
滑杆(
对,，
扩展高度：300.0，
flexibleSpace:FlexibleSpaceBar(
标题：对，
标题添加：仅限边集（底部：25），
标题：文本（“标题”），
背景：Image.asset(
“图片/w.jpg”，
适合：BoxFit.cover，
),
),
底部：首选尺寸(
首选大小：常量大小。从高度（0.0），
子：Transform.translate(
偏移量：常量偏移量（0，_appBarBottomBtnPosition），
孩子：升起按钮(
形状：StadiumBorder（），
子：文本（“单击此处”），
按下：（）{}，
),
),
),
),
填缝料(
填充：仅限边缘设置（顶部：_appBarBottomBtnPosition），
),
SliverFixedExtentList(
//扩展列表
),
],
),
);
}
}

由@Crazy Lazy Cat提供的答案很有效。。但是如果你担心使用2个滑动条。您可以使用下面的代码替换2个滑动条

 SliverAppBar(
            expandedHeight: 500.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                'images/w.jpg',
                fit: BoxFit.cover,
              ),
            ),
            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: () {},
                ),
              ),
            ),
          ),

---

显示您的try and result.thx以获取注释、添加的代码和结果。我无法通过此代码获得溢出错误。您身上发生了什么类型的错误？非常感谢！！这正是我需要的。Transform Widget非常有用，我以前不知道，看起来我需要深入Transform。两个滑动应用条！有两个滑杆不是很糟糕吗？我认为最好使用SliverPersistentHeader有一点需要注意，在我的情况下，有时单击按钮时没有响应……如果您有相同的问题或解决方案，请发表评论