如何解决 .NET MAUI 中 WebView 和 ScrollView 内 CarouselView 的间距问题？

Question

（https://i.sstatic.net/mXYjWeDs.png） 我正在构建一个 .NET MAUI 应用程序，它显示具有以下功能的文章：

从右向左或从左向右滑动可在文章之间移动。 上下滚动可查看每篇文章中的 HTML 内容。 问题： 我的文章有不同的内容长度（从 ViewModel 绑定）。当我从右向左滑动查看下一篇文章时，我注意到一个问题，特别是第三个项目，该项目具有较长的 HTML 内容。滚动到本文底部会显示内容下方多余的多余空间。

代码设置：我使用 ScrollView 包裹 WebView 来实现平滑的垂直滚动。然而：

当我使用ScrollView时，滚动很流畅，但我遇到了额外空间的问题，尤其是对于文本较多的文章。 如果我删除 ScrollView，多余的空间就会消失，但滚动会变得不太流畅，并且垂直滚动时内容有时会无意中滑到下一篇文章（对于用户体验来说不理想）。 我尝试过的：

在 ScrollView 中包装和展开 WebView。 调整布局参数，但我无法在不影响滚动平滑度的情况下消除多余的空间。 问题： 有没有办法解决这个额外的空间问题，同时保持流畅的滚动体验？任何为此用例设置 CarouselView、WebView 和 ScrollView 的建议或替代方法将不胜感激！

<ContentPage.Content>
    <CarouselView
        x:Name="carouselView"
        BackgroundColor="LightGreen"
        IsScrollAnimated="True">
        <CarouselView.ItemsSource>
            <Binding Path="CarouselItems" />
        </CarouselView.ItemsSource>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <ScrollView>
                    <WebView
                        x:Name="webView"
                        BackgroundColor="LightBlue"
                        Source="{Binding HtmlContent}" />
                </ScrollView>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</ContentPage.Content>

 public partial class MainPage : ContentPage
 {
     public MainPage()
     {
         InitializeComponent();
         BindingContext = new MainVM();
     }
 }

    public class MainVM
    {
        public ObservableCollection<CarouselItem> CarouselItems { get; set; } = new ObservableCollection<CarouselItem>
    {
        new CarouselItem
        {
            Title = "Slide 1",
            HtmlContent = new HtmlWebViewSource
            {
                Html = @"
                    <div class='carousel-item'>
                        <h1>This is the content for Slide 1</h1>
                        <p>This is a sample content for slide 1.</p>
                    </div>"
            }
        },
        new CarouselItem
        {
            Title = "Slide 2",
            HtmlContent = new HtmlWebViewSource
            {
                Html = @"
                    <p data-id=""04c118d5-9a8a-45fc-86e9-980e1b2f465a"">In case anyone might have thought otherwise, the CQC has...</p>"
            }
        },
        new CarouselItem
        {
            Title = "Slide 3",
            HtmlContent = new HtmlWebViewSource
            {
                Html = @"
                    <p data-id=""3b241bef-b530-4649-b9f1-234681fca535"">Doctors working for an NHS body (or the HSC in Northern Ireland) will have access to NHS indemnity for claims for negligence through a clinical negligence scheme. But there are many circumstances where a doctor may need help and advice that are not included in NHS indemnity.</p> "
            }
        }
    };
    }

我的尝试和预期结果：

为了解决此问题，我创建了一个 .NET MAUI 概念验证 (POC) 应用程序，它使用 CarouselView、WebView 和 ScrollView 的组合来复制空间问题。我的项目的 API 返回 HTML 格式的文章数据，该数据绑定到视图。出于测试目的，我直接在 ViewModel 中硬编码不同长度的 HTML 内容来模拟真实数据。

我尝试过的：

同时使用 ScrollView 和 WebView：我将 WebView 包裹在 ScrollView 中以实现平滑的垂直滚动。然而，这种设置会导致较长文章的底部出现不必要的额外空间。 调整布局属性：我尝试了 ScrollView 上的最小高度等属性。启用热重载后，它似乎可以暂时工作 - 正确显示内容而无需额外空间。然而，在停止并重新启动应用程序后，额外空间问题又出现了，这表明这些布局调整可能只能部分或暂时起作用。 预期结果： 我需要一个解决方案，无论 HTML 内容的长度如何，都可以防止页面底部出现额外的空间。理想情况下，此设置应在应用程序启动期间一致工作，而不依赖于热重载。

测试环境： 我在 Android 设备和模拟器上测试了此设置，两者都显示了相同的额外空间问题。

Answer 1

这是我的代码的修改部分。我的代码运行良好。

 <Frame> 
   <ScrollView> 
     <StackLayout> 
           <WebView x:Name="webView" BackgroundColor="LightBlue" Source=" 
            {Binding HtmlContent}"> 
           </WebView>
     </StackLayout>
  </ScrollView> 
</Frame>