Flutter : 확장 vs 유연성

나는 Expanded및 Flexible위젯을 모두 사용했으며 동일하게 작동하는 것 같습니다.

확장형과 유연성의 차이점은 무엇입니까?

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Expanded 의 약어입니다 Flexible

이 방법으로 확장 사용 :

Expanded(
  child: Foo(),
);

다음과 완전히 동일합니다.

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

일부 반응 형 레이아웃에서 유용한 다른을 원할 때 Flexibleover 를 사용할 수 있습니다 .Expandedfit

의 차이 FlexFit.tight와는 FlexFit.loose느슨한 그 아이가 아이가 사용 가능한 모든 공간을 채우기 위해 꽉 힘 동안 최대 크기를 가질 수 있도록하는 것입니다.

Flexible 아래의 위젯 은 Fit 파라미터를 사용하여 변경할 수 있지만 기본적으로 WRAP_CONTENT 입니다.

Expanded 아래의 위젯 은 MATCH_PARENT 이며 flex를 사용하여 변경할 수 있습니다 .

Expanded- Flexible세트 핏입니다.

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

Flexible 을 사용하여 행 과 열의 위젯 크기를 조정할 수 있습니다 . 주로 상위 위젯과의 관계를 유지하면서 다른 하위 위젯의 공간을 조정하는 데 사용됩니다.

한편, Expanded 는 행 과 열의 자식에 전송되는 제약 조건을 변경합니다 . 사용 가능한 공간을 채우는 데 도움이됩니다. 따라서 확장 된 위젯에서 자녀를 감싸면 빈 공간이 채워집니다.

Flutter의 공식 YouTube 채널 에서 이러한 동영상을 제공하여 앞으로이 동영상을 찾을 수있는 사람들을 돕기 위해 ...

1. 퍼지는:

2. 융통성 있는:

당신이 사용하는 경우 유일한 차이점 Flexible대신은 Expanded, 즉 Flexible자식이보다 같거나 작은 폭이 할 수 Flexible있는 동안, 자신 Expanded의 힘의 자녀가의 동일한 폭을 갖도록 Expanded. 그러나 모두 Expanded와 Flexible스스로 크기를 조정할 때 자녀의 폭을 무시합니다.

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

참고 : 이는 Row크기에 비례하여 자식 을 확장 할 수 없음을 의미합니다. 행은 정확한 자식의 너비를 사용 Expanded하거나 또는 을 사용할 때 완전히 무시합니다 Flexible.

Expanded ()는 Flexible ()에 지나지 않습니다.

Flexible (fit: FlexFit.tight) = Expanded()

그러나 fit :FlexFit.loose기본적으로 유연한 사용 .

FlexFit.tight = 가능한 한 많은 공간을 차지하는 부모에게 꼭 맞기를 원합니다.

FlexFit.loose = 가능한 한 적은 공간을 차지하는 부모에게 느슨하게 맞기를 원합니다.