フラッター：拡張vsフレキシブル

Question 1

ウィジェットExpandedとFlexibleウィジェットの両方を使用しましたが、同じように機能しているようです。

ExpandedとFlexibleの違いは何ですか？

Question 2

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

Question 3

Expanded の省略形です Flexible

このように拡張を使用する：

Expanded(
  child: Foo(),
);

厳密に同等です：

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

レスポンシブレイアウトによっては、別の、便利なものが必要な場合に使用FlexibleするExpandedことをお勧めしfitます。

違いFlexFit.tightとはFlexFit.loose緩いが、その子供は子供がすべての利用可能なスペースを埋めるためというタイトな力ながら、最大サイズを持つことができるようになるということです。

Question 4

フレキシブルの下のウィジェットはデフォルトでWRAP_CONTENTですが、パラメーターFitを使用して変更できます。

Expandedの下のウィジェットはMATCH_PARENTであり、flexを使用して変更できます。

Question 5

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
    );
}

Question 6

フレキシブルを使用して、行と列のウィジェットのサイズを変更できます。これは主に、親ウィジェットとの関係を維持しながら、さまざまな子ウィジェットのスペースを調整するために使用されます。

一方、Expandedは、行と列の子に送信される制約を変更します。そこにある利用可能なスペースを埋めるのに役立ちます。したがって、拡張ウィジェットで子をラップすると、空のスペースがいっぱいになります。

Flutterの公式YouTubeチャンネルからこれらの動画を提供するのは、近い将来これを探す可能性のある人々を支援するためだけです...

拡張：
フレキシブル：

Question 7

の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。

Question 8

Expanded（）はFlexible（）にすぎません。

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

ただし、Flexibleはfit :FlexFit.looseデフォルトで使用します。

FlexFit.tight =できるだけ多くのスペースをとって親にぴったりとフィットしたい。

FlexFit.loose =自分自身のためにできるだけスペースをとらずに、親にゆるくフィットしたい。