Flutter AppBar 的 scrolledUnderElevation 属性

Posted on In

在 Flutter 中，AppBar 是一个重要的组件，通常用于显示应用程序的标题、导航按钮、操作菜单等。随着用户界面设计的发展，滚动效果在移动应用中变得越来越常见。scrolledUnderElevation 属性正是为了解决当页面滚动时，AppBar 的阴影效果的控制需求。

比如你使用了某个滚动组件,然后发现了为什么滚动的时候我的 AppBar 变色了呢?
这就是原因: scrolledUnderElevation 属性。

什么是 scrolledUnderElevation?

scrolledUnderElevation 是 Flutter 3.0 引入的 AppBar 属性之一。它用于设置当 AppBar 位于滚动内容顶部且内容向下滚动时的 阴影高度。简单来说，当页面向下滚动且 AppBar 覆盖部分内容时，该属性决定了 AppBar 的阴影深度。

使用场景

在用户滚动列表或长内容时，我们通常希望 AppBar 在不同的滚动状态下显示不同的视觉效果。例如：

  • 初始状态（未滚动）： AppBar 通常是透明的或没有阴影。
  • 滚动状态： 当用户滚动页面并向下查看内容时，AppBar 应该带有一定的阴影，以显示它在内容之上的层次感。

这种设计可以改善用户体验，使界面更清晰且具有层次感。

如何使用 scrolledUnderElevation?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('scrolledUnderElevation 示例'),
          scrolledUnderElevation: 8.0, // 设置滚动时的阴影高度
        ),
        body: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

效果:

  • 默认状态： AppBar 没有阴影。
  • 滚动时： 当页面向下滚动，AppBar 覆盖内容时，会应用指定的阴影高度（此例中为 8.0）。

自定义效果

  • 无阴影（保持平面效果）：scrolledUnderElevation: 0.0
  • 较深阴影（强调层次）：scrolledUnderElevation: 16.0

与其他属性结合使用

  • 滚动监听机制： scrolledUnderElevation 依赖于滚动状态。如果使用自定义滚动视图或复杂的嵌套滚动，需要确保正确使用 ScrollNotification。
  • 平台一致性： 不同平台（iOS 和 Android）可能有不同的默认行为。调整 scrolledUnderElevation 可以优化跨平台用户体验。