Flutter -在导航过程中创建固定AppBar的最佳实践是什么

laawzig2 于 2023-06-30 发布在 Flutter

关注(0)|答案(2)|浏览(126)

在原生Android开发中，通常使用FragmentTransaction创建导航动画，其中actionBar的位置保持固定（但actionBar的内容发生了变化），而actionBar下面的片段执行过渡动画（如滑入或滑出）。
简单地说，AppBar和主体执行不同的过渡动画。在flutter中，创建这种动画的最佳实践是什么？
目前我可以想到一个解决方案，在Scaffold.body中使用导航，并使用Stream + StreamBuilder启动AppBar重绘。类似于下面的代码。

Scaffold(
    appBar: StreamBuilder<Int>(
        stream: Bloc.of(context).currentFragmentId
        builder: //Some logic to decide which AppBar is appropriate
    ),
    body: Navigator(
        //Navigation between fragments
    ),
)

但这真的很奇怪。那么，有没有最佳实践来做到这一点呢？请告诉我！

flutter

来源：https://stackoverflow.com/questions/53681918/flutter-whats-the-best-practice-to-create-a-fixed-appbar-during-navigation

2条答案

按热度按时间

f2uvfpb91#

好吧，因为目前还没有答案。我将在这里分享我的解决方案，尽管它不是那么优雅。
解决方案是将AppBar Package 在Hero小部件中。由于Scaffold只将PreferedSize小部件作为应用栏，因此需要进行一些自定义。

class HeroAppBar extends StatelessWidget implements PreferredSizeWidget {
//...
  @override
  final Size preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0));
//...
  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: tag,
      child: AppBar(
        //...
      ),
    );
  }
}

并确保您的导航器实现了HeroController。（默认导航器已实施）

赞(0）回复(0）举报 2023-06-30

pinkon5k2#

也许是一个更优雅的解决方案（代码方面），而不是@First_Strike：

import 'package:flutter/material.dart';

extension HeroAppBar on AppBar {
  PreferredSizeWidget toHero(Object tag) {
    return PreferredSize(
      preferredSize: preferredSize,
      child: Hero(tag: tag, child: this),
    );
  }
}

赞(0）回复(0）举报 2023-06-30

我来回答

Flutter -在导航过程中创建固定AppBar的最佳实践是什么

2条答案

相关问题

热门标签

最新问答