Skip to main content
Contents

弃用 `ButtonBar`，推荐使用 `OverflowBar`

Contents

摘要

#

ButtonBar 组件已被弃用，推荐使用更高效的 OverflowBar 组件。因此，ThemeData.buttonBarTheme 和 ButtonBarTheme 也被弃用。

背景

#

ButtonBar 组件将子组件水平排列，空间不足时则垂直排列。OverflowBar 组件的功能相同，但它不依赖于 Material 库，而是属于核心 widgets.dart 库的一部分。

变更说明

#
  • 将 ButtonBar 组件替换为 OverflowBar 组件。
  • 默认情况下，ButtonBar 将其子组件对齐到布局的末尾，而 OverflowBar 将其子组件对齐到开头。要将 OverflowBar 子组件对齐到末尾，请将 OverflowBar.alignment 属性设置为 MainAxisAlignment.end。
  • ButtonBar.buttonPadding 用于设置按钮之间的间距和按钮周围的填充。将其替换为 OverflowBar.spacing，用于设置按钮之间的间距。使用 Padding 组件包装 OverflowBar 组件以提供按钮周围的填充。
  • 将 ButtonBar.overflowButtonSpacing 替换为 OverflowBar.overflowSpacing，用于在空间不足导致按钮垂直排列时设置按钮之间的间距。
  • 如果已指定，请从 ThemeData 中移除 ButtonBarThemeData。

迁移指南

#

将 ButtonBar 替换为 OverflowBar，如有必要，覆盖默认对齐方式，将 ButtonBar.buttonPadding 替换为 Padding 组件和 OverflowBar.spacing 以设置按钮之间和周围的间距，并将 ButtonBar.overflowButtonSpacing 替换为 OverflowBar.overflowSpacing 以设置空间不足导致按钮垂直排列时的按钮间距。

替换前：

dart
ButtonBar(
  buttonPadding: const EdgeInsets.all(8.0),
  overflowButtonSpacing: 8.0,
  children: <Widget>[
    TextButton(child: const Text('Button 1'), onPressed: () {}),
    TextButton(child: const Text('Button 2'), onPressed: () {}),
    TextButton(child: const Text('Button 3'), onPressed: () {}),
  ],
),

替换后：

dart
Padding(
  padding: const EdgeInsets.all(8.0),
  child: OverflowBar(
    alignment: MainAxisAlignment.end,
    spacing: 8.0,
    overflowSpacing: 8.0,
    children: <Widget>[
      TextButton(child: const Text('Button 1'), onPressed: () {}),
      TextButton(child: const Text('Button 2'), onPressed: () {}),
      TextButton(child: const Text('Button 3'), onPressed: () {}),
    ],
  ),
),

如果您指定了 ThemeData.buttonBarTheme，请将其移除并使用 OverflowBar 组件属性来自定义 OverflowBar 组件。

替换前：

dart
ThemeData(
  buttonBarTheme: ButtonBarThemeData(
    alignment: MainAxisAlignment.center,
  ),
),

替换后：

dart
ThemeData(
  // ...
),

如果您使用 ButtonBarTheme 组件，请将其移除并使用 OverflowBar 组件属性来自定义 OverflowBar 组件。

替换前：

dart
ButtonBarTheme(
  data: ButtonBarThemeData(
    alignment: MainAxisAlignment.center,
  ),
  child: ButtonBar(
    children: <Widget>[
      // ...
    ],
  ),
),

替换后：

dart
OverflowBar(
  alignment: MainAxisAlignment.center,
  children: <Widget>[
    // ...
  ],
),

时间线

#

集成版本：3.22.0-2.0.pre
稳定版本：3.24.0

参考

#

API 文档：

相关问题：

相关 PR：

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