时间戳

首页 > 解决方案 > 如何在标签或图像下方添加 Webview 并将所有元素一起滚动到 IOS 和 Android？

c# - 如何在标签或图像下方添加 Webview 并将所有元素一起滚动到 IOS 和 Android？

问题描述

我正在为 IOS 和 Android 开发一个 Xamarin.Forms 应用程序。我在 XAML 文件中的代码是这样的：

<StackLayout BackgroundColor="White" Padding="1" VerticalOptions="FillAndExpand">
    <Image HeightRequest="150" Aspect="AspectFill" Source="{Binding Post.ImageUrl}" />
    <Label Text="{Binding Post.Title}" VerticalOptions="FillAndExpand" FontFamily="{StaticResource BoldFont}" FontSize="20" />
    <Label Text="{Binding Post.CreatedOn}" VerticalOptions="FillAndExpand" FontFamily="{StaticResource NormalFont}" FontSize="12" />
    <WebView x:Name="WebViewer" HeightRequest="500" VerticalOptions="FillAndExpand" BackgroundColor="White">
        <WebView.Source>
           <HtmlWebViewSource Html="{Binding Post.Data.Content}" />
        </WebView.Source>
    </WebView>
    <Label Text="Comments" FontSize="12" />
</StackLayout>

当我模拟应用程序时，只有 Webview Scrolls 和所有其他元素保持固定不变。Stackoverflow 上还有另一个类似的问题，但该解决方案不起作用，它没有回答我对 IOS 的问题，它仅针对 Android。

这张图片显示了 webview 滚动，它的兄弟姐妹留在原地

我希望他们都一起滚动，这样它就像一页一样。这应该是一个跨平台的解决方案，所以我只需要为 IOS 和 Android 编写一次代码。我怎样才能做到这一点？

标签： c#xamlxamarinxamarin.formswebview

解决方案

你可以尝试类似的东西

设计方面

 <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinTest.View.WebViewDemo">
        <ContentPage.Content>
            <ScrollView>
                <StackLayout BackgroundColor="White" Padding="1" VerticalOptions="FillAndExpand">
                    <Image HeightRequest="150" Aspect="AspectFill" Source="home" />
                    <Label Text="Header"  FontSize="20" />
                    <Label Text="Subheader"   FontSize="12" />
                        <WebView  Source="http://www.google.com"   x:Name="WebViewer"  BackgroundColor="White">
                        </WebView>
                    <Label Text="Comments" FontSize="12" />
                </StackLayout>
            </ScrollView>
        </ContentPage.Content>
    </ContentPage>

编码端

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace XamarinTest.View
{
    public partial class WebViewDemo : ContentPage
    {
        public WebViewDemo()
        {
            InitializeComponent();
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();

        }

        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            WebViewer.HeightRequest = height;
            WebViewer.WidthRequest = width;

        }
    }
}

推荐阅读