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

Question

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

c#htmlxamarin.formscross-platform

5

我正在尝试使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>

- cjpartin

进一步说，Label 现在原生支持 HTML，您不必创建自定义渲染器。 - Jason

2

如何使标签内的超链接、列表内的超链接可点击。我会添加图片来演示我的意思。 - cjpartin

“我理解一个解决方案……” - 这听起来对我来说非常合理。我不确定为什么你认为这不会起作用。 - Jason

3

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#display-html - Jason

1

在字符串中查找链接是一个众所周知的问题，有许多解决方案。 - Jason

显示剩余8条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raul Marquez · Accepted Answer

由于之前的回答不完整，现在我重新发布并进行编辑。

以下内容可能会对您有所帮助：

长期以来，Xamarin.Forms一直希望实现将标签的一部分作为可点击链接显示的功能。随着3.2.0版本的发布，这个愿望终于实现了。

可点击的Span

创建一个带有FormattedText属性和如下所示的span的标签。对于那些不熟悉的人来说，标签有一个称为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));
});

这将生成一个标签，其中“点击我！”文本会突出显示。点击该文本将导致浏览器打开并转到 xamarin.com。

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