垂直滚动视图在 xamarin 表单中不起作用。？答案

【问题标题】：Vertiical Scrollview not working in xamarin forms.?垂直滚动视图在 xamarin 表单中不起作用。？
【发布时间】：2019-04-29 00:57:14
【问题描述】：

我正在尝试在 Xamarin 表单中滚动 xfxCardview。但它不是滚动的。这是我的代码

            <ScrollView  Orientation = "Vertical" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
            <xfx:XfxCardView 
                    BackgroundColor="White"
                    CornerRadius="30" 
                Elevation="20"
             HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal">

                    <Grid VerticalOptions="CenterAndExpand"  
             Padding="0"  
             HorizontalOptions="FillAndExpand"  
             BackgroundColor="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="35" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                            <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
                        </Frame>
                        <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Premera restaurant" />
                        <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                        <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
                        <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                        <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                        <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                        <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                        <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                        <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                            <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                    </Grid>
                </StackLayout>
            </xfx:XfxCardView>

                <xfx:XfxCardView 
                    BackgroundColor="White"
                    CornerRadius="30" 
                Elevation="20"
             HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal">

                    <Grid VerticalOptions="CenterAndExpand"  
             Padding="0"  
             HorizontalOptions="FillAndExpand"  
             BackgroundColor="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="35" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="35" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                            <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
                        </Frame>
                        <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Pesto restaurant" />
                        <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"   Source="whitehearticon3"/>
                        <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6"  Text="Bodhami Road, 6" TextColor="Blue"  />
                        <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6"  Text="Indian,Italy,Chinese Kitchen" />
                        <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                        <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />

                        <Label Grid.Row="3" Grid.Column="4"  Grid.ColumnSpan="3"  Text="No available" TextColor="Blue" />
                    </Grid>
                </StackLayout>
            </xfx:XfxCardView>
                    <Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
                    <Label  Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
                    <xfx:XfxCardView 
                    BackgroundColor="White"
                    CornerRadius="30" 
                Elevation="20"
             HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                        <StackLayout Orientation="Horizontal">

                            <Grid VerticalOptions="CenterAndExpand"  
             Padding="0"  
             HorizontalOptions="FillAndExpand"  
             BackgroundColor="Transparent">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="35" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                                    <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
                                </Frame>
                                <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Hero" />
                                <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                                <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
                                <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                                <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                                <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                                <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                                <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                                <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                                <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                            </Grid>
                        </StackLayout>
                    </xfx:XfxCardView>

                </StackLayout>
            </ScrollView>

我不知道我的代码有什么问题，我将方向设置为垂直，也将 VerticalOptions 设置为填充和扩展。滚动视图会起作用还是应该将 XfxCardview 放在 Listview 中。这就是我当前的 UI 的样子

并且 UI 不会滚动到底部。

【问题讨论】：

atm我可以看到总高度160*3 + 20 + 30 + 间距8，是不是刚好合适？
@NickKovalsky 所以我应该降低总高度吗？
您能否截取您的滚动视图的外观，以便我们更了解您的问题？..
@NickKovalsky 我已经添加了截图。
将每张卡片的 VerticalOptions="FillAndExpand" 更改为 VerticalOptions="Start" 并告诉我们

标签： image xamarin.forms frames cardview

【解决方案1】：

在 Android 中，问题是由于卡的高度。三个卡片视图与屏幕完美对齐。这就是原因，您在 Android 中看不到滚动视图。仅当滚动视图中的内容大于滚动视图高度时，滚动视图功能才可用。要解决此问题，请尝试以下解决方案。添加添加更多卡片视图，您将看到滚动视图。另一个解决方案是，我在滚动视图中添加了 300 的高度。您可以根据自己的需求进行测试和修改。

  <ScrollView HeightRequest="300"  Orientation = "Vertical" VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
        <xfx:XfxCardView 
                BackgroundColor="White"
                CornerRadius="30" 
            Elevation="20"
         HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Horizontal">

                <Grid VerticalOptions="CenterAndExpand"  
         Padding="0"  
         HorizontalOptions="FillAndExpand"  
         BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="35" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                        <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
                    </Frame>
                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Premera restaurant" />
                    <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                    <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                    <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                    <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                    <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                    <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                        <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                </Grid>
            </StackLayout>
        </xfx:XfxCardView>

            <xfx:XfxCardView 
                BackgroundColor="White"
                CornerRadius="30" 
            Elevation="20"
         HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Horizontal">

                <Grid VerticalOptions="CenterAndExpand"  
         Padding="0"  
         HorizontalOptions="FillAndExpand"  
         BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="35" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                        <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
                    </Frame>
                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Pesto restaurant" />
                    <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"   Source="whitehearticon3"/>
                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6"  Text="Bodhami Road, 6" TextColor="Blue"  />
                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6"  Text="Indian,Italy,Chinese Kitchen" />
                    <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                    <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />

                    <Label Grid.Row="3" Grid.Column="4"  Grid.ColumnSpan="3"  Text="No available" TextColor="Blue" />
                </Grid>
            </StackLayout>
        </xfx:XfxCardView>
                <Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
                <Label  Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
                <xfx:XfxCardView 
                BackgroundColor="White"
                CornerRadius="30" 
            Elevation="20"
         HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal">

                        <Grid VerticalOptions="CenterAndExpand"  
         Padding="0"  
         HorizontalOptions="FillAndExpand"  
         BackgroundColor="Transparent">
                            <Grid.RowDefinitions>
                              <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="35" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                                <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
                            </Frame>
                            <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Hero" />
                            <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                            <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
                            <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                            <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                            <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                            <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                            <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                            <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                            <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                        </Grid>
                    </StackLayout>
                </xfx:XfxCardView>
            </StackLayout>
        </ScrollView>

【讨论】：

要么添加更多卡片视图，要么将滚动视图高度固定到最小以查看滚动视图...

【解决方案2】：

您的 xaml 看起来不错，请尝试检查几件事：

您没有忘记自定义渲染器，用于在 android 项目中包含禁用滚动的滚动视图
检查它是否在没有设置高度的情况下滚动，可能是一个错误
我可以想象的另一个“错误”：查看最后一张卡片：它可能只是没有达到 160 的高度，而是用VerticalOptions="FillAndExpand" 填充了父级，所以没有什么可以滚动的。并且卡片的内容被 IsClippedToBounds="True" 剪辑，所以它没有 Expand 卡片。

【讨论】：