Flutter 中的 Stack 小部件：全面指南

在 Flutter 中，Stack 是一个用于叠加多个小部件的布局小部件。它允许你将多个小部件重叠放置，通过控制每个小部件的位置和大小，你可以创建出复杂的布局效果，如徽章图标、对话框、自定义形状等。

基础用法

Stack 最基本的用法是包裹多个小部件，并将它们叠加在一起：

Stack(children: <Widget>[Container(color: Colors.red, width: 100.0, height: 100.0),Container(color: Colors.blue, width: 50.0, height: 50.0),],
)

在这个例子中，蓝色方块将会叠加在红色方块的上方。

定位子控件

Stack 使用 Positioned 小部件来定位子控件。Positioned 小部件可以指定子控件在 Stack 中的位置和大小：

Stack(children: <Widget>[Container(color: Colors.red, width: double.infinity, height: double.infinity),Positioned(top: 10.0,left: 10.0,child: Container(color: Colors.blue, width: 50.0, height: 50.0),),],
)

在这个例子中，蓝色方块将会距离红色方块的左上角 10.0 单位。

使用 fit 属性

Stack 的 fit 属性决定了 Stack 的大小。默认值为 StackFit.loose，意味着 Stack 的大小将基于其子控件的大小。另一个可选值为 StackFit.expand，它强制 Stack 占据其父级容器的全部空间：

Stack(fit: StackFit.expand,children: <Widget>[// ... 子控件],
)

使用 alignment 属性

Stack 的 alignment 属性定义了子控件在 Stack 中的默认对齐方式：

Stack(alignment: Alignment.center,children: <Widget>[Container(color: Colors.red, width: 100.0, height: 100.0),Container(color: Colors.blue, width: 50.0, height: 50.0),],
)

在这个例子中，蓝色方块将会在红色方块的中心位置。

实例：徽章图标

使用 Stack 和 Positioned 可以创建一个带有徽章图标的通知气泡：

Stack(alignment: Alignment.topRight,children: <Widget>[Container(width: 50.0,height: 50.0,color: Colors.green,child: Icon(Icons.add),),Positioned(top: 0.0,right: 0.0,child: Container(padding: EdgeInsets.all(2.0),color: Colors.red,child: Text('1'),),),],
)

实例：对话框

使用 Stack 可以创建一个带有阴影和标题的对话框：

Stack(children: <Widget>[Container(padding: EdgeInsets.all(20.0),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10.0),boxShadow: [BoxShadow(blurRadius: 10.0)],),child: Text('Hello, World!'),),Container(padding: EdgeInsets.all(5.0),margin: EdgeInsets.only(top: 20.0, right: 20.0),decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.blue,),child: Icon(Icons.report_problem),),],
)