flutter의 wrap_content 및 match_parent에 해당합니까?

안드로이드 match_parent와 wrap_content위젯에 포함 된 내용에 자신의 부모를 자동으로 상대 위젯의 크기를 조정하는 데 사용됩니다.

Flutter에서는 기본적으로 모든 위젯이로 설정되어있는 것 같습니다.이 위젯 과 상위 위젯 wrap_content을 채울 수 있도록 어떻게 변경 합니까?widthheight

당신은 작은 트릭으로 할 수 있습니다 : (폭, 높이)의 요구 사항이 있다고 가정합니다.

Wrap_content, Wrap_content :

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent :

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content :

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent :

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

주문 동작을 얻을에서 match_parent 및 wrap_content 우리가 사용할 필요가 mainAxisSize의 재산을 행 / 열 위젯의 mainAxisSize의 속성이 소요 MainAxisSize의 두 개의 값을 가지는 열거 MainAxisSize.min을 하는 것처럼 동작 wrap_content 와 MainAxisSize.max 로 동작 match_parent .

원본 기사 링크

짧은 대답은 아이가 크기를 가질 때까지 부모는 크기가 없다는 것입니다.

Flutter에서 레이아웃이 작동하는 방식은 각 위젯이 각각의 자식에게 제약 조건을 제공한다는 것입니다. "이만큼 넓어야하고, 이만큼 키가 커야하며, 최소한 이만큼 넓어야합니다."또는 무엇이든 (특히, 최소 너비, 최대 너비, 최소 높이 및 최대 높이 가져 오기). 각 자식은 이러한 제약 조건을 취하고 무언가를 수행하고 해당 제약 조건과 일치하는 크기 (너비 및 높이)를 선택합니다. 그런 다음 각 자식이 작업을 마치면 위젯은 자체 크기를 선택할 수 있습니다.

일부 위젯은 부모가 허용하는만큼 커지려고합니다. 일부 위젯은 부모가 허용하는만큼 작아야합니다. 일부 위젯은 특정 "자연"크기 (예 : 텍스트, 이미지)와 일치 시키려고합니다.

일부 위젯은 자녀에게 원하는 크기를 지정할 수 있다고 말합니다. 일부는 자녀에게 부모로부터받은 것과 동일한 제약 조건을 부여합니다.

실제로 사용할 수있는 몇 가지 옵션이 있습니다.

SizedBox.expand를 사용하여 위젯을 부모 크기와 일치 시키거나 SizedBox (width : double.infinity)를 사용하여 너비 만 일치 시키거나 SizedBox (heigth : double.infinity)를 사용하여 높이 만 일치시킬 수 있습니다.

wrap_content 동작을 원하는 경우 사용중인 상위 위젯에 따라 다릅니다. 예를 들어 열에 버튼을 배치하면 wrap_content처럼 동작하고 match_parent처럼 사용하려면 확장 된 위젯 또는 sizedbox로 버튼을 래핑 할 수 있습니다.

ListView를 사용하면 버튼이 match_parent 동작을 얻고 wrap_content 동작을 얻으려면 Row와 같은 Flex 위젯으로 단추를 래핑 할 수 있습니다.

확장 위젯을 사용하면 행, 열 또는 플렉스의 하위 항목이 확장되어 주 축의 사용 가능한 공간을 채 웁니다 (예 : 행의 경우 가로로, 열의 경우 세로로). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Flexible 위젯을 사용하면 Row, Column 또는 Flex의 하위 항목이 기본 축에서 사용 가능한 공간을 채울 수있는 유연성을 제공하지만 (예 : 행의 경우 가로로 또는 열의 경우 세로로) 확장 됨과 달리 Flexible은 그렇지 않습니다. 자녀가 사용 가능한 공간을 채우도록 요구하십시오. https://docs.flutter.io/flutter/widgets/Flexible-class.html

간단한 해결 방법 :

컨테이너에 최상위 자식이 하나만있는 경우 자식에 대한 정렬 속성을 지정하고 사용 가능한 값을 제공 할 수 있습니다. 컨테이너의 모든 공간을 채울 것입니다.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

또 다른 방법:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

이 솔루션을 사용했으며 MediaQuery를 사용하여 화면의 높이와 너비를 정의해야합니다.

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

위젯을 사용합니다 Wrap.

의 경우 Column와 같은 행동 시도 :

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

의 경우 Row와 같은 행동 시도 :

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

추가 정보 : 랩 (Flutter 위젯)

컬럼 내에서이 코드 라인을 사용하십시오. wrap_content의 경우 : mainAxisSize: MainAxisSize.min match_parent의 경우 :mainAxisSize: MainAxisSize.max

실제로이를 수행하는 매우 쉽고 깔끔한 방법이 있습니다.

FractionallySizedBox위젯을 사용하십시오 .

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

이 위젯은 부모 크기의 일부로 자녀의 크기를 조정하려는 경우에도 매우 유용합니다.

예:

자녀가 부모 너비의 50 %를 차지하도록하려면 다음을 제공하십시오 widthFactor.0.5

자식이 부모를 채우도록하려면 FittedBox에 래핑하면됩니다.

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )