[Day1] Views vs Widgets - Flutter for SwiftUI Developers 번역

[Day1] Views vs Widgets - Flutter for SwiftUI Developers 번역 

 

2023.11.06 월

 

#Views vs. Widgets

SwiftUI는 UI 컴포넌트를 뷰로 표현합니다. 수정자를 사용하여 뷰를 구성합니다.

Text("Hello, World!") // <-- This is a View
  .padding(10)           // <-- This is a modifier of that View

뷰와 위젯은 변경이 일어날 때까지만 존재합니다. 이러한 언어에서 이런 속성을 ‘불변성’이라고 부릅니다.
SwiftUI에서는 UI 컴포넌트 프로퍼티를 View modifier로 표현합니다.
반면 Flutter는 UI 컴포넌트와 그 프로퍼티 모두에 위젯을 사용합니다.

Padding(                         // <-- This is a Widget
  padding: EdgeInsets.all(10.0), // <-- So is this
  child: Text("Hello, World!"),  // <-- This, too
)));

레이아웃을 구성하기 위해 SwiftUI와 Flutter는 UI 컴포넌트를 서로 중첩합니다.
SwiftUI는 뷰를 중첩하고 Flutter는 위젯을 중첩합니다.

 

#Layout process

SwiftUI에서는 다음 프로세스를 사용하여 뷰를 배치합니다:

1.부모 뷰가 자식 뷰에 크기를 제안합니다.

2.이후의 모든 자식 뷰는 자기 자식 뷰에게 크기를 제안합니다.

3.해당 자식에게 원하는 크기를 묻습니다.

4.각 부모 뷰는 반환된 크기로 자식 뷰를 렌더링합니다.


Flutter는 프로세스가 다소 다릅니다:

1.부모 위젯은 자식 위젯에 제약 조건을 전달합니다. (부모 widget의 제약조건이 자식 widget으로 전달됨)
제약 조건에는 높이와 너비에 대한 최소값과 최대값이 포함됩니다.

2.자식은 크기를 결정하려고 시도합니다. 자식 목록에 대해 동일한 프로세스를 아래와 같이 반복합니다:
-자식의 제약 조건을 자식에게 알립니다.
-자식에게 원하는 크기를 묻습니다.

3.부모는 자식을 배치합니다.
-요청된 크기가 제약 조건에 맞으면 부모는 해당 크기를 사용합니다.
-요청된 크기가 제약 조건에 맞지 않으면 부모는 제약 조건에 맞도록 높이, 너비 또는 둘 다를 제한합니다.


Flutter는 부모 컴포넌트가 자식의 원하는 크기를 재정의할 수 있다는 점에서 SwiftUI와 다릅니다.

위젯은 원하는 크기를 가질 수 없습니다.

또한 위젯은 부모 컴포넌트가 지정해줄때 까지 화면에서 자신의 위치를 알거나 결정할 수 없습니다.

자식 위젯이 특정 크기로 렌더링되도록 강제하려면 부모가 엄격한 제약 조건을 설정해야 합니다.

제약 조건의 최소 크기 값이 최대 크기 값과 같으면 제약 조건이 tight해집니다.

SwiftUI에서 뷰는 사용 가능한 공간으로 확장되거나 콘텐츠의 크기로 제한될 수 있습니다. Flutter 위젯도 비슷한 방식으로 작동합니다.

그러나 Flutter에서 부모 위젯은 무제한 제약 조건을 제공할 수 있습니다.

무제한 제약 조건은 최대 값을 무한대로 설정합니다.

UnboundedBox(
  child: Container(
      width: double.infinity, height: double.infinity, color: red),
)

infinity로 설정하면, 자신이 가질 수 있는 최대값으로 설정이 됩니다.

하지만 자신이 가질 수 있는 크기보다 큰 값으로 제약조건이 설정되다면 Flutter는 오버플로 경고를 반환합니다:

UnconstrainedBox(
  child: Container(color: red, width: 4000, height: 50),
)

To learn how constraints work in Flutter, see Understanding constraints.