flutter - 如何在 Flutter 的 SliverAppBar 的 flexibleSpace 中移动 Action 和标题？

Question

我正在尝试在 Flutter 中实现类似的东西。

https://a.imge.to/2019/08/22/mgrjU.png

但目前我还停留在这个问题上。

https://a.imge.to/2019/08/22/mgB62.png

操作按钮固定在 UI 的顶部，不会随文本移动。有什么办法可以让他们在 Sliver 中倒下吗？

我一直无法找到一种方法来向 SliverAppBar 的 flexibleSpace 部分添加操作

SliverAppBar(
      floating: false,
      pinned: true,
      expandedHeight: 150.0,
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      flexibleSpace: const FlexibleSpaceBar(
        title: Text("User Status", textAlign: TextAlign.justify,),
        titlePadding: EdgeInsets.all(15.0),
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.refresh),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {},
        )
      ],
    );

我希望操作按钮与标题文本一起下降。当用户滚动时，按钮应随标题文本移动。

Answer 1

我不确定你是怎么做到的，试试这个有效的代码。

输出:

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          floating: false,
          pinned: true,
          expandedHeight: 150.0,
          backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
          flexibleSpace: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                width: 200,
                child: FlexibleSpaceBar(title: Text("User Status")),
              ),
              Spacer(),
              IconButton(
                icon: Icon(Icons.refresh),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              )
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate((_, i) {
            return ListTile(title: Text("Item ${i}"));
          }, childCount: 20),
        ),
      ],
    ),
  );
}