如果你像大多數程序員一樣，只要看到上一章中的靜態顏色屬性列表，就想編寫一個程序來顯示它們，也許使用Label的Text屬性來識別顏色，而TextColor屬性顯示實際的顏色。
盡管可以使用FormattedString對象通過單個Label實現此操作，但使用多個Label對象更容易。由于涉及多個Label對象，因此此作業還需要某種方法才能在屏幕上顯示所有Label對象。
ContentPage類定義了一個View類型的Content屬性，您可以將其設置為一個對象，但只能設置一個對象。顯示多個視圖需要將Content設置為可以有多個View類型的子類的實例。這樣的類是Layout ，它定義了一個IList 類型的Children屬性。
按照字母順序，這四個類是：

AbsoluteLayout Grid RelativeLayout StackLayout

他們每個人都以特有的方式安排子控件。 本章重點介紹StackLayout。
視圖堆
StackLayout類將其子項排列在一個堆棧中。 它自己只定義了兩個屬性：

類型的方向StackOrientation，一個枚舉與兩個成員：垂直（默認）和水平。類型double的間距，初始化為6。

StackLayout似乎是列表顏色的理想選擇。 您可以使用由IList 定義的Add方法將子項添加到StackLayout實例的Children集合中。 這里有一些代碼可以從兩個數組中創建多個Label對象，然后將每個Label添加到StackLayout的Children集合中：

點擊(此處)折疊或打開

Color[] colors = {Color.White, Color.Silver, Color.Gray, Color.Black, Color.Red,Color.Maroon, Color.Yellow, Color.Olive, Color.Lime, Color.Green,Color.Aqua, Color.Teal, Color.Blue, Color.Navy, Color.Pink,Color.Fuchsia, Color.Purple }; string[] colorNames = {"White", "Silver", "Gray", "Black", "Red","Maroon", "Yellow", "Olive", "Lime", "Green","Aqua", "Teal", "Blue", "Navy", "Pink","Fuchsia", "Purple" }; StackLayout stackLayout = new StackLayout(); for (int i = 0; i < colors.Length; i++) {Label label = new Label{Text = colorNames[i],TextColor = colors[i],FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))};stackLayout.Children.Add(label); }

然后可以將StackLayout對象設置為頁面的Content屬性。
但是使用并行陣列的技術相當危險。 如果他們不同步或有不同數量的元素呢？ 一個更好的方法是將顏色和名稱保持在一起，或許以Color和Name字段的小結構，或者作為Tuple 值的數組，或者作為匿名類型，如ColorLoop程序中所示：

點擊(此處)折疊或打開

class ColorLoopPage : ContentPage {public ColorLoopPage(){var colors = new[]{new { value = Color.White, name = "White" },new { value = Color.Silver, name = "Silver" },new { value = Color.Gray, name = "Gray" },new { value = Color.Black, name = "Black" },new { value = Color.Red, name = "Red" },new { value = Color.Maroon, name = "Maroon" },new { value = Color.Yellow, name = "Yellow" },new { value = Color.Olive, name = "Olive" },new { value = Color.Lime, name = "Lime" },new { value = Color.Green, name = "Green" },new { value = Color.Aqua, name = "Aqua" },new { value = Color.Teal, name = "Teal" },new { value = Color.Blue, name = "Blue" },new { value = Color.Navy, name = "Navy" },new { value = Color.Pink, name = "Pink" },new { value = Color.Fuchsia, name = "Fuchsia" },new { value = Color.Purple, name = "Purple" }};StackLayout stackLayout = new StackLayout();foreach (var color in colors){stackLayout.Children.Add(new Label{Text = color.name,TextColor = color.value,FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))});}Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);Content = stackLayout;} }

或者你可以用一個顯式的視圖集合來初始化StackLayout的Children屬性（類似于上一章中初始化的一個FormattedString對象的Spans集合）。 ColorList程序將頁面的Content屬性設置為StackLayout對象，然后使用17個Label視圖初始化其Children屬性：

點擊(此處)折疊或打開

class ColorListPage : ContentPage {public ColorListPage(){Padding = new Thickness (5, Device.OnPlatform (20, 5, 5), 5, 5);double fontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));Content = new StackLayout{Children ={new Label{Text = "White",TextColor = Color.White,FontSize = fontSize},new Label{Text = "Silver",TextColor = Color.Silver,FontSize = fontSize},new Label{Text = "Fuchsia",TextColor = Color.Fuchsia,FontSize = fontSize},new Label{Text = "Purple",TextColor = Color.Purple,FontSize = fontSize}}};} }

你不需要看到所有17個孩子的代碼來獲得這個想法！ 不管你如何填寫兒童收藏，結果如下：

顯然，這不是最佳的。 有些顏色根本看不到，有些顏色太淡，看不清楚。 而且，這個列表在兩個平臺上溢出了頁面，而且沒有辦法將其向上滾動。
一種解決方法是減小文本大小。 而不是使用NamedSize.Large，請嘗試其中一個較小的值。
另一個部分解決方案可以在StackLayout本身中找到：StackLayout定義了一個類型為double的Spacing屬性，用于指示在子節點之間留出多少空間。 默認情況下，它是6.0，但您可以將其設置為較小（例如，零），以幫助確保所有項目都適合：

點擊(此處)折疊或打開

Content = new StackLayout {Spacing = 0,Children ={new Label{Text = "White",TextColor = Color.White,FontSize = fontSize},…

現在所有的Label視圖只占用文本所需的垂直空間。 您甚至可以將間距設置為負值以使項目重疊！
但最好的解決方案是滾動。 StackLayout不自動支持滾動，并且必須添加另一個名為ScrollView的元素，如下一節所述。
但到目前為止顯示的顏色程序還有一個問題：它們需要顯式地創建一個顏色和名稱數組，或者顯式地為每個顏色創建Label視圖。 對于程序員來說，這有點乏味，因此有點令人厭惡。 可能是自動的？

總結

以上是生活随笔為你收集整理的第四章：滚动堆栈（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。