面试题：Flutter Cupertino导航栏的深度自定义

思路：
- 利用Flutter的滚动监听机制来获取页面滚动状态，根据滚动距离来动态改变导航栏的透明度和标题样式。
- 对于导航栏按钮的点击动画，通过自定义按钮组件，使用动画相关的类来实现不同于默认的动画效果。

主要步骤：

滚动监听：

使用NotificationListener或者ScrollController来监听滚动事件。例如，通过ScrollController可以这样做：

final ScrollController _scrollController = ScrollController();
_scrollController.addListener(() {
  // 根据_scrollController.offset来判断滚动距离
  double scrollY = _scrollController.offset;
  // 在这里根据scrollY的值来改变导航栏透明度和标题样式的状态变量
});

导航栏透明度和标题样式动态变化：

自定义一个StatefulWidget作为导航栏。在build方法中，根据滚动监听获取的状态变量来改变CupertinoNavigationBar的透明度和标题样式。

例如，改变透明度可以通过Opacity组件包裹CupertinoNavigationBar：

Opacity(
  opacity: _opacityValue, // _opacityValue是根据滚动距离计算得出的透明度值
  child: CupertinoNavigationBar(
    // 其他导航栏属性设置
    middle: Text(
      _titleText, // _titleText可以根据滚动距离改变样式，比如字体大小等
      style: TextStyle(
        fontSize: _titleFontSize, // _titleFontSize根据滚动距离改变
      ),
    ),
  ),
)

自定义按钮点击动画：

自定义一个按钮组件，例如继承自StatelessWidget。
在按钮的onPressed回调中，使用AnimationController和AnimatedBuilder来实现动画效果。

示例代码：

class CustomAnimatedButton extends StatelessWidget {
  final VoidCallback onPressed;
  const CustomAnimatedButton({required this.onPressed, super.key});
  @override
  Widget build(BuildContext context) {
    final AnimationController _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: SchedulerBinding.instance!.vsync,
    );
    return InkWell(
      onTap: () {
        _controller.forward(from: 0.0);
        onPressed();
      },
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.scale(
            scale: 1 - _controller.value * 0.2, // 简单的缩放动画
            child: child,
          );
        },
        child: const Icon(Icons.add), // 按钮图标
      ),
    );
  }
}

然后在CupertinoNavigationBar的leading或trailing属性中使用这个自定义按钮组件。

涉及到的相关类和方法：
- ScrollController：用于控制和监听滚动视图的滚动位置，addListener方法用于添加滚动监听回调。
- NotificationListener：另一种监听滚动事件的方式，通过监听ScrollNotification来获取滚动信息。
- AnimationController：用于控制动画的播放、停止、反向播放等，forward方法用于正向播放动画。
- AnimatedBuilder：根据动画值构建UI，当动画值改变时会重新构建其内部的UI。
- CupertinoNavigationBar：Flutter中用于构建Cupertino风格导航栏的组件，通过设置其属性来定制导航栏外观。

面试题：Flutter Cupertino导航栏的深度自定义

知识考点

面试题答案