概述

#

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