95

可変サイズの親ウィジェットがあるとします。

例えば：

var container = new Container(
   height: 200.0, // Imagine this might change
   width: 200.0, // Imagine this might change
   // Imagine content in this container will 
   // depend on the parent container
   child: new Container(), 
);

また、指定されたサイズに基づいて、親コンテナーの子に別のものをレンダリングさせたい場合があります。

幅が X を超えている場合はこのレイアウトを使用し、幅が X を下回っている場合はそのレイアウトを使用します。

Flutterでこれを行う最良の方法は何ですか?

4

6 に答える 6

163

レイアウト時に構築され、親ウィジェットの制約を提供するLayoutBuilderウィジェットを使用する必要があります。

は、サイズに基づいてウィジェットを動的にレンダリングするために使用できるパラメーターとして、標準の BuildContext と共に BoxConstraints を持つ関数を取り込みますLayoutBuilder。build()

親の幅が 200px より大きい場合は「LARGE」、親の幅がそれ以下の場合は「SMALL」をレンダリングするウィジェットの簡単な例を作成してみましょう。

var container = new Container(
  // Toggling width from 100 to 300 will change what is rendered
  // in the child container
  width: 100.0,
  // width: 300.0
  child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if(constraints.maxWidth > 200.0) {
        return new Text('BIG');
      } else {
        return new Text('SMALL');
      }
    }
  ),
);
于 2017-01-09T22:56:12.693 に答える