ScrollView 在 Xamarin 中截断网格

Question

我正在尝试在 Xamarin Forms 中实现可滚动的网格。但是网格被布局截断了。

Image of the problem

我用下面的代码重现了我的问题，其中我有：

网格 -> RelativeLayout -> ScrollView -> 网格
(-> = 'contains')

<?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="bugs2.MainPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Fill="Red" WidthRequest="500" HeightRequest="300" HorizontalOptions="Start" />
        <RelativeLayout Grid.Row="1" VerticalOptions="FillAndExpand" >
            <Rectangle Fill="Pink"  WidthRequest="500" HeightRequest="300" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=15}"/>
            <ScrollView  VerticalOptions="FillAndExpand" Padding="0" HorizontalOptions="FillAndExpand" Margin="0" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=15}">
                <Grid BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Fill="Orange" WidthRequest="500" HeightRequest="300" HorizontalOptions="Start" />
                    <Label Grid.Row="1" Grid.Column="0" Text="Etiam luctus" TextColor="Black"/>
                    <Label Grid.Row="2" Grid.Column="0" TextColor="Black" FontSize="Caption"  Text="Praesent volutpat, magna in condimentum molestie, nunc turpis ultricies dolor, a pulvinar lorem neque vitae sem. Phasellus ultricies vulputate lorem quis mattis. Sed accumsan sapien nulla, sit amet commodo augue posuere non. Donec gravida pulvinar erat. Nam dictum hendrerit elit, sed dapibus lectus posuere in. Morbi ullamcorper, mi a molestie pulvinar, urna lorem euismod ante, sed condimentum enim elit sit amet augue. Vestibulum aliquam feugiat sapien. " />
                    <Label Grid.Row="3" Grid.Column="0" Text=" Phasellus quis" TextColor="Black"/>
                    <Label Grid.Row="4" Grid.Column="0" TextColor="Black" FontSize="Caption"  Text="Praesent volutpat, magna in condimentum molestie, nunc turpis ultricies dolor, a pulvinar lorem neque vitae sem. Phasellus ultricies vulputate lorem quis mattis. Sed accumsan sapien nulla, sit amet commodo augue posuere non. Donec gravida pulvinar erat. Nam dictum hendrerit elit, sed dapibus lectus posuere in. Morbi ullamcorper, mi a molestie pulvinar, urna lorem euismod ante, sed condimentum enim elit sit amet augue. Vestibulum aliquam feugiat sapien. " />
                </Grid>
            </ScrollView>
        </RelativeLayout>
    </Grid>
</ContentPage>

我希望能够看到网格的全部内容。

欢迎任何提示！

Answer 1

将 ScrollView 移到 RelativeLayout 之外。这将使它能够正确地管理其内部。

根据您的最终目标，将其放在一个新行中：Grid.Row="2"，或者跨越两行：Grid.Row="1" Grid.RowSpan="2"。也许有最高利润率。

使用网格 RowDefinitions="Auto,Auto,*"，如果您希望内部网格的行使用所有剩余的垂直 space。

<Grid RowDefinitions="Auto,Auto,*">
    <Rectangle Grid.Row="0" ... />
    <RelativeLayout Grid.Row="1" .../>
    <ScrollView Grid.Row="2" ...>
        <Grid ...</Grid>
    </ScrollView>
</Grid>

ScrollView 在 Xamarin 中截断网格

ScrollView truncates Grid in Xamarin

xaml

xamarin

xamarin.forms