應用欄過渡 Animation (Flutter)

Question

我是 Flutter 應用程序開發的初學者，我想知道如何制作像這些圖片這樣的 UI 的應用程序 我想制作一個（一個）用戶界面，當我滾動頁面時，應用欄可以改變自己的顏色或改變內容。

有人可以讓我知道我必須使用什么小部件或顯示准確的步驟（代碼）嗎？

非常感謝

Answer 1

我認為您在談論視差行為。 Flutter 已經為此提供了一個小部件。 您可以使用 SliverAppbar。

SliverAppBar

SliverAppBar(expandHeight: 150.0, flexibleSpace: const FlexibleSpaceBar(title: Text('Available seat'), ), actions: [ IconButton( icon: const Icon(Icons.add_circle), tooltip: 'Add new entry', onPressed: () { /*... */ }, ), ] )

Answer 2

SliverAppBar是 go 用於那種動態應用欄的方式，但如果有人登陸這里並且只需要一個固定的高度欄，您可以使用AnimatedSwitcher僅更改內部的單個組件，或者如果您更容易重建一個新的AppBar ，您可以將這個簡單的包裝器與builder function 一起使用，返回相應的 AppBar，同時將Scaffold的 appBar 字段設置為此實例：

class AnimatedAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Widget Function() builder;
  final Widget Function(Widget child, Animation<double> animation)?
      transitionBuilder;
  final double height;

  const AnimatedAppBar(
      {Key? key,
      required this.builder,
      this.transitionBuilder,
      this.height = kToolbarHeight})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      transitionBuilder:
          transitionBuilder ?? AnimatedSwitcher.defaultTransitionBuilder,
      duration: const Duration(milliseconds: 300),
      child: builder(),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(height);
}

如果您想要交叉淡入淡出以外的東西，這仍然可以讓您在玩轉場時有一點靈活性。 例如，如果需要，您還可以根據您提供的transitionBuilder中的孩子的Key來調節它。