flutterのwrap_contentおよびmatch_parentと同等ですか？

Androidの中match_parentやwrap_contentウィジェットが含まれているコンテンツへの親に自動的に相対的なウィジェットのサイズを変更するために使用されています。

フラッターでは、すべてのウィジェットに設定され、デフォルトではそうですwrap_content、私はその埋めることができ、それは、そのようなことをどのように変化するか、widthおよびheightその親のものに？

あなたは少しトリックで行うことができます：あなたが要件を持っていると仮定してください：（ 幅、高さ）

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のように使用して、ボタンをExpandedウィジェットまたはsizedboxでラップできます。

ListViewを使用すると、ボタンはmatch_parent動作を取得し、wrap_content動作を取得するには、RowなどのFlexウィジェットでボタンをラップできます。

展開されたウィジェットを使用すると、行、列、またはFlexの子が展開され、主軸で使用可能なスペースがいっぱいになります（たとえば、行の場合は水平方向、列の場合は垂直方向）。 https://docs.flutter.io/flutter/widgets/Expanded-class.html

フレキシブルウィジェットを使用すると、行、列、またはフレックスの子に、主軸で使用可能なスペースを満たすように拡張する柔軟性が与えられます（たとえば、行の場合は水平方向、列の場合は垂直方向）。子供に利用可能なスペースを埋めるように要求します。 https://docs.flutter.io/flutter/widgets/Flexible-class.html

簡単な回避策：

コンテナに最上位の子が1つしかない場合は、子の配置プロパティを指定して、使用可能な任意の値を指定できます。コンテナのすべてのスペースを埋めます。

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*
}

このウィジェットは、親のサイズの何分の1かで子のサイズを設定する場合にも非常に役立ちます。

例：

子が親の幅の50％を占めるようにするにwidthFactorは、次のように指定します0.5

子をその親に合わせるには、単にそれをFittedBoxにラップします

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