如何在 SliverAppBar 底部添加一个 Button 并使其在 ExtentList 上重叠？答案

【问题标题】：How can I add a Button on bottom of SliverAppBar and make it overlap on ExtentList?如何在 SliverAppBar 底部添加一个 Button 并使其在 ExtentList 上重叠？
【发布时间】：2020-04-11 16:03:44
【问题描述】：

我尝试在 SliverAppBar 底部属性中放置一个 Column(a Container inside) 作为按钮，但它不能与 ExtentList 重叠，只会溢出底部边距。我想让它像 Spotify 应用一样重叠。

这是 Spotify 示例： https://imgur.com/VrZRY4c

这是我尝试过的： https://imgur.com/4bNZw8j

我的代码：

class _MenuListState extends State<MenuList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: EdgeInsets.only(top: 10, bottom: 10),
            sliver: SliverAppBar(
              pinned: true,
              expandedHeight: 300,
              title: Text(
                'Testing',
                style: TextStyle(color: Colors.red),
              ),
              flexibleSpace: FlexibleSpaceBar(
                title: Text(''),
                background: Image.asset(
                  'images/w.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              bottom: PreferredSize(
                child: Column(children: <Widget>[
                  Text(
                    'test',
                    style: TextStyle(),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(109, 76, 65, 1),
                      borderRadius: BorderRadius.all(
                        Radius.circular(20),
                      ),
                    ),
                    height: 54,
                    width: 100,
                  ),
                ]),
              ),
            ),
          ),
          SliverFixedExtentList(//extentlist)
        ],
      ),
    );
  }
}

【问题讨论】：

展示你的尝试和结果。
感谢添加评论、代码和结果。
我无法通过这段代码得到溢出错误。
你发生了什么错误？

标签： flutter flutter-layout

【解决方案1】：

试试这个

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
          ),
        ],
      ),
    );
  }
}

【讨论】：

非常感谢！！这正是我所需要的。Transform Widget 真的很有用，我以前不知道，看来我需要潜入 Transform。
两个 SliverAppBar ！拥有那两个 SliverAppBar 不是很糟糕吗？我认为最好使用 SliverPersistentHeader developpaper.com/…
需要注意的一点，在我的情况下，有时按钮在单击时没有响应...如果您有相同的问题或解决方案，请发表评论

【解决方案2】：

@Crazy Lazy Cat 提供的答案有效.. 但如果您担心使用 2 个 SliverAppBar 。您可以用下面的代码替换 2 SliverAppBar

 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: () {},
                ),
              ),
            ),
          ),

【讨论】：