Label Xamarin.Forms 中的可点击 HTML 超链接

Question

我正在尝试使 xaml 标签中的 HTML 超链接可单击。我创建了一些类，这些类从 API 获取包含 HTML 的字符串，并在 Android 和 iOS 中的自定义标签渲染器中将其正确渲染为 HTML。为了更好地理解我的困境，有必要解释一下我的使用范围。

在我的应用程序中，我有一个消息传递组件，它仅使用 API 来从网站上发布和获取对话，该网站主要用于更好地帮助我们的用户，因为我们的办公室因冠状病毒而关闭。网站上的消息中心允许像网络论坛帖子一样复杂的文本格式，例如粗体、斜体、超链接等。

为了在移动设备上正确显示此内容，我必须创建一个自定义标签渲染器，它将采用带有 HTML 标签的字符串并将其正确显示为消息正文。这是一个足够简单的任务。

问题在于，消息有时可能具有超链接，当前显示为正确的链接，但当用户尝试单击链接时，列表项会注册点击，而不是标签或标签内的 html 链接。

预期结果是，当用户单击列表中标签内的超链接时，它将在设备默认浏览器中打开该超链接。

我知道一种解决方案可能是解析消息正文中的任何链接，创建链接列表，然后动态地将跨度添加到标签，每个标签都有自己的手势识别器，但这对我来说是不可能的，因为超链接有时会在对话中途出现。消息正文的示例可以是：

“您好，用户，请访问此链接登录您的帐户。”

我知道有比这更好的方法来创建消息应用程序，但移动端的主要目的是让用户更容易地访问员工的回复，以及对员工消息的简单聊天回复。工作人员将专门使用该网站来回复用户，并可以利用复杂的编辑器更好地帮助用户。

谢谢。编辑：

在上面的示例中，末尾的链接不可点击。当我单击链接时，整个列表视图项目都会突出显示，就好像该 ui 元素的优先级高于其中的标签。

相关代码：

<ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame
                        Margin="5"
                        Padding="0"
                        BorderColor="LightGray"
                        CornerRadius="15"
                        HasShadow="False">
                        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <StackLayout
                                Padding="5"
                                BackgroundColor="#f5f5f5"
                                Orientation="Horizontal">
                                <Label
                                    Margin="5,2.5,5,2.5"
                                    BackgroundColor="Transparent"
                                    FontAttributes="Bold"
                                    FontSize="Small"
                                    HorizontalOptions="FillAndExpand"
                                    HorizontalTextAlignment="Start"
                                    Text="{Binding SentBy}"
                                    TextColor="Black"
                                    VerticalOptions="FillAndExpand" />
                                <Label
                                    Margin="5,2.5,5,2.5"
                                    BackgroundColor="Transparent"
                                    FontAttributes="Bold"
                                    FontSize="Small"
                                    HorizontalOptions="FillAndExpand"
                                    HorizontalTextAlignment="End"
                                    Text="{Binding Sent}"
                                    TextColor="Black"
                                    VerticalOptions="FillAndExpand" />
                            </StackLayout>
                            <StackLayout Padding="5" Orientation="Horizontal">
                                <Label
                                    Margin="2.5"
                                    BackgroundColor="Transparent"
                                    FontSize="Small"
                                    HorizontalOptions="FillAndExpand"
                                    HorizontalTextAlignment="Start"
                                    Text="{Binding Body}"
                                    TextColor="Black"
                                    TextType="Html"
                                    VerticalOptions="FillAndExpand" />
                            </StackLayout>
                        </StackLayout>
                    </Frame>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

Answer 1

重新发布/编辑我之前的答案，因为它因不完整而被删除。

这应该有一些帮助：

将标签的一部分显示为可单击的链接，一直是 Xamarin.Forms 长期以来渴望的功能。随着 3.2.0 的发布，这现在成为可能。

可攻丝跨度

创建一个带有 FormattedText 属性和跨度的标签，如下所示。对于那些不熟悉的人来说，标签有一个名为 FormattedText 的属性。它允许您将文本拆分为单独的部分，以便您可以对每个部分进行不同的格式设置。

<Label HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Hello " />
            <Span Text="Click Me!"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding ClickCommand}"
                                          CommandParameter="https://xamarin.com" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" Some more text." />
        </FormattedString>
    </Label.FormattedText>
</Label>

在您的 ViewModel 中，添加以下命令。

public ICommand ClickCommand => new Command<string>((url) =>
{
    Device.OpenUri(new System.Uri(url));
});

这将产生一个带有 Click Me! 的标签。文本突出显示。点击文本将打开浏览器并转到 xamarin.com。

参考： https: //xamarinhelp.com/hyperlink-in-xamarin-forms-label/