Android에서 작업하는 친구들은 모두 Android에서 하위 요소의 크기를 제한하는 세 가지 방법, 즉 match_parent, Wrap_content 및 고정 크기가 있다는 것을 알고 있습니다. ConstraintLayout을 사용하는 경우 match_constraint도 있습니다.
이 값은 하위 요소의 레이아웃_폭 및 레이아웃_높이로 설정됩니다. 상위 요소에서 생성된 LayoutParams는 구문 분석되어 하위 요소로 설정되며, 해당 값과 상위 요소에서 얻은 MeasureSpec입니다. 요소는 하위 요소 크기를 결정하기 위해 상위 요소의 측정 프로세스 중에 사용됩니다. 하위 요소의 크기는 궁극적으로 상위 요소에 의해 결정되지만 상위 요소는 자체 크기에 대한 하위 요소의 기대치를 거의 위반하지 않습니다. 따라서 Android에서 하위 요소의 크기는 하위 요소 자체에 의해 결정될 수 있다고 생각할 수 있습니다. 하위 요소의 원하는 크기를 결정하려면 해당 요소의 레이아웃_너비와 레이아웃_높이에 서로 다른 값을 지정하면 됩니다.
Flutter에서는 완전히 다릅니다. Flutter의 Active 조합 디자인은 가능한 모든 레이아웃이 조합을 통해 구현될 수 있기를 바랍니다. 구성이 상속보다 낫다는 것은 사실이지만 Flutter는 이를 극단적으로 받아들입니다. 하위 요소의 크기, 패딩, 여백, 번역, 배경 등을 지정하는 것조차 중첩을 통해 구현해야 하는 것이 중첩 지옥의 근본 원인입니다.
자식 요소의 크기를 지정하는 경우를 예로 들면, 자식 요소에 SizedBox를 추가하고 이를 사용하여 자식 요소의 크기를 제한해야 합니다. 이를 바탕으로 일반적으로 Flutter에서 하위 요소의 크기는 하위 요소 자체에 의해 결정될 수 없으며 항상 상위 요소에 의해 결정된다는 점을 이해할 수 있습니다. 이는 본질적으로 Android와 다릅니다.
Flutter는 또한 하위 요소가 상위 요소를 채울 수 있도록 match_parent를 제공하지 않으며 하위 요소의 콘텐츠가 최대한 커질 수 있도록 Wrap_content를 제공하지 않습니다. 그러나 double.infinity를 제공합니다. 우리는 일반적으로 하위 요소가 상위 요소를 채우도록 하기 위해 이를 사용합니다. 그러나 실제로 double.infinity는 Wrap_content를 나타내는 데에도 사용됩니다. 이는 Flutter의 레이아웃 프로세스로 시작됩니다.
Flutter의 레이아웃 프로세스는 세 문장으로 요약될 수 있습니다.
여기서 매우 중요한 점은 하위 요소의 크기가 상위 요소의 제약 조건을 결코 위반할 수 없다는 것입니다. 비정상적으로 던져. 하위 요소가 자체 크기에 값을 할당하면 다음 감지가 트리거됩니다.
이 예외를 방지하기 위해 하위 요소는 먼저 상위 요소의 제약 조건을 충족한 후 설정을 시도합니다. 자체 크기:
이는 설정된 크기가 항상 상위 요소의 제약 조건을 충족하고 예외가 발생하지 않도록 보장합니다.
double.infinity를 사용하여 상위 요소를 채우려고 할 때 여기서 contentWidth 값은 double.infinity이지만 Constraints.constrainWidth는 match_parent 역할을 하는 상위 요소의 너비를 반환합니다. 여기서 암시적인 의미는 UI 프레임워크가 무한한 것을 렌더링할 수 없기 때문에 하위 요소의 크기가 실제로 무한할 수 없다는 것입니다. 이는 무한한 리소스 소비를 의미하기 때문입니다.
Wrap_content에 무슨 일이 일어나고 있나요? 사실 마찬가지다.
상위 요소에 하위 요소에 대한 크기 요구 사항이 없으면 느슨한 제약 조건이 하위 요소에 전달됩니다. 즉, 최대 크기만 제한되며 일반적으로 상위 요소의 크기입니다. 즉, 하위 요소는 원하는 만큼 커질 수 있지만 자체 크기를 초과할 수는 없습니다. 그러나 일부 위젯에는 이러한 제한이 없습니다. 하위 요소의 크기가 자체 크기를 초과하도록 허용하므로 하위 요소에 전달되는 최대 크기는 double.infinity입니다. 그러나 하위 요소가 자체적으로 측정할 때 상위 요소가 제공하는 최대 크기는 double.infinity인 것으로 나타났습니다. Flutter는 무한한 것을 렌더링할 수 없기 때문에 실제로 자체 크기를 double.infinity로 설정하는 것은 불가능합니다. 이를 시도하면 예외도 발생합니다. 따라서 일반적인 상황에서 하위 요소는 double.infinity를 Wrap_content로 직접 처리하고 콘텐츠 크기를 상위 요소에 피드백합니다.
요약은 다음과 같습니다.
물론 모든 이유는 Flutter가 Android가 처음에 했던 것처럼 match_parent를 나타내기 위해 -1을 사용하고 Wrap_content를 나타내기 위해 -2를 사용하는 것을 고려하지 않았기 때문입니다. 디자인. 이렇게 하면 double.infinity는 아무 관련이 없습니다.
대부분의 경우 double.infinity를 사용하여 match_parent의 효과를 얻을 수 있지만 항상 그런 것은 아닙니다. 항상 이를 사용하여 아래에서 위로 Wrap_content의 효과를 얻을 수 있습니다. 왜냐하면 위에서 아래로만 가능하기 때문입니다. 하위 요소의 크기를 Wrap_content로 만들고 싶다면 Center와 같이 Wrap_content를 지원하는 위젯과 함께 사용하세요. 또는 Flutter ConstraintLayout을 사용하세요. matchParent, WrapContent,fixedSize 및 matchConstraint를 지원합니다.