android - iOS 和 Android 之间的 Xamarin Forms 文本布局差异

Question

我正在学习 Charles Petzold 的“使用 Xamarin.Forms Preview Edition 2 创建移动应用”，并且我通过添加背景颜色来研究第 4 章中的最后一个代码示例以查看元素的各种边界框。

但是，当我在 Android 上运行测试应用程序时，我注意到在 Android 上有一个额外的“框”添加到添加到 textStack 的每个文本标签上方。

但是，一张图胜过千言万语:

这是我的 iOS 版本的输出:http://imgur.com/foJxAQp

这是我的 Android 版本的输出:http://imgur.com/3gpO4pG

如您所见，在 Android 版本中，每个显示的文本标签上方都有一个“额外”的蓝色框。

这是我在第 4 章中的 BlackCatPage 类的代码，尽管颜色有所变化，但与书中的代码几乎相同:

using System;
using System.IO;
using System.Reflection;

using Xamarin.Forms;

namespace BlackCat
{
    public class BlackCatPage : ContentPage
    {
        public BlackCatPage ()
        {
            StackLayout mainStack = new StackLayout ();
            StackLayout textStack = new StackLayout {
                Padding = new Thickness (5),
                Spacing = 10,
                BackgroundColor = Color.Red
            };

            Assembly assembly = GetType ().GetTypeInfo ().Assembly;
            String resource = "BlackCat.Texts.lorem.txt";

            using(Stream stream = assembly.GetManifestResourceStream(resource)) {
                using(StreamReader reader = new StreamReader(stream)) {
                    bool gotTitle = false;
                    string line;

                    while(null != (line = reader.ReadLine())) {
                        Label label = new Label {
                            Text = line,
                            TextColor = Color.White,
                            BackgroundColor = Color.Blue
                        };

                        if(!gotTitle) {
                            label.HorizontalOptions = LayoutOptions.Center;
                            label.FontSize = Device.GetNamedSize(NamedSize.Medium, label);
                            label.FontAttributes = FontAttributes.Bold;
                            label.TextColor = Color.Black;
                            label.BackgroundColor = Color.Yellow;
                            mainStack.Children.Add(label);
                            gotTitle = true;
                        }
                        else {
                            textStack.Children.Add(label);
                        }
                    }
                }
            }

            ScrollView scrollView = new ScrollView {
                Content = textStack,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Padding = new Thickness(5, 0)
            };

            mainStack.Children.Add(scrollView);

            Content = mainStack;

            BackgroundColor = Color.White;

            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
        }
    }
}

我想了解为什么在 Android 上会呈现一个额外的蓝色框。

Answer 1

我发现了问题。空行!

我的文本源在段落之间包含一个空行。 iOS 和 Android 之间的渲染方式似乎略有不同。即，iOS 似乎跳过了它们，而 Android 似乎包含了它们(还不确定为什么)。

无论如何，知道是什么导致了问题，目前插入一个简单的空行检查以避免创建一个空的 Label 似乎可以完成这项工作:

while(null != (line = reader.ReadLine())) {
  if (line.Trim().Length == 0) {
    continue;
  }

  ...
}