flutter - フラッターの wrap_content と match_parent に相当しますか?

Question

Android ではmatch_parent、wrap_contentウィジェットに含まれるコンテンツの親に対してウィジェットのサイズを自動的に変更するために使用されます。

Flutter では、デフォルトですべてのウィジェットが に設定されているようですが、それを塗りつぶして親のものwrap_contentにできるように変更するにはどうすればよいですか?widthheight

Answer 1

少しのトリックで行うことができます: (幅、高さ)の要件があるとします。

ラップコンテンツ、ラップコンテンツ:

 //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],
);

Answer 2

match_parentとwrap_contentの動作を取得するには、 Row/ColumnウィジェットでmainAxisSizeプロパティを使用する必要があります。mainAxisSize プロパティは、 wrap_contentとして動作するMainAxisSize.minとmatch_parent として動作するMainAxisSize.maxの 2 つの値を持つ MainAxisSize列挙型を 取ります。

元記事のリンク

Answer 3

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

Answer 4

子がその親を埋めるようにするには、単純に FittedBox にラップします

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

Answer 5

親に一致

親 (高さと幅) を一致または埋めるには、追加constraintsの onを使用できContainerます。

Container(
  constraints: BoxConstraints.expand(), // ← this guy
  child: Text('Center > Container > Text')
)

Flutter では、埋めることができる (または「厳しい」制約の場合は埋めなければならないconstraints) スペースです。

制約が与えられます...いや、実際には、親によって課されます。

デフォルトでは、上書きされない限り (または厳しい制約によって許可されていない場合)、コンテンツ ( ) & サイズ自体を子にContainerラップします。child:

引数を使用して、デフォルトの制約動作 (コンテンツのラッピングなど)をオーバーライドする追加constraints:の制約を与えることができます。Container Container

を使用Container(constraints: BoxConstraints.something) しても、着信/親の制約は上書きされません。コンテンツのラッピングなど、許可されている場合は、デフォルトの動作をオーバーライドできるようにするだけです。

---

コードサンプル -BoxConstraints

これは、 「緩やかな」着信/ペアレンタル制約 ( によって提供される) を持つ にconstraints適用できるさまざまな効果を示すコピー/貼り付けコードの例です。ContainerCenter

import 'package:flutter/material.dart';

class MatchParentPage extends StatefulWidget {
  @override
  _MatchParentPageState createState() => _MatchParentPageState();
}

class _MatchParentPageState extends State<MatchParentPage> {
  BoxConstraints constraints;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Match Parent'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded( // shares space constraint evenly with other Expanded
            child: Center( // ← fills tight parent constraint & loosens ↓ child constraint ↓
              child: Container( // got loose constraint from Center... 
                  constraints: constraints, // can apply many additional constraints
                  color: Colors.lightBlueAccent.withOpacity(.3),
                  child: Text('Center > Container > Text')),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.orangeAccent,
                child: Wrap(
                    children: [
                      _button('default', null),
                      _button('*expand()', BoxConstraints.expand()),
                      _button('*tight(Size.infinite)', BoxConstraints.tight(Size.infinite)),
                      _button('tight(Size.zero)', BoxConstraints.tight(Size.zero)),
                      _button('tight(Size.fromHeight(100))', BoxConstraints.tight(Size.fromHeight(100))),
                      _button('tight(Size.fromWidth(100))', BoxConstraints.tight(Size.fromWidth(100))),
                      _button('tightForFinite(width: 100, height: 100)', BoxConstraints.tightForFinite(width: 100, height: 100)),
                      _button('loose(Size.infinite)', BoxConstraints.loose(Size.infinite)),
                      _button('tightFor(width: double.infinity)', BoxConstraints.tightFor(width: double.infinity)),
                      _button('tightFor(height: double.infinity)', BoxConstraints.tightFor(height: double.infinity)),
                    ])
            ),
          )
        ],
      ),
    );
  }

  Widget _button(String label, BoxConstraints _constraints) {
    bool _active = _constraints == constraints;
    return Padding(
      padding: const EdgeInsets.only(top:8, left: 8),
      child: RaisedButton(
        color: _active ? Colors.cyanAccent : null,
        child: Text(label),
        onPressed: () {
          setState(() => constraints = _constraints);
        },
      ),
    );
  }
}