高度 AppBar 颤动 - Dart

简介

在 Dart 编程语言中，高度 AppBar 颤动是一种常见的 UI 动画效果，用于为应用程序添加视觉上的交互性和吸引力。当用户与应用程序进行交互时，AppBar 在垂直方向上会发生细微的颤动，以增强应用程序的交互体验。

本文将介绍如何在 Dart 中实现高度 AppBar 颤动效果，并提供相关代码示例以供参考。

实现步骤

以下是实现高度 AppBar 颤动效果的步骤：

1. 导入相关库和包：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

2. 创建一个 StatefulWidget，并定义两个变量 appBarHeight 和 scrollController：

class ShakingAppBar extends StatefulWidget {
  @override
  _ShakingAppBarState createState() => _ShakingAppBarState();
}

class _ShakingAppBarState extends State<ShakingAppBar> {
  double appBarHeight = 56.0;
  ScrollController scrollController;
  ...
}

3. 在 initState 方法中初始化 scrollController，并添加监听器以处理滚动事件：

@override
void initState() {
  super.initState();
  scrollController = ScrollController();
  scrollController.addListener(() {
    setState(() {
      // 根据滚动的距离修改 appBarHeight 的值
      appBarHeight = 56.0 - scrollController.offset;
    });
  });
}

4. 在dispose 方法中释放 scrollController：

@override
void dispose() {
  scrollController.dispose();
  super.dispose();
}

5. 在 build 方法中创建页面布局，并将 appBarHeight 作为 AppBar 的高度：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(appBarHeight),
      child: AppBar(
        title: Text('Shaking AppBar'),
        ...
      ),
    ),
    body: ListView.builder(
      controller: scrollController,
      ...
    ),
  );
}

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class ShakingAppBar extends StatefulWidget {
  @override
  _ShakingAppBarState createState() => _ShakingAppBarState();
}

class _ShakingAppBarState extends State<ShakingAppBar> {
  double appBarHeight = 56.0;
  ScrollController scrollController;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(() {
      setState(() {
        appBarHeight = 100.0 - scrollController.offset;
      });
    });
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(appBarHeight),
        child: AppBar(
          title: Text('Shaking AppBar'),
        ),
      ),
      body: ListView.builder(
        controller: scrollController,
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: ShakingAppBar(),
  ));
}

以上是一个简单的实现高度 AppBar 颤动效果的示例代码。你可以根据自己的需求和喜好进行修改和优化，以实现更丰富的交互体验。

希望这篇介绍对你在 Dart 中实现高度 AppBar 颤动效果有所帮助！