1. IndexedStack
IndexedStack 是 Stack 的子类。与 Stack 不同,IndexedStack 一次最多只显示一个小部件,并隐藏其他小部件。可以通过 index 属性指定要显示的子小部件。如果索引为null
,则不会显示任何子小部件。
IndexedStack构造函数
IndexedStack(
{Key key,
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit sizing: StackFit.loose,
int index: 0,
List<Widget> children: const <Widget>[]}
)
基本上,IndexedStack 的大小尽可能小,并尝试大于其所有子级(除了 Positioned 或 Transform )。
可以通过将 IndexedStack 放置在 SizedBox 中来控制它的大小。
IndexedStack示例
下面是 IndexedStack 的一个简单示例:
示例代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
int selectedIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter IndexedStack Example")
),
body: SizedBox (
width: double.infinity,
height: double.infinity,
child: IndexedStack (
alignment: Alignment.center,
index: this.selectedIndex,
children: <Widget>[
Container(
width: 290,
height: 210,
color: Colors.green,
),
Container(
width: 250,
height: 170,
color: Colors.red,
),
Container(
width: 220,
height: 150,
color: Colors.yellow,
),
]
),
),
floatingActionButton: FloatingActionButton(
child: Text("Next"),
onPressed: () {
setState(() {
if(this.selectedIndex < 2) {
this.selectedIndex++;
} else {
this.selectedIndex = 0;
}
});
},
),
);
}
}
3. children
children - 是 IndexedStack 的子部件列表。
List<Widget> children: const <Widget>[]}
4. index
index:显示子widget的索引,默认为0
。如果index为null
,则不显示子widget。
int index: 0
5. fit (sizing)
IndexedStack 的构造函数中的 sizing 参数将为 fit 属性分配一个值。它显示了“如何为 IndexedStack 的定位以外的子小部件调整大小”。fit 属性的默认值为 StackFit.loose
。
StackFit sizing: StackFit.loose
// Enum:
StackFit.expand
StackFit.loose
StackFit.passthrough
6. textDirection
textDirection 属性用于设置文本的方向。它的值影响 alignment 属性的行为。
TextDirection textDirection
7. alignment
alignment 属性用于对齐定位以外的小部件。它的默认值是 AlignmentDirectional.topStart
。
AlignmentGeometry alignment: AlignmentDirectional.topStart