概述

#

ButtonBar 组件已被废弃,推荐使用更高效的 OverflowBar 组件。因此,ThemeData.buttonBarThemeButtonBarTheme 也已被废弃。

背景

#

ButtonBar 组件会将其子组件在行中布局,如果水平空间不足,则在列中布局。OverflowBar 组件也执行相同的操作,但它不依赖于 Material 库,并且是核心 widgets.dart 库的一部分。

变更说明

#
  • ButtonBar 组件替换为 OverflowBar 组件。
  • 默认情况下,ButtonBar 将其子组件对齐到布局的末尾,而 OverflowBar 将其子组件对齐到开头。要将 OverflowBar 子组件对齐到末尾,请将 OverflowBar.alignment 属性设置为 MainAxisAlignment.end
  • ButtonBar.buttonPadding 提供按钮之间的间距和按钮周围的内边距。将其替换为 OverflowBar.spacing,后者提供按钮之间的间距。将 OverflowBar 组件用 Padding 组件包裹,以提供按钮周围的内边距。
  • 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