带有动画定位图像的 Flutter 动画 SliverAppBar答案

【问题标题】：Flutter animated SliverAppBar with Animated Positioned Image带有动画定位图像的 Flutter 动画 SliverAppBar
【发布时间】：2023-01-22 11:48:30
【问题描述】：

我正在尝试用我的appBar 复制这个动画：

我知道我可以使用 SliverAppBar 并简单地为 textSize 设置动画。但是我将如何实现图像的逻辑呢？它向右移动并略微收缩。

这是我对 text 的看法：

  SliverAppBar(
    expandedHeight: 200,
    flexibleSpace: FlexibleSpaceBar(
      title: Text('Test', textScaleFactor: 1),
    ),
    pinned: true,
  ),

知道我该如何解决这个问题吗？

【问题讨论】：

试试SliverPersitentHeader
@pskink 我在 SO 上找到了 this 答案，但是动画有点不同。我希望我的小部件能够根据它们的位置和大小进行动画处理。并不是说另一个小部件只是出现

标签： flutter dart appbar flutter-sliverappbar

【解决方案1】：

你玩SliverPersistentHeaderDelegate

class AppSliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final t = shrinkOffset / maxExtent;
    return Stack(
      children: [
        Align(
          alignment: Alignment(0, .7), //perhaps it should also use lerp
          child: Text(
            "Title",
            style: TextStyle(fontSize: ui.lerpDouble(34, 14, t)),
          ),
        ),
        Align(
          alignment:
              Alignment.lerp(Alignment.topCenter, Alignment.topRight, t)!,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.settings),
          ),
        )
      ],
    );
  }

  @override
  double get maxExtent => 200;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

并用于

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              pinned: true,
              delegate: AppSliverPersistentHeaderDelegate(),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 12222,
                color: Colors.red,
              ),
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

您可以尝试使用 flutter 已经提供的 AnimatedPositioned 类。检查此链接

https://api.flutter.dev/flutter/widgets/AnimatedPositioned-class.html

您可以使用它并根据特定操作更改位置和大小。

【讨论】：