「Flutter應用開發教程」-基本布局組件Row和Column 「Flutter應用開發教程」-第一個Flutter應用程序

Stack組件能夠讓它的子組件使用Stack組件的邊界進行布局，這個布局組件支持兩中類型的子組件，一類是普通的子組件，另一類是定位子組件。下文我們将通過示例演示如何使用Stack組件進行布局子元素。

對于普通的子組件，Stack布局組件在缺省情況下會從其左上角開始放置子組件，第1個組件放置在最底層，第2個組件放置在第一個組件的上一層，之後每一個新的組件按照這樣的放置方式依次放置在前一個組件的上一層。就好比一沓信紙，隻不過組件是沒有厚度的，但是上一層的組件會覆蓋下面的組件。因此為了便于演示，我們将最底層的組件設置為最大的寬度和高度，越接近頂層，組件的寬度和高度會越來越小。圖1中使用6種顔色值分别創建了6個組件，第1個組件最大，寬度和高度大小都為6x48，它位于最底層；第2個組件的寬度和高度都為5x48，它會覆蓋在第1個組件的部分區域；之後的每一個組件都會覆蓋前一個組件的一部分内容，其效果如圖2所示。

圖1

圖1中第13-20行代碼定義了一個顔色值數組，第21行代碼調用mapIndexed方法将顔色值數組的索引值和顔色值作為參數進行構建Container對象，此方法調用完成之後就構建了一個元素類型為Container的Iterable對象，最後第26行代碼調用toList方法将其轉換為Container對象列表。第29行代碼将containers對象列表作為Stack構造函數的children參數進行構建Stack對象。

圖2

圖2中我們使用了Stack組件所有的缺省參數進行對子組件的布局，布局是從左上角（Alignment.topStart）開始，我們也可以将子組件從左側中部或其它位置開始布局，隻需要在Stack組件的構造函數中将alignment參數的值設置Alignment.centerLeft，其實現的效果如圖3所示。

圖3

Stack布局組件除了使用普通的組件之外，它還可以結合定位組件Positioned來實現更加靈活的布局方式。Positioned組件可以設置其子組件相對于父組件Stack的四個邊界距離而達到布局效果。如下圖4

圖4

圖4中第16行代碼創建了一個Positioned組件，其子組件為一個寬高值都是48的Container組件，我們在這個Positioned組件中設置top和left參數都為0，那麼這個子組件就顯示在父組件Stack的左上角位置；第17行代碼也創建了同樣的Positioned和Contained組件，但這次設置的Positioned參數top和right值為0，那麼，第二個組件就顯示在Stack父組件的右上角位置；第18行代碼依據同樣的方法設置bottom和left參數值為0，那麼，第三個組件就顯示在Stack組件的左下角位置；第19行代碼設置了bottom和right參數值為0，它相應地顯示在父組件Stack的右下角位置。整個布局的顯示效果如圖5所示。

圖5

在使用Positioned組件時，其設置參數top、bottom、left和right必須保證至少有一個數值不為空值，這樣才可以對子組件進行定位。我們除了将子組件進行停靠于Stack父組件的邊界之外，這4個參數也是可以指定其它的任何合法數值，比如下圖6中，我們實現一個列表條目的界面效果，左側區域顯示頭像，右側區域顯示操作按鈕，中間部分顯示内容，如圖8所示。

圖7

圖7中第18行代碼為頭像區域的顯示組件，我們将Positioned組件的left參數設置為0，将其子組件的寬高都設置為64，那麼，這個頭像組件就居左顯示了；第19行代碼為操作按鈕組件，這個區域的大小也是64x64，通過将Positioned的right值設置為0，就實現了将其居右的顯示效果；最後是對内容區域的布局，由于左右兩個區域分别占據了64寬度的空間，那麼，内容區域距離左邊界的數值為64，距離右邊界的數值也是64，通過第20行代碼，将Positioned組件的left和right參數都設置為64；這樣我們就實現了三個組件占據全部寬度、高度為64的界面布局效果。

圖8

聖杯布局在頁面設計中是經常使用的一種布局方式，如圖10所示，它分為三個區域，左側區域、中部區域和右側區域，中部區域内容自适應，兩側區域寬度為固定值，同時三個區域的高度與整個屏幕高度保持一緻。

圖9

上一節内容介紹了左、中、右三個區域固定高度的定位方式，對于左側和右側區域，我們使用Positioned組件的一個參數對其在一個方向上（left或right）添加了約束，對于中部區域，我們使用了兩個參數(left和right)對其在兩個方向上添加了約束。聖杯布局與上一個布局所不同的是三個區域的高度值。我們按照Positioned組件的定位功能繼續添加頂部和底部約束，将它們的值都設置為0，那麼，這三個組件就會占據整個屏幕。圖9中第18、第20行和第22行代碼分别設置了top和bottom的值都為0。這樣對于每一個組件來說，左側Positioned組件使用了left、top和bottom三個參數，中部Positioned組件使用了left、top、right和bottom四個參數，右側Positioned組件使用了right、top和bottom三個參數。

圖10

Stack組件為Flutter界面布局中常用的組件，可以實現子組件的層疊式布局，也可以借用Positioned組件實現依據邊界進行布局，通過設置“上下左右”四個邊界的偏移量實現對子組件的定位功能。

「Flutter應用開發教程」-基本布局組件Row和Column 「Flutter應用開發教程」-第一個Flutter應用程序

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!