如何防止堆栈布局中的标签被切断答案

【问题标题】：How to prevent a label in a stack layout from getting cut off如何防止堆栈布局中的标签被切断
【发布时间】：2017-01-25 20:24:23
【问题描述】：

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

这是我的代码：

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”被截断？

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

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

想法 2：我应该覆盖其中一种布局或尺寸协商方法吗？也许“42”布局可以强制获得所需的宽度。

想法 3：也许我们可以为 iOS 和 Android 提供自定义标签渲染器，以按预期处理尺寸协商。

更新

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

【问题讨论】：

标签： layout xamarin.ios xamarin.android xamarin.forms

【解决方案1】：

如何防止“42”被截断？

可以在“42”Label中设置MinimumWidthRequest，防止被截断。

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,
           },
       },
    },
};

结果如下：

【讨论】：

谢谢，迈克！但是，我知道 MinimumWidthRequest 属性。很抱歉在我的问题中没有说清楚，但“42”只是一个非常简单的例子，它将是我的应用程序中不同长度的动态值。我会相应地更新我的问题。
@Falko 只需保持MinimumWidthRequest 大于您的标签宽度大小，将MinimumWidthRequest 设置为足够大，例如 500。或者客户将标签设置为大于您的标签宽度大小的MinimumWidthRequest 我没有熟悉ios。但在 android 端，您可以在 OnMeasure 函数中获取大小。我觉得ios应该差不多吧。
哇！这。是。只是。惊人的！一个任意大的数字的最小宽度请求会恰到好处地缩放标签，这绝对是违反直觉的。如果左边的文本更短并且没有被截断，黄色框甚至不会比它的文本“42”大。我认为您的 50 值已针对此示例进行了微调。但我会简单地使用像 1000 或 1e6 这样的大常数，它可以在 Android 和 iOS 上完美运行。

【解决方案2】：

在这里您可以使用Grid 代替StackLayout。这将解决您的问题。

网格：

var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

【讨论】：

感谢您的回答。然而，用 Grid 替换 StackLayout 相当复杂，并且取决于周围的应用程序架构，这并不容易实现。它与我的想法 1 类似，可能会带来新的困难。

【解决方案3】：

只需在 Xamarin.Forms 3.4 或更高版本中尝试 Label 的“MaxLines”属性来设置行限制。此外，它是一个可绑定的属性

【讨论】：