VerticalStackLayout 中的 WebView 大小不正确 - dotnet Maui

Question

在我的应用程序中，我希望在verticalStackLayout中有一个WebView，周围有一个滚动视图。因此，用户应该向下滚动 WebView，然后才能看到其下方的内容（在本例中为标签）。然而，这似乎不起作用，因为 WebView 在 VerticalStackLayout 中始终只占用最小的空间。我也没有让它与任何 VerticalOptions 一起使用，有什么办法可以达到我想要的结果吗？

我的情况发生了什么（WebView 仅显示为带有滚动条的标签上方的行）：

XAML：

    <ScrollView>
        <VerticalStackLayout>
            <WebView Source="test.html" Background="red"/>
            <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>

Answer 1

test.html

的内容高度应该不够。

为了进行测试，您可以尝试为您的

WebView

设置固定高度。

例如：

<ScrollView>
    <VerticalStackLayout>
        <WebView Source="test.html" Background="red" HeightRequest="1000"/>
        <Label 
        Text="Welcome to .NET MAUI!"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
    </VerticalStackLayout>
</ScrollView>

如果您希望

WebView

占据除 Label 高度之外的剩余高度，则可以使用

Grid

来实现。我们只需为第一行设置

 <RowDefinition Height="*" />

即可。

请参考以下代码：

<ScrollView>
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="90" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <WebView Source="test.html" Background="red" Grid.Row="0"/>
        <Label   Grid.Row="1"
        Text="Welcome to .NET MAUI!"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
    </Grid>
</ScrollView>