ScrollView在Xamarin中截斷網格

我正在嘗試在 Xamarin Forms 中實作一個可滾動的網格。但是 Grid 被布局截斷了。

問題圖片

我用下面的代碼重現了我的問題，其中我有：

網格 -> 相對布局 -> ScrollView -> 網格
（-> = '包含'）

<?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>

我希望能夠看到 Grid 的全部內容。

歡迎任何提示！

uj5u.com熱心網友回復：

將 ScrollView 移到 RelativeLayout 之外。這將允許它正確管理其內部。

根據您的最終目標，將其放在新行中：Grid.Row="2"或跨越兩行：Grid.Row="1" Grid.RowSpan="2"。也許有一個最高的利潤。

使用 Grid RowDefinitions="Auto,Auto,*"，如果您希望該內部 Grid 的行使用所有剩余的垂直空間。

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

標籤：xml 沙马林 xamarin.forms

上一篇：主題化Bootstrap(4)在SCSS中使用CSSVars

下一篇：如何將非英文字母傳遞給Json