标签 Xamarin.Forms 中的可单击 HTML 超链接

Question

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

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

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

问题在于消息有时可能包含超链接，这些超链接当前显示为正确的链接，但是当用户尝试单击链接时，列表项是记录点击的内容，而不是标签，也不是 html 链接标签。

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

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

'您好用户，请到this link登录您的帐户。'

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

谢谢。 编辑：

在上面的例子中，最后的链接是不可点击的。当我单击链接时，整个列表视图项会突出显示，就好像该 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/