Flutter中如何实现自定义appbar布局滚动效果答案

【问题标题】：How to achieve custom appbar layout scrollable effect in flutterFlutter中如何实现自定义appbar布局滚动效果
【发布时间】：2020-05-02 23:53:12
【问题描述】：

我尝试在 CustomScrollView 中使用 Flutter SliverAppBar，但这并不能如我所愿。

【问题讨论】：

请添加您尝试过的内容。
您是希望应用栏缩小然后向上滚动，还是缩小后始终保持可见？
@avinash 我正在尝试实现类似于您的图像显示的功能，您能否使其工作？你是怎么做到的？

标签： flutter dart flutter-layout flutter-sliverappbar

【解决方案1】：

要使用SliverAppBar 并拥有一个缩小并固定在顶部的应用栏，您可以按照以下示例进行操作：

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200.0,
        floating: true,
        snap: true,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('SliverAppBar 1'),
          centerTitle: true,
          background: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('text 1'),
              Text('text 2'),
              Text('text 3'),
            ],
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.greenAccent,
              child: Text('SliverList item'),
              height: 60,
              margin: EdgeInsets.all(4),
            );
          },
          childCount: 20
        ),
      ),
    ],
  )
);

【讨论】：

太棒了！但它不是在翻译圆形图像
我知道那是在你的截图中，但你的问题是关于可滚动效果和保持应用栏可见。在隐藏应用栏的同时让内部小部件水平移动是可能的，但这是一个不同的问题，需要更广泛的解决方案。如果它解决了您的问题，我建议您将答案标记为正确，并根据 SliverAppBar 的移动打开一个特定于小部件翻译的新问题。
无论如何，我对这个解决方案也很满意。
我见过一位同事的解决方案与您想要做的类似。所以我知道这是可能的。打开一个特定的新问题，如果不是我，我相信有人会有答案。我很高兴能帮上忙。