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
- 왼쪽에서 오른쪽 레이아웃의 경우 왼쪽 또는 위쪽에서 아래쪽 레이아웃의 위쪽에 배치할 수 있는 시작 창입니다. 가start
이고 힌지(hinge)가 없으면panePriority
표시되는 창만 표시됩니다.endPane
- 왼쪽에서 오른쪽 레이아웃의 경우 오른쪽 또는 위쪽에서 아래쪽 레이아웃의 아래쪽에 배치할 수 있는 끝 창입니다. 가end
이고 힌지(hinge)가 없으면panePriority
표시되는 유일한 창입니다.paneProportion
- 시작 창에서 차지하는 화면의 비율입니다. 끝 창이 나머지 공간을 차지합니다. 값이 0.5이면 두 창이 같아집니다. 이 속성은 힌지가 있는 디스플레이에 대해 무시됩니다. 이 경우 각 창이 하나의 화면을 차지합니다.panePriority
- 시작 창, 끝 창 또는 둘 다만 표시할지 여부입니다. 이 속성은 힌지가 있는 디스플레이에 대해 무시됩니다. 이 경우both
창이 표시됩니다.direction
- 플렉스 방향과 유사하게 두 창을 세로 또는 가로로 쌓을지 여부입니다. 이 속성은 힌지가 있는 디스플레이에 대해 무시됩니다. 이 경우 방향은 세로 힌지 및vertical
가로 힌지에 대한 방향입니다horizontal
.textDirection
- 창이 가로로 배치되면 왼쪽에 있는 창이 결정됩니다. Flex textDirection과 동일하게 동작합니다.verticalDirection
- 창이 세로로 배치되면 위쪽에 있는 창이 결정됩니다. Flex verticalDirection과 동일하게 동작합니다.padding
- TwoPane과 화면 가장자리 사이의 안쪽 여백입니다. TwoPane과 루트 MediaQuerypadding
사이에 간격이 있는 경우 는 두 창을 힌지에 올바르게 맞추는 데 사용됩니다.
팁
에 제공된 TwoPane
대부분의 매개 변수는 디바이스에 힌지(hinge)가 있을 때 무시됩니다. 즉, 태블릿 및 데스크톱과 같은 대형 화면에서 레이아웃이 작동하는 방식에 중점을 두면서 기본적으로 이중 화면 폼 팩터에 잘 적응할 수 있습니다.
사용 예제
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는 모두 하나의 화면을 사용합니다.
- 태블릿 또는 데스크톱에서 위젯 A는 화면의 30%를 차지하고 위젯 B는 나머지 70%를 차지합니다.
- 너비가 500개 미만인 작은 휴대폰 에서는 위젯 A만 표시됩니다.