跳至主要内容
内容

桌面上的默认滚动条

内容

摘要

#

ScrollBehavior 现在会自动将 Scrollbar 应用于桌面平台（Mac、Windows 和 Linux）上的滚动小部件。

上下文

#

在此更改之前，开发人员需要手动将 Scrollbar 应用于所有平台上的滚动小部件。这与开发人员在桌面平台上执行 Flutter 应用程序时的预期不符。

现在，继承的 ScrollBehavior 会自动将 Scrollbar 应用于大多数滚动小部件。这类似于 ScrollBehavior 创建 GlowingOverscrollIndicator 的方式。下面列出了不受此行为影响的少数几个小部件。

为了更好地管理和控制此功能，ScrollBehavior 也进行了更新。已弃用用于应用 GlowingOverscrollIndicator 的 buildViewportChrome 方法。相反，ScrollBehavior 现在支持用于装饰视口、buildScrollbar 和 buildOverscrollIndicator 的单独方法。可以覆盖这些方法来控制在可滚动区域周围构建的内容。

此外，ScrollBehavior 子类 MaterialScrollBehavior 和 CupertinoScrollBehavior 已公开，允许开发人员扩展和构建框架中的其他现有 ScrollBehavior。这些子类以前是私有的。

更改说明

#

以前的方法要求开发人员在所有平台上创建自己的 Scrollbar。在某些用例中，需要将 ScrollController 提供给 Scrollbar 和可滚动小部件。

dart
final ScrollController controller = ScrollController();
Scrollbar(
  controller: controller,
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
      return Text('Item $index');
    }
  )
);

ScrollBehavior 现在在桌面执行时自动应用 Scrollbar，并为您处理将 ScrollController 提供给 Scrollbar。

dart
final ScrollController controller = ScrollController();
ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
   return Text('Item $index');
 }
);

框架中的一些小部件不受此自动 Scrollbar 应用的影响。它们是

  • 当 maxLines 为 1 时，EditableText。
  • ListWheelScrollView
  • PageView
  • NestedScrollView

由于这些小部件手动覆盖了继承的 ScrollBehavior 以移除 Scrollbar，因此所有这些小部件现在都具有 scrollBehavior 参数，以便可以提供一个参数来代替覆盖。

此更改在开发过程中没有导致任何测试失败、崩溃或错误消息，但如果在桌面平台上手动添加 Scrollbar，则可能会导致您的应用程序中渲染两个 Scrollbar。

如果在您的应用程序中看到这种情况，可以通过多种方法来控制和配置此功能。

  • 在桌面平台上运行时，移除应用程序中手动应用的 Scrollbar。

  • 扩展 ScrollBehavior、MaterialScrollBehavior 或 CupertinoScrollBehavior 以修改默认行为。

    • 使用您自己的 ScrollBehavior，可以通过设置 MaterialApp.scrollBehavior 或 CupertinoApp.scrollBehavior 将其应用于整个应用程序。
    • 或者，如果您希望仅将其应用于特定小部件，请在相关小部件上方添加一个 ScrollConfiguration，并使用您的自定义 ScrollBehavior。

然后，您的可滚动小部件将继承此行为并反映此行为。

  • 除了创建自己的 ScrollBehavior 之外，更改默认行为的另一种选择是复制现有的 ScrollBehavior，并切换所需的功能。
    • 在您的 widget 树中创建一个 ScrollConfiguration，并使用 copyWith 在当前上下文中提供修改后的现有 ScrollBehavior 副本。

迁移指南

#

移除桌面上的手动 Scrollbar

#

迁移前的代码

dart
final ScrollController controller = ScrollController();
Scrollbar(
  controller: controller,
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
      return Text('Item $index');
    }
  )
);

迁移后的代码

dart
final ScrollController controller = ScrollController();
final Widget child = ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
    return Text('Item $index');
  }
);
// Only manually add a `Scrollbar` when not on desktop platforms.
// Or, see other migrations for changing `ScrollBehavior`.
switch (currentPlatform) {
  case TargetPlatform.linux:
  case TargetPlatform.macOS:
  case TargetPlatform.windows:
    return child;
  case TargetPlatform.android:
  case TargetPlatform.fuchsia:
  case TargetPlatform.iOS:
    return Scrollbar(
      controller: controller,
      child: child;
    );
}

为您的应用程序设置自定义 ScrollBehavior

#

迁移前的代码

dart
// MaterialApps previously had a private ScrollBehavior.
MaterialApp(
  // ...
);

迁移后的代码

dart
// MaterialApps previously had a private ScrollBehavior.
// This is available to extend now.
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods like buildOverscrollIndicator and buildScrollbar
}

// ScrollBehavior can now be configured for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);

为特定小部件设置自定义 ScrollBehavior

#

迁移前的代码

dart
final ScrollController controller = ScrollController();
ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
   return Text('Item $index');
 }
);

迁移后的代码

dart
// MaterialApps previously had a private ScrollBehavior.
// This is available to extend now.
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods like buildOverscrollIndicator and buildScrollbar
}

// ScrollBehavior can be set for a specific widget.
final ScrollController controller = ScrollController();
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
     return Text('Item $index');
    }
  ),
);

复制和修改现有的 ScrollBehavior

#

迁移前的代码

dart
final ScrollController controller = ScrollController();
ListView.builder(
  controller: controller,
  itemBuilder: (BuildContext context, int index) {
   return Text('Item $index');
 }
);

迁移后的代码

dart
// ScrollBehavior can be copied and adjusted.
final ScrollController controller = ScrollController();
ScrollConfiguration(
  behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
     return Text('Item $index');
    }
  ),
);

时间线

#

包含于版本：2.2.0-10.0.pre
稳定版发布：2.2.0

参考

#

API 文档

相关问题

相关 PR

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2024-04-04。 查看源代码 或 报告问题.