棄用 `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

相關問題

• 問題 #127955

相關 PR

• 棄用 ButtonBar、ButtonBarThemeData 和 ThemeData.buttonBarTheme

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-08-06。 檢視原始碼 或 回報問題。