Flutter TwoPane ウィジェット
このレイアウトには 2 つの子ウィンドウがあり、2 つの子ウィンドウを並べて表示することも、上と下に表示することも、1 つのペインに優先順位を付けることもできます。 2 つのペイン ウィジェットの相対サイズは比例して調整でき、デュアルスクリーン デバイスでは境界がヒンジ領域にスナップされます。
[インストール中]
を含むTwoPane
パッケージdual_screenにプロジェクトを依存させるために、次のコマンドを実行できます。
flutter pub add dual_screen
これにより、このような行がパッケージの pubspec.yaml に追加されます (暗黙的な を実行します flutter pub get
)。
dependencies:
dual_screen: ^1.0.2+2
依存関係を pubspec.yaml に手動で追加した場合は、 も実行 flutter pub get
する必要があります。
これで、dart ファイルでウィジェットの TwoPane
使用を開始できます。ここで、依存関係もインポートする必要があります。
import 'package:dual_screen/dual_screen.dart';
折りたたみ型デバイスのレンダリング
アプリが Surface Duo にまたがると、各ウィジェットが画面全体に表示されます。
クロスプラットフォーム レンダリング
アプリがタブレット、デスクトップ アプリ、Web ページなどの大きな画面でレンダリングされると、ペインは表示されますが、サイズは比例して設定されます。
TwoPane API
class TwoPane {
const TwoPane({
Widget startPane,
Widget endPane,
double paneProportion,
TwoPanePriority panePriority,
Axis direction,
TextDirection? textDirection,
VerticalDirection verticalDirection,
EdgeInsets padding,
});
}
ウィジェットの TwoPane
プロパティ:
startPane
- 開始ウィンドウ。左から右のレイアウトの場合は左に、上から下のレイアウトの場合は上部に配置できます。 がstart
で、ヒンジがない場合panePriority
は、これが唯一の表示ウィンドウです。endPane
- 終了ウィンドウ。左から右のレイアウトの場合は右側に、上から下のレイアウトの場合は下部に配置できます。 がend
で、ヒンジがない場合panePriority
は、これが唯一の表示ウィンドウです。paneProportion
- スタート ウィンドウが占める画面の割合。 最後のウィンドウは、残りの領域を引き継ぎます。 値が 0.5 の場合、2 つのペインが等しくなります。 このプロパティは、ヒンジ付きの表示では無視されます。この場合、各ウィンドウは 1 つの画面を引き継ぎます。panePriority
- 開始ウィンドウ、終了ウィンドウ、またはその両方を 1 つだけ表示するかどうか。 このプロパティは、ヒンジ付きの表示では無視され、その場合both
はペインが表示されます。direction
- Flex 方向と同様に、2 つのペインを垂直方向または水平方向に積み重ねるかどうか。 このプロパティは、ヒンジ付きのディスプレイでは無視されます。その場合、方向は垂直ヒンジ用、vertical
水平ヒンジの場合はhorizontal
無視されます。textDirection
- ウィンドウが水平方向にレイアウトされている場合、どちらが左側に配置されているかが決まります。 Flex textDirection と同じように動作しますverticalDirection
- ウィンドウを垂直方向に配置すると、どちらが上部に配置されているかが決まります。 Flex verticalDirection と同じように動作しますpadding
- TwoPane と画面の端の間のパディング。 TwoPane とルート MediaQuery の間に間隔がある場合は、padding
を使用して、2 つのペインをヒンジに正しく配置します。
ヒント
に指定された TwoPane
パラメーターのほとんどは、デバイスにヒンジがある場合は無視されます。 つまり、タブレットやデスクトップなどの大きな画面でレイアウトがどのように動作するかに集中しながら、既定ではデュアルスクリーン フォーム ファクターにうまく適応させることができます。
使用例
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 とウィジェット B の両方に 1 つの画面が表示されます。
- タブレットまたはデスクトップでは、ウィジェット A は画面の 30% を占め、ウィジェット B は残りの 70% を占めます。
- 幅が 500 ピクセル未満の 小さな電話 では、ウィジェット A のみが表示されます。