英文:
Is that possible to get hyperlink clicked and open in WebView from Label with TextType "Html' in MAUI?
问题
我想在MAUI中从TextType为“Html”的标签中打开点击的超链接。我不能使用“Span”，因为这个文本是动态的，将有多个链接。
以下是我的示例代码。
在代码中：
我可以在这里使用WebView，但它存在一些问题，比如 - 由于文本是动态的，难以计算Android-iOS的WebView的高度并在屏幕上显示。我还必须在屏幕上在这个WebView下方显示其他内容。我希望在屏幕上显示所有这些HTML文本，并避免在WebView内部滚动。
英文:
I want to open clicked hyperlink in WebView from Label with TextType "Html" in MAUI. I can't use "Span" just because this text is dynamic and it will have n number of links.
Following is my sample code.
<Label Margin="10" x:Name="MyHtmlLabel"
TextType="Html">
</Label>
In Code behind
MyHtmlLabel.Text = "<!DOCTYPE html>\n<html>\n\n <head>\n <title>Hyperlink Example</title>\n <base href = \"https://www.tutorialspoint.com/\">\n </head>\n\t\n <body>\n <p>Click any of the following links</p>\n <a href = \"/html/index.htm\" target = \"_blank\">Opens in New</a> |\n <a href = \"/html/index.htm\" target = \"_self\">Opens in Self</a> |\n <a href = \"/html/index.htm\" target = \"_parent\">Opens in Parent</a> |\n <a href = \"/html/index.htm\" target = \"_top\">Opens in Body</a>\n </body>\n\n</html>";
I can use webview here but it has some issues like - As text is dynamic it is difficult to calculate height of webview for both Android-iOS and display on screen. I have to display other content as well with this webview on screen below this html. I want to display all this html text on screen and want to avoid scroll inside webview.
答案1
得分: 1
更新：
虽然存在为 span 添加手势的问题，tom-b-iodigital 评论分享了一种解决方法。那就是在标签上添加一个手势，然后 span 的手势也会生效。我认为这可能对你的问题有帮助。
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="或者，点击 " />
<Span Text="{Binding Title}"
TextColor="Blue"
TextDecorations="Underline">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}"
CommandParameter="{Binding Url}" />
</Span.GestureRecognizers>
</Span>
<Span Text=" 查看 .NET MAUI 文档。" />
</FormattedString>
</Label.FormattedText>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
标签的 "TapGestureRecognizer_Tapped" 事件处理程序中不需要任何内容。而且 span 手势也有效（触发 Tap 命令）。对于 span 的动态文本和链接，你可以使用 数据绑定。
==================================
有一个已知问题：标签 span 上不起作用的手势，涉及到无法在 span 上使用 GestureRecognizer。因此，你可以考虑将 Label 作为替代方案，但需要进行一些自定义以使其行为类似于 span。请考虑以下代码：
public class HyperlinkLabel : Label
{
public static readonly BindableProperty UrlProperty = BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkLabel), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public HyperlinkLabel()
{
TextDecorations = TextDecorations.Underline;
TextColor = Colors.Blue;
GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
在使用此自定义标签时，可能要使用 StackLayout（垂直或水平）、Grid 或 FlexLayout（感谢 @ToolmakerSteve 的评论）来管理布局。以下是一个使用自定义标签的示例：
<HorizontalStackLayout>
...
<local:HyperlinkLabel Text="{Binding MyText1}"
Url="{Binding MyUrl1}"
HorizontalOptions="Start" />
<local:HyperlinkLabel Text="{Binding MyText2}"
Url="{Binding MyUrl2}"
HorizontalOptions="End" />
<HorizontalStackLayout>
希望这对你有用。
英文:
Update:
Although there is an issue for add Gesture on span, tom-b-iodigital comments share a workaround. That's add a Gesture on the label, then the span gesture also work. I think that may be helpful to your question.
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<Span Text="{Binding Title}"
TextColor="Blue"
TextDecorations="Underline">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}"
CommandParameter="{Binding Url}" />
</Span.GestureRecognizers>
</Span>
<Span Text=" to view .NET MAUI documentation." />
</FormattedString>
</Label.FormattedText>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
Don't need anything in TapGestureRecognizer_Tapped event handler for label. And the span gesture also works (Tap command will execute). For dynamic text and links for span, you could use data binding
==================================
There is a known issue: Gestures don't work on Label Spans which is about not being able to use GestureRecognizer on span. So you may use Label as an alternative but with some customization to make it act like a span. Consider the following code:
public class HyperlinkLabel : Label
{
public static readonly BindableProperty UrlProperty = BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkLabel), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public HyperlinkLabel()
{
TextDecorations = TextDecorations.Underline;
TextColor = Colors.Blue;
GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
When consuming this custom label, probably use StackLayout(Vertical or Horizontal), Grid or FlexLayout (thanks to @ToolmakerSteve comment) to manage the layout. The following is an example for consuming the custom label:
<HorizontalStackLayout>
...
<local:HyperlinkLabel Text="{Binding MyText1}"
Url="{Binding MyUrl1}"
HorizontalOptions="Start" />
<local:HyperlinkLabel Text="{Binding MyText2}"
Url="{Binding MyUrl2}"
HorizontalOptions="End" />
<HorizontalStackLayout>
Hope it works.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论