弃用 `ButtonBar`，改用 `OverflowBar`

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 以设置按钮在水平空间不足时垂直排列时的间距。

之前

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: () {}),
  ],
),

之后

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 组件。

之前

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

之后

ThemeData(
  // ...
),

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

之前

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

之后

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

包含于版本：3.22.0-2.0.pre
稳定版发布：3.24.0

API 文档

• OverflowBar
• ButtonBar

相关问题

• Issue #127955

相关 PR

• 弃用 ButtonBar、ButtonBarThemeData 和 ThemeData.buttonBarTheme

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