layout - 如何防止堆栈布局表单中的标签被切断

Question

我有两个相邻的标签。第一个很长，如有必要应该被截断。第二个应该完全显示 - 无论如何。

这是我的代码:

MainPage = new ContentPage {
    Content = new StackLayout {
        Orientation = StackOrientation.Horizontal,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        BackgroundColor = Color.Orange,
        Padding = 10,
        Children = {
            new Label {
                Text = "The answer to life the universe and everything",
                HorizontalOptions = LayoutOptions.Start,
                LineBreakMode = LineBreakMode.TailTruncation,
                BackgroundColor = Color.Yellow,
            },
            new Label {
                Text = "42",
                HorizontalOptions = LayoutOptions.EndAndExpand,
                LineBreakMode = LineBreakMode.NoWrap,
                BackgroundColor = Color.Yellow,
            },
        },
    },
};

这就是我得到的:



我的问题:如何防止“42”被切断？

当前结果的解释:我想我知道，为什么第二个标签太小了。在截断第一个文本之前协商两个标签的大小。所以两个标签都需要缩小一点，尽管第一个标签可以更好地处理它。

想法一:我尝试了相对布局(而不是堆栈布局)。然而，这是一种相当复杂的方法，我在 iOS 和 Android 上得到不同的结果。所以我希望有一个更简单的修复。

思路二:我应该覆盖布局或大小协商方法之一吗？也许“42”布局可以强制获得所需的宽度。

想法三:也许我们可以为 iOS 和 Android 提供自定义标签渲染器，以按预期处理大小协商。

更新

“42”只是一个例子。在我的最终应用程序中，这将动态更改并且可以是不同长度的字符串。所以设置 MinimumWidthRequest如果不知道渲染字符串的宽度，则无济于事。

Answer 1

How can I prevent "42" from getting cut off?

您可以设置 MinimumWidthRequest在“42” Label以防止它被切断。

详情 MinimumWidthRequest请引用 document的备注部分.

代码示例:

MainPage = new ContentPage {
    Content = new StackLayout {
        Orientation = StackOrientation.Horizontal,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        BackgroundColor = Color.Orange,
        Padding = 10,
        Children = {
           new Label {
              Text = "The answer to life the universe and everything The answer to life the universe and everything",
              HorizontalOptions = LayoutOptions.Start,
              LineBreakMode = LineBreakMode.TailTruncation,
              BackgroundColor = Color.Yellow,
           },
           new Label {
              MinimumWidthRequest = 50,
              Text = "42",
              HorizontalOptions = LayoutOptions.EndAndExpand,
              LineBreakMode = LineBreakMode.NoWrap,
              BackgroundColor = Color.Yellow,
           },
       },
    },
};

结果如下: