1. Flutter Stack
在 Flutter 中,Stack 是一个容器,允许将其子部件放在彼此的顶部,第一个子部件将放置在底部。Stack是一种节省应用程序空间的解决方案。可以更改子小部件的顺序以创建简单的动画。
Stack 根据原则堆叠其子组件:第一个子组件放在底部,最新的子组件放在顶部。当更改子小部件的顺序时,堆栈将被重绘。如果子widget的数量和顺序不断变化,需要为每个子widget提供一个特定且唯一的Key值,帮助Stack高效管理子widget。
IndexedStack
是 Stack 的子类。与 Stack 不同,IndexedStack 一次最多只显示一个小部件,其他小部件将被隐藏。可以通过属性index
指定显示哪个子widget,如果index
为null
,则不显示子widget。
Stack(
{Key key,
List<Widget> children: const <Widget>[],
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit fit: StackFit.loose,
Overflow overflow: Overflow.clip,
Clip clipBehavior: Clip.hardEdge
}
)
下面是一个简单的例子,一个有 3 个子部件的 Stack,默认情况下它们位于 Stack 的右上角,可以看到它们相互重叠:
Stack(
children: <Widget>[
Container(
width: 290,
height: 190,
color: Colors.green,
),
Container(
width: 250,
height: 170,
color: Colors.red,
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
],
)
基本上,Stack大小尽可能小,并尝试大于其所有子小部件(除了定位或变换等子小部件,请参阅更多溢出属性)。
让我们看一个例子:一个带有最大尺寸子部件的Stack。
示例代码如下:
Stack(
children: <Widget>[
Container( // First child (child 1)
width: double.infinity,
height: double.infinity,
color: Colors.green,
margin: EdgeInsets.all(20)
),
Container(
width: 250,
height: 170,
color: Colors.red,
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
],
)
如果要对齐(堆栈的)子小部件的位置,请将其放在 Align 中。
注意:当没有指定
widthFactor
和heightFactor
,但是指定了child时,Align会尽量大。
示例代码:
Stack(
children: <Widget>[
Container(
width: double.infinity,
height: double.infinity,
color: Colors.green,
margin: EdgeInsets.all(20)
),
Align (
alignment: Alignment.centerRight,
child: Container(
width: 250,
height: 170,
color: Colors.red,
),
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
],
)
还可以通过将子小部件(Stack)放置在一个定位中来对齐它的Positioned
。
2. children
children
- 是 Stack 的子部件列表。
List<Widget> children: const <Widget>[]
3. alignment
alignment
属性用于对齐定位以外的子小部件。它的默认值是 AlignmentDirectional.topStart
。
AlignmentGeometry alignment: AlignmentDirectional.topStart
下面的示例显示 Stack 的对齐属性对 Positioned
的子小部件没有影响。
示例代码:
SizedBox (
width: double.infinity,
height: double.infinity,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Container(
width: 290,
height: 190,
color: Colors.green,
),
Container(
width: 220,
height: 130,
color: Colors.yellow,
),
Positioned (
bottom: 10,
right: 10,
child: Container(
width: 150,
height: 90,
color: Colors.red,
),
),
],
)
)
4. textDirection
textDirection
属性用于设置文本方向。它的值影响 alignment
属性的行为。
TextDirection textDirection
5. fit
fit
属性显示“如何定义 IndexedStack 的非定位子部件的大小”。它的默认值是 StackFit.loose
。
StackFit fit: StackFit.loose
// Enum:
StackFit.expand
StackFit.loose
StackFit.passthrough
6. overflow
overflow
属性用于指定 Stack 如何处理从中溢出的那些子小部件。处理方法可以是剪掉溢出,或者让溢出显示出来。溢出的默认值是Overflow.clip
。
Overflow overflow: Overflow.clip
// Enum:
Overflow.clip
Overflow.visible
测试结果表明 overflow:Overflow.visible
只适用于某些类型的widget(例如Positioned
或Transform
)。
示例代码:
Container (
width: 250,
height: 250,
color: Colors.blueGrey,
margin: EdgeInsets.all(20),
child: Stack (
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: 50,
left: 50,
child: Container(
width: 290,
height: 100,
color: Colors.green,
),
),
Positioned(
top: 70,
left: 70,
child: Container(
width: 120,
height: 230,
color: Colors.yellow,
),
)
],
)
)
示例:一个 Transform 沿 Y 轴倾斜,它可以从 Stack 溢出。显示沿 Y 轴的溢出,同时剪切 X 轴的溢出。
示例代码:
Container (
width: 250,
height: 250,
margin: EdgeInsets.all(20),
color: Colors.blueGrey,
child: Stack (
overflow: Overflow.visible,
children: <Widget>[
Container(
height: 100,
width: 300,
color: Colors.green,
),
Transform(
alignment: FractionalOffset.topLeft,
transform: Matrix4.skewY(0.7), // skew will not go out of y bounds
child: Container(
height: 100,
width: 300,
color: Colors.red,
),
),
],
)
)
7. clipBehavior
Clip clipBehavior: Clip.hardEdge