第四章：滚动堆栈（1）

2570阅读　0评论2018-02-06　renxiao2003
分类：Android平台

如果你像大多数程序员一样，只要看到上一章中的静态颜色属性列表，就想编写一个程序来显示它们，也许使用Label的Text属性来识别颜色，而TextColor属性显示实际的颜色。
尽管可以使用FormattedString对象通过单个Label实现此操作，但使用多个Label对象更容易。由于涉及多个Label对象，因此此作业还需要某种方法才能在屏幕上显示所有Label对象。
ContentPage类定义了一个View类型的Content属性，您可以将其设置为一个对象，但只能设置一个对象。显示多个视图需要将Content设置为可以有多个View类型的子类的实例。这样的类是Layout ，它定义了一个IList 类型的Children属性。
按照字母顺序，这四个类是：
他们每个人都以特有的方式安排子控件。 本章重点介绍StackLayout。
视图堆
StackLayout类将其子项排列在一个堆栈中。 它自己只定义了两个属性：
 StackLayout似乎是列表颜色的理想选择。 您可以使用由IList 定义的Add方法将子项添加到StackLayout实例的Children集合中。 这里有一些代码可以从两个数组中创建多个Label对象，然后将每个Label添加到StackLayout的Children集合中：

点击(此处)折叠或打开

  1. Color[] colors = 
  2. {
  3.     Color.White, Color.Silver, Color.Gray, Color.Black, Color.Red,
  4.     Color.Maroon, Color.Yellow, Color.Olive, Color.Lime, Color.Green,
  5.     Color.Aqua, Color.Teal, Color.Blue, Color.Navy, Color.Pink,
  6.     Color.Fuchsia, Color.Purple
  7. };
  8. string[] colorNames =
  9. {
  10.     "White", "Silver", "Gray", "Black", "Red",
  11.     "Maroon", "Yellow", "Olive", "Lime", "Green",
  12.     "Aqua", "Teal", "Blue", "Navy", "Pink",
  13.     "Fuchsia", "Purple"
  14. };
  15. StackLayout stackLayout = new StackLayout();
  16. for (int i = 0; i < colors.Length; i++)
  17. {
  18.     Label label = new Label
  19.     {
  20.         Text = colorNames[i],
  21.         TextColor = colors[i],
  22.         FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
  23.     };
  24.     stackLayout.Children.Add(label);
  25. }
然后可以将StackLayout对象设置为页面的Content属性。
但是使用并行阵列的技术相当危险。 如果他们不同步或有不同数量的元素呢？ 一个更好的方法是将颜色和名称保持在一起，或许以Color和Name字段的小结构，或者作为Tuple 值的数组，或者作为匿名类型，如ColorLoop程序中所示：

点击(此处)折叠或打开

  1. class ColorLoopPage : ContentPage
  2. {
  3.     public ColorLoopPage()
  4.     {
  5.         var colors = new[]
  6.         {
  7.             new { value = Color.White, name = "White" },
  8.             new { value = Color.Silver, name = "Silver" },
  9.             new { value = Color.Gray, name = "Gray" },
  10.             new { value = Color.Black, name = "Black" },
  11.             new { value = Color.Red, name = "Red" },
  12.             new { value = Color.Maroon, name = "Maroon" },
  13.             new { value = Color.Yellow, name = "Yellow" },
  14.             new { value = Color.Olive, name = "Olive" },
  15.             new { value = Color.Lime, name = "Lime" },
  16.             new { value = Color.Green, name = "Green" },
  17.             new { value = Color.Aqua, name = "Aqua" },
  18.             new { value = Color.Teal, name = "Teal" },
  19.             new { value = Color.Blue, name = "Blue" },
  20.             new { value = Color.Navy, name = "Navy" },
  21.             new { value = Color.Pink, name = "Pink" },
  22.             new { value = Color.Fuchsia, name = "Fuchsia" },
  23.             new { value = Color.Purple, name = "Purple" }
  24.         };
  25.         StackLayout stackLayout = new StackLayout();
  26.         foreach (var color in colors)
  27.         {
  28.             stackLayout.Children.Add(
  29.             new Label
  30.             {
  31.                 Text = color.name,
  32.                 TextColor = color.value,
  33.                 FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
  34.             });
  35.         }
  36.         Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
  37.         Content = stackLayout;
  38.     }
  39. }
或者你可以用一个显式的视图集合来初始化StackLayout的Children属性（类似于上一章中初始化的一个FormattedString对象的Spans集合）。 ColorList程序将页面的Content属性设置为StackLayout对象，然后使用17个Label视图初始化其Children属性：

点击(此处)折叠或打开

  1. class ColorListPage : ContentPage
  2. {
  3.     public ColorListPage()
  4.     {
  5.         Padding = new Thickness (5, Device.OnPlatform (20, 5, 5), 5, 5);
  6.         double fontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));
  7.         Content = new StackLayout
  8.         {
  9.             Children =
  10.             {
  11.                 new Label
  12.                 {
  13.                     Text = "White",
  14.                     TextColor = Color.White,
  15.                     FontSize = fontSize
  16.                 },
  17.                 new Label
  18.                 {
  19.                     Text = "Silver",
  20.                     TextColor = Color.Silver,
  21.                     FontSize = fontSize
  22.                 },
  23.                 new Label
  24.                 {
  25.                     Text = "Fuchsia",
  26.                     TextColor = Color.Fuchsia,
  27.                     FontSize = fontSize
  28.                 },
  29.                 new Label
  30.                 {
  31.                     Text = "Purple",
  32.                     TextColor = Color.Purple,
  33.                     FontSize = fontSize
  34.                 }
  35.             }
  36.         };
  37.     }
  38. }
你不需要看到所有17个孩子的代码来获得这个想法！ 不管你如何填写儿童收藏，结果如下：

显然，这不是最佳的。 有些颜色根本看不到，有些颜色太淡，看不清楚。 而且，这个列表在两个平台上溢出了页面，而且没有办法将其向上滚动。
一种解决方法是减小文本大小。 而不是使用NamedSize.Large，请尝试其中一个较小的值。
另一个部分解决方案可以在StackLayout本身中找到：StackLayout定义了一个类型为double的Spacing属性，用于指示在子节点之间留出多少空间。 默认情况下，它是6.0，但您可以将其设置为较小（例如，零），以帮助确保所有项目都适合：

点击(此处)折叠或打开

  1. Content = new StackLayout
  2. {
  3.     Spacing = 0,
  4.     Children =
  5.     {
  6.         new Label
  7.         {
  8.             Text = "White",
  9.             TextColor = Color.White,
  10.             FontSize = fontSize
  11.         },
  12.  …
现在所有的Label视图只占用文本所需的垂直空间。 您甚至可以将间距设置为负值以使项目重叠！
但最好的解决方案是滚动。 StackLayout不自动支持滚动，并且必须添加另一个名为ScrollView的元素，如下一节所述。
但到目前为止显示的颜色程序还有一个问题：它们需要显式地创建一个颜色和名称数组，或者显式地为每个颜色创建Label视图。 对于程序员来说，这有点乏味，因此有点令人厌恶。 可能是自动的？
上一篇：第三章：深入文本（6）
下一篇：第四章：滚动堆栈（2）