.NET MAUI项目iOS和Android端垂直滚动失效问题求助

问题分析 #

你遇到的ScrollView垂直滚动失效、替换自定义CardBopa组件为文本后恢复正常的情况，核心原因大概率是自定义组件高度计算异常，或者外层布局未正确限制ScrollView的可用高度，导致滚动逻辑无法触发。

解决方案 #

1. 修正根布局，限制ScrollView的可用高度 #

当前根布局为VerticalStackLayout，它会自动根据子元素高度无限扩展，导致ScrollView被拉伸至能容纳所有内容的高度，自然不会触发滚动。将根布局改为Grid，让ScrollView占据页面剩余空间：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             xmlns:componentes="clr-namespace:App_BOPA.Componentes"
             
             x:Class="App_BOPA.Views.Inici">
    <!-- 替换为Grid，HeaderMain占固定高度行，ScrollView占剩余空间 -->
    <Grid RowDefinitions="Auto,*">
        <componentes:HeaderMain Grid.Row="0" />

        <ScrollView
            Grid.Row="1"
            Orientation="Vertical"
            VerticalScrollBarVisibility="Always">

            <Grid
                RowDefinitions="Auto,Auto">
                <Image
                    Source="bg_image_banner.png"/>
                <VerticalStackLayout
                    Grid.Row="0">

                <Label
                    Text="Butlletí Oficial Del Principat d'Andorra"
                    FontSize="Title"
                    HorizontalTextAlignment="Center"
                    Padding="16,32,16,0"/>

                <SearchBar
                    Margin="12,16,12,0"
                    BackgroundColor="White"
                    Placeholder="Que contingui"
                    ios:SearchBar.SearchBarStyle="Minimal"/>

                <Button
                    BackgroundColor="#16A085"
                    Text="Cerca"
                    FontSize="Body"
                    TextColor="#FFFFFF"
                    Margin="16"/>

                </VerticalStackLayout>

                <VerticalStackLayout
                    Margin="16,0"
                    Grid.Row="1">

                    <Label
                        Text="Últims butlletins"
                        FontSize="Large"
                        HorizontalTextAlignment="Start"
                        Padding="0,32,0,8"/>


                    <componentes:CardBopa />

                    <componentes:CardBopa
                        Margin="0,8"/>

                    <componentes:CardBopa
                        Margin="0,8"/>

                    <componentes:CardBopa
                        Margin="0,8"/>
            
                </VerticalStackLayout>

            </Grid>
        </ScrollView>
    </Grid>
</ContentPage>

2. 检查并修复CardBopa组件的高度计算 #

自定义组件内部若存在以下情况，会导致高度计算错误：

• 组件根布局设置了固定高度（如HeightRequest值过小），内容被截断后ScrollView无法感知真实高度
• 内部控件未设置正确的布局约束，比如HorizontalStackLayout子控件未撑开高度、Grid行/列定义未使用Auto或*

确保CardBopa的根布局使用自适应高度的容器，示例结构如下：

<!-- CardBopa示例结构 -->
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App_BOPA.Componentes.CardBopa">
    <Frame Margin="0" Padding="16" CornerRadius="8">
        <VerticalStackLayout>
            <!-- 子控件自然撑开高度，无需强制固定 -->
            <Label Text="示例标题" FontSize="Headline"/>
            <Label Text="示例多行内容，确保能自动撑开组件高度" FontSize="Body" LineBreakMode="WordWrap"/>
        </VerticalStackLayout>
    </Frame>
</ContentView>

3. 验证滚动逻辑 #

修改完成后运行项目：

• 若ScrollView内容高度超过其可用空间，应该会正常触发垂直滚动
• 若仍失效，可临时给CardBopa设置固定HeightRequest（如HeightRequest="100"），测试滚动是否恢复，以此确认是否为组件高度计算问题

内容的提问来源于stack exchange，提问作者Samuel Pimenta