注：特に指定のない限り、フラッタバージョンとダートのバージョンは次の通りです：
- フラッターバージョン：1.12.13 + hotfix.5
- ダートバージョン：2.7.0
スタック
スタック構成要素が円滑に順次サブアセンブリ次のように使用されるの上に積み重ねによれば、サブアセンブリ表示を重畳するようにしてもよいです。
Stack(
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Container(
height: 170,
width: 170,
color: Colors.blue,
),
Container(
height: 140,
width: 140,
color: Colors.yellow,
)
],
)結果は以下の通りであります：
スタックサイズは、サブアセンブリの標的とされていないfit判定パラメータは、デフォルト値がされたStackFit.looseサブアセンブリは、自分で決める表しStackFit.expand、次のように使用し、可能な限り大きく表します。
Stack(
fit: StackFit.expand,
...
)サブアセンブリによって整列配置されていないのスタックのデフォルトの左上隅alignment次のようにパラメータ制御が使用されます。
Stack(
alignment: Alignment.center,
...
)結果は以下の通りであります：
そこには通知はありませんfitし、alignmentサブアセンブリは、パラメータ・コントロールを配置し、サブアセンブリ部品ポジショニングと呼ばれるものことないですか？次のように配置されているサブアセンブリ使用してサブアセンブリ包まれた位置、使用されます。
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Positioned(
left: 10,
right: 10,
bottom: 10,
top: 10,
child: Container(
color: Colors.green,
),
)
],
)位置決め要素は、以下のように煙突効果は、各側からの距離を指定することができます。
サブアセンブリは、スタックの境界線を超えた場合はoverflowコントロールは、デフォルトではカットされ、次の設定を使用し、常に表示されます。
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.red,
),
Positioned(
left: 100,
top: 100,
height: 150,
width: 150,
child: Container(
color: Colors.green,
),
)
],
)結果は以下の通りであります：
IndexedStack
IndexedStackスタックは、すべてのサブコンポーネントの表示を重畳し、以下のようにのみ指定されたサブコンポーネントIndexedStack表示が、使用され、スタックのサブクラスです。
IndexedStack(
index: _index,
children: <Widget>[
Center(
child: Container(
height: 300,
width: 300,
color: Colors.red,
alignment: Alignment.center,
child: Icon(
Icons.fastfood,
size: 60,
color: Colors.blue,
),
),
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.green,
alignment: Alignment.center,
child: Icon(
Icons.cake,
size: 60,
color: Colors.blue,
),
),
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.yellow,
alignment: Alignment.center,
child: Icon(
Icons.local_cafe,
size: 60,
color: Colors.blue,
),
),
),
],
)更新するには、ボタンをクリックすると_index、以下のようにコードの値は次のとおりです。
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.fastfood),
onPressed: () {
setState(() {
_index = 0;
});
},
),
IconButton(
icon: Icon(Icons.cake),
onPressed: () {
setState(() {
_index = 1;
});
},
),
IconButton(
icon: Icon(Icons.local_cafe),
onPressed: () {
setState(() {
_index = 2;
});
},
),
],
)結果は以下の通りであります：
配置
サブアセンブリスタックを配置するための配置、スタックは次のように、サブアセンブリ、実質的に使用する必要があります位置しました：
Stack(
children: <Widget>[
Positioned(
left: 10,
right: 10,
top: 10,
bottom: 10,
child: Container(color: Colors.red),
),
],
)結果は以下の通りであります：
指示：
- 提供
top、bottom、left、right位置決め特性の4種類、垂直方向と水平方向の距離を表しています。 - 組み立てのために使用することが唯一のスタック。
left、right和width3个参数只能设置其中2个，因为设置了其中2个，第三个已经确定了，同理top、bottom和height也只能设置其中2个。
Positioned提供便捷的构建方式，比如Positioned.fromRect、Positioned.fill等，这些便捷的构建方式万变不离其宗，只不过换了一种方式设置top、bottom、left、right四种定位属性。
今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，以表示对我的支持，你们的留言、点赞和转发关注是我持续更新的动力！
