我如何在SliverAppBar的底部添加一个按钮并使它重叠在ExtentList上？

Question

我已经尝试在SliverAppBar bottom属性中将Column（容器放在其中）作为按钮，但是它不能与ExtentList重叠，只是溢出了底部边距。我想像Spotify App一样使它重叠。

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

Answer 1

尝试一下

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

class _MenuListState extends State<MenuList> {
  static const double _appBarBottomHeight = 54.0; //which is default toolbar height
  static const double _appBarBottomBtnOverflow = 30.0; //change this value to position your button vertically

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            floating: 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(
              preferredSize: const Size.fromHeight(_appBarBottomHeight), //which default toolbar height
              child: Stack(children: <Widget>[
                Text(
                  'Test',
                  style: TextStyle(),
                ),
                Transform.translate(
                  offset: const Offset(0, _appBarBottomBtnOverflow), //change this value to change position your button
                  child: Container(
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(109, 76, 65, 1),
                      borderRadius: BorderRadius.all(
                        Radius.circular(20),
                      ),
                    ),
                    height: 54,
                    width: 100,
                  ),
                ),
              ]),
            ),
          ),
          SliverPadding(padding: EdgeInsets.only(top: _appBarBottomBtnOverflow)),
          SliverFixedExtentList(
            //extentlist
          ),
        ],
      ),
    );
  }
}