우선, 나는 당신의 투쟁을 이해할 수 있기 때문에 당신을 도울 수있어서 기쁘다 고 말하고 싶습니다-혼자서도 그것을 이해하면 이점이 있습니다 (문서는 훌륭합니다).
CustomSingleChildLayout내가 CustomMultiChildLayout당신에게 설명 하고 나면 무엇이 분명 할까요?
이 위젯의 요점은이 위젯에 전달하는 자식을 단일 함수 로 레이아웃 할 수있게합니다 . 즉, 위치와 크기는 서로 의존 할 수 있습니다Stack . 예를 들어 미리 작성된 위젯을 사용하여 달성 할 수없는 것 입니다.
CustomMultiChildLayout(
children: [
// Widgets you want to layout in a customized manner
],
)
이제 자녀 배치를 시작하기 전에 취해야 할 두 가지 단계 가 더 있습니다.
- 당신이 전달하는 모든 아이
children는 a이어야 LayoutId하고 당신은 당신이 실제로 그 아이에게 보여주고 싶은 위젯을 전달합니다 LayoutId. 은 id위젯을 고유하게 식별하여 배치 할 때 액세스 가능하게합니다.
CustomMultiChildLayout(
children: [
LayoutId(
id: 1, // The id can be anything, i.e. any Object, also an enum value.
child: Text('Widget one'), // This is the widget you actually want to show.
),
LayoutId(
id: 2, // You will need to refer to that id when laying out your children.
child: Text('Widget two'),
),
],
)
MultiChildLayoutDelegate레이아웃 부분을 처리 하는 서브 클래스 를 작성해야합니다 . 이 문서는 매우 정교합니다.
class YourLayoutDelegate extends MultiChildLayoutDelegate {
// You can pass any parameters to this class because you will instantiate your delegate
// in the build function where you place your CustomMultiChildLayout.
// I will use an Offset for this simple example.
YourLayoutDelegate({this.position});
final Offset position;
}
이제 모든 설정이 완료되었으며 실제 레이아웃 구현을 시작할 수 있습니다. 이를 위해 사용할 수있는 세 가지 방법이 있습니다.
hasChild을 통해 특정 ID ( LayoutId? 기억 )가에 전달 되었는지 여부를 확인할 수 있습니다 ( children예 : 해당 ID의 자식이있는 경우).
layoutChild, 정확히 한 번 제공되는 모든 id , 모든 자식에 대해 전화해야하며 그 자식의 이름을 알려줍니다 .Size
positionChild위치를 Offset(0, 0)사용자가 지정한 오프셋 으로 변경할 수 있습니다 .
나는 개념이 지금 분명해야한다고 생각하므로 예제에 대리자를 구현하는 방법을 설명 할 것입니다 CustomMultiChildLayout.
class YourLayoutDelegate extends MultiChildLayoutDelegate {
YourLayoutDelegate({this.position});
final Offset position;
@override
void performLayout(Size size) {
// `size` is the size of the `CustomMultiChildLayout` itself.
Size leadingSize = Size.zero; // If there is no widget with id `1`, the size will remain at zero.
// Remember that `1` here can be any **id** - you specify them using LayoutId.
if (hasChild(1)) {
leadingSize = layoutChild(
1, // The id once again.
BoxConstraints.loose(size), // This just says that the child cannot be bigger than the whole layout.
);
// No need to position this child if we want to have it at Offset(0, 0).
}
if (hasChild(2)) {
final secondSize = layoutChild(
2,
BoxConstraints(
// This is exactly the same as above, but this can be anything you specify.
// BoxConstraints.loose is a shortcut to this.
maxWidth: size.width,
maxHeight: size.height,
),
);
positionChild(
2,
Offset(
leadingSize.width, // This will place child 2 to the right of child 1.
size.height / 2 - secondSize.height / 2, // Centers the second child vertically.
),
);
}
}
}
다른 두 예는 문서 (검사 준비의 하나 2 단계 )과 실제 내가 시간이 상기에 다시 쓴 예 feature_discovery: 패키지 MultiChildLayoutDelegate구현 및 CustomMultiChildLayout에 build방법을 .
마지막 단계는 shouldRelayout메서드를 재정의하는 것입니다.이 메서드performLayout 는 이전 대리자와 비교하고 (선택적으로 재정의 가능 getSize) 다음과 같이 대리자를 추가하여 특정 시점에서 다시 호출 해야하는지 여부를 간단하게 제어합니다 CustomMultiChildLayout.
class YourLayoutDelegate extends MultiChildLayoutDelegate {
YourLayoutDelegate({this.position});
final Offset position;
@override
void performLayout(Size size) {
// ... (layout code from above)
}
@override
bool shouldRelayout(YourLayoutDelegate oldDelegate) {
return oldDelegate.position != position;
}
}
CustomMultiChildLayout(
delegate: YourLayoutDelegate(position: Offset.zero),
children: [
// ... (your children wrapped in LayoutId's)
],
)
고려 사항
이 문서 는 위에서 위에서 설명한 내용을 잘 설명하고 CustomSingleChildLayout있으며 어떻게 CustomMultiChildLayout작동 하는지 이해 한 후에 이것이 왜 명백한 지 알 수 있습니다.
CustomMultiChildLayout 은 여러 위젯의 크기와 위치 사이에 복잡한 관계가있는 경우에 적합합니다. 단일 자식의 레이아웃을 제어하려면 CustomSingleChildLayout 이 더 적합합니다.
이것은 또한 CustomSingleChildLayout위에서 설명한 것과 동일한 원리 를 사용 하지만 아이가 하나도 없기 때문에 ID가 없음을 의미합니다. 대신 레이아웃을 구현하기 위해 다른 방법을
가진 SingleChildLayoutDelegate대신 을 사용해야 합니다 (모두 기본 동작을 가지므로 기술적으로 재정의하는 것은 모두 선택 사항입니다 ).
다른 모든 것은 정확히 동일합니다 (필요하지 않으며 LayoutId대신에 한 명의 자녀 만 있음을 기억하십시오 children).
이것이 CustomMultiChildLayout기본입니다.
이것을 사용하려면 Flutter에 대한 더 깊은 지식이 필요하며 다시 더 복잡하지만 더 낮은 수준이기 때문에 더 많은 사용자 정의를 원한다면 더 나은 옵션입니다. 이것은 한 가지 주요 이점이 있습니다 CustomMultiChildLayout(일반적으로 더 많은 제어가 가능함).
CustomMultiChildLayout 크기를 할 수없는 자신을 자식을 기반으로 합니다 ( 추론에 대한 더 나은 문서에 관한 문제 ).
내가 사용하는 방법에 대해 설명하지 않습니다 MultiChildRenderObjectWidget분명한 이유 여기에,하지만 당신이 관심이 있다면, 당신은 체크 아웃 할 수 플러터 시계 도전에 내 제출 하는 I는 사용 년 1 월 20 일 (2020) 이후에 MultiChildRenderObjectWidget당신은 또한 읽을 수 - 광범위하게 이것에 대해 기사를 , 모든 작동 방식을 설명해야합니다.
지금 당신 MultiChildRenderObjectWidget은 그것이 CustomMultiChildLayout가능하다는 것을 기억하고 그것을 직접 사용하면 사용하지 LayoutId않고 대신에 RenderObject부모 데이터에 직접 액세스 할 수있는 것과 같은 멋진 이점을 얻을 수 있습니다.
재미있는 사실
모든 코드를 일반 텍스트로 (StackOverflow 텍스트 필드에) 작성 했으므로 오류가 있으면 알려 주시면 해결하겠습니다.