在 Flutter 中，布局系統(tǒng)提供了多種方式來管理 UI 元素的排列方式。其中，Stack 和 Positioned 是非常重要的布局組件，允許開發(fā)者將子組件按層疊方式（即堆疊）布局，使得組件可以相互重疊。通過使用 Stack 和 Positioned，可以輕松實現(xiàn)復雜的界面效果，如懸浮按鈕、頁面上的層次關系、背景覆蓋等。

本教程將詳細介紹 Stack 和 Positioned 的工作原理、常見使用場景，并通過實例展示如何在 Flutter 中實現(xiàn)靈活的層疊布局。

什么是層疊布局？

Stack 是 Flutter 中的一個布局組件，允許多個子組件按照堆疊順序展示，也就是說，后添加的子組件會覆蓋前面的子組件。與其他布局不同，Stack 不會自動調整子組件的位置，而是將子組件彼此疊加放置。

Positioned 是 Stack 的子組件之一，用來精確控制子組件在 Stack 中的位置。通過 Positioned，可以指定子組件相對于 Stack 邊緣的位置，如 top、bottom、left 和 right 等。

Stack 的基本使用

Stack 的核心理念是：它允許多個子組件按照 z 軸（深度）的順序堆疊在一起。子組件按照聲明順序疊放，越后聲明的組件位于上方。

基本示例

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Stack 示例')),body: Stack(children: <Widget>[Container(width: 300,height: 300,color: Colors.red,),Container(width: 200,height: 200,color: Colors.green,),Container(width: 100,height: 100,color: Colors.blue,),],),),);}
}

在這個示例中，我們使用了 Stack 來創(chuàng)建三個不同大小的彩色方塊。由于 Stack 的布局特性，后添加的組件會覆蓋前面的組件，因此最終效果是藍色方塊疊加在綠色方塊上，而綠色方塊又疊加在紅色方塊上。

Stack 的核心屬性

alignment

alignment 屬性用于控制子組件在 Stack 中的對齊方式。Stack 默認情況下將子組件放置在左上角，但可以通過 alignment 屬性來改變這一行為。

常見的 alignment 值：

• Alignment.topLeft: 左上角對齊（默認）。
• Alignment.topRight: 右上角對齊。
• Alignment.center: 居中對齊。
• Alignment.bottomRight: 右下角對齊。

Stack(alignment: Alignment.center,children: <Widget>[Container(width: 300,height: 300,color: Colors.red,),Container(width: 200,height: 200,color: Colors.green,),],
)

在上面的代碼中，兩個方塊將會在 Stack 中居中對齊，而不是默認的左上角對齊。

fit

fit 屬性決定 Stack 的大小是否跟隨子組件的尺寸變化，常見的值包括：

• StackFit.loose: 子組件可以按原有大小展示，不強制調整。
• StackFit.expand: 子組件強制占滿整個 Stack。
• StackFit.passthrough: 子組件尺寸自適應。

Stack(fit: StackFit.expand,children: <Widget>[Container(color: Colors.red,),Container(width: 200,height: 200,color: Colors.green,),],
)

在這個例子中，紅色的 Container 將會占據(jù)整個 Stack 的空間，而綠色的 Container 將按照其自身大小展示。

overflow

overflow 屬性用于控制當子組件超出 Stack 邊界時的顯示行為：

• Overflow.visible: 超出部分仍會顯示（默認）。
• Overflow.clip: 超出部分會被剪裁，無法顯示。

Positioned 的使用

Positioned 是 Stack 的子組件之一，專門用于在 Stack 中精確控制子組件的位置。通過 Positioned，我們可以定義子組件距離 Stack 邊緣的距離。

Positioned 的常見屬性：

• top: 距離 Stack 頂部的距離。
• bottom: 距離 Stack 底部的距離。
• left: 距離 Stack 左側的距離。
• right: 距離 Stack 右側的距離。
• width: 子組件的寬度。
• height: 子組件的高度。

示例：使用 Positioned 布局子組件

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Positioned 示例')),body: Stack(children: <Widget>[Positioned(top: 50,left: 50,child: Container(width: 100,height: 100,color: Colors.red,),),Positioned(bottom: 50,right: 50,child: Container(width: 100,height: 100,color: Colors.green,),),],),),);}
}

在這個示例中，兩個方塊分別被放置在距離 Stack 頂部和左側 50 像素的位置，以及距離底部和右側 50 像素的位置。Positioned 提供了強大的精確定位功能，允許我們在 Stack 中任意定位子組件。

Stack 與 Positioned 的復雜布局實例

通過結合 Stack 和 Positioned，我們可以實現(xiàn)一些復雜的 UI 布局效果，比如構建具有背景圖片的頁面，或者在固定位置上放置懸浮按鈕。

示例：實現(xiàn)一個懸浮按鈕布局

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('懸浮按鈕示例')),body: Stack(children: <Widget>[// 背景圖片Positioned.fill(child: Image.network('https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-2e0e50a9a7329c64b19faacc7b00d7e6.png',fit: BoxFit.cover,),),// 中心文本Center(child: Text('Hello Flutter!',style: TextStyle(fontSize: 36,color: Colors.white,fontWeight: FontWeight.bold,),),),// 右下角懸浮按鈕Positioned(bottom: 30,right: 30,child: FloatingActionButton(onPressed: () {},child: Icon(Icons.add),),),],),),);}
}

這個例子展示了如何使用 Stack 和 Positioned 來創(chuàng)建一個具有背景圖片、中心文本以及懸浮按鈕的頁面布局。通過 Positioned.fill，我們讓背景圖片占據(jù)整個 Stack，同時使用 Center 來將文本居中顯示，最后在頁面的右下角放置一個懸浮按鈕。

Stack 與 Positioned 的高級用法

除了基礎用法，Stack 和 Positioned 還可以與 AnimatedPositioned 等動畫組件結合使用，創(chuàng)建動態(tài)的布局效果。

示例：使用 AnimatedPositioned 實現(xiàn)動畫效果

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {bool _isMoved = false;@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('AnimatedPositioned 示例')),body: Stack(children: <Widget>[AnimatedPositioned(duration: Duration(seconds: 2),left: _isMoved ? 200 : 50,top: _isMoved ? 200 : 50,child: GestureDetector(onTap: () {setState(() {_isMoved = !_isMoved;});},child: Container(width: 100,height: 100,color: Colors.blue,),),),],),),);}
}

這個示例通過 AnimatedPositioned 實現(xiàn)了點擊藍色方塊后，它會平滑移動到另一個位置的動畫效果。

總結

在 Flutter 中，Stack 和 Positioned 為開發(fā)者提供了靈活的層疊布局方式，特別適用于需要子組件重疊或在頁面上懸浮的場景。通過結合使用 alignment、fit 等屬性以及 Positioned 子組件，開發(fā)者可以輕松實現(xiàn)復雜的 UI 布局。

掌握 Stack 與 Positioned 的使用，能大大增強 Flutter 應用的布局能力，為構建美觀且功能強大的界面提供更多可能性。