Flutter TwoPane 小工具

此版面配置有兩個子窗格，可以並排顯示、上方和下方，或可以排定單一窗格的優先順序。 兩個窗格小工具的相對大小可以按比例調整，而雙螢幕裝置上的界限會貼齊轉軸區域。

安裝

若要讓您的專案相依 于dual_screen，您可以執行包含 的 TwoPane 套件：

flutter pub add dual_screen

這會將如下所示的行新增至套件的 pubspec.yaml (，並執行隱含 flutter pub get) ：

dependencies:
  dual_screen: ^1.0.2+2

如果您手動將相依性新增至 pubspec.yaml，則也需要執行 flutter pub get 。

您現在可以開始在您的工具檔案中使用 TwoPane 小工具，您也需要匯入相依性：

import 'package:dual_screen/dual_screen.dart';

可折迭裝置轉譯

當應用程式跨越 Surface Duo 時，每個小工具都會填滿整個畫面：

跨平臺轉譯

當應用程式在較大的螢幕上轉譯時，例如平板電腦、傳統型應用程式或網頁，會顯示窗格，但其大小會按比例設定：

TwoPane API

class TwoPane {
  const TwoPane({
    Widget startPane,
    Widget endPane,
    double paneProportion,
    TwoPanePriority panePriority,
    Axis direction,
    TextDirection? textDirection,
    VerticalDirection verticalDirection,
    EdgeInsets padding,
  });
}

TwoPane小工具的屬性：

• startPane - [開始] 窗格，可位於左至右版面配置左側，或位於頂端的頂端以取得由上至下版面配置。 如果 為 panePrioritystart 且沒有轉軸，則這是唯一可見的窗格。
• endPane - 結束窗格，可位於由左至右的版面配置右邊，或位於由上至下版面配置底部。 如果 panePriority 為 end ，而且沒有轉軸，則這是唯一可見的窗格。
• paneProportion - 開始窗格所佔用畫面的比例。 結束窗格會接管其餘的空間。 值為 0.5 會讓兩個窗格相等。 使用轉軸顯示時會忽略這個屬性，在此情況下，每個窗格都會接管一個畫面。
• panePriority - 是否只顯示一個開始窗格、結束窗格或兩者。 使用轉軸顯示時會忽略這個屬性，在此情況下 both 會顯示窗格。
• direction - 是否垂直或水準堆疊兩個窗格，類似于 Flex 方向。 使用轉軸顯示時會忽略這個屬性，在此情況下方向是 horizontal 垂直轉軸和 vertical 水準轉軸。
• textDirection - 水準配置窗格時，這會決定左側的窗格。 行為與Flex textDirection相同
• verticalDirection - 當窗格垂直配置時，這會決定哪一個窗格位於頂端。 行為與Flex verticalDirection相同
• padding - TwoPane 與螢幕邊緣之間的邊框間距。 如果 TwoPane 與根 MediaQuery 之間有間距， padding 則會用來正確地將兩個窗格對齊轉軸。

使用範例

Widget build(BuildContext context) {
  return TwoPane(
    startPane: BlueA(),
    endPane: OrangeB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.start,
  );
}

此範例程式碼會在本文開頭產生結果：

• 在 Surface Duo上，小工具 A 和 Widget B 都會取得一個畫面。
• 在 平板電腦 或 桌上型電腦上，小工具 A 需要 30% 的螢幕，而小工具 B 會採用剩餘的 70%。
• 在小於 500 個邏輯圖元寬的 小型手機上 ，只會顯示小工具 A。