image - 垂直滚动视图在 xamarin 表单中不起作用。?
问题描述
我正在尝试在 Xamarin Forms 中滚动 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 不会滚动到底部。
解决方案
您的 xaml 看起来不错,请尝试检查几件事:
你没有被遗忘的滚动视图自定义渲染器,android 项目中包含禁用滚动
检查它是否在没有设置高度的情况下滚动,可能是一个错误
我可以想象的另一个“错误”:查看最后一张卡片:它可能只是没有达到 160 的高度,而是填充了父级,
VerticalOptions="FillAndExpand"
所以没有什么可以滚动的。并且卡片的内容被剪裁了,IsClippedToBounds="True"
所以它没有Expand
卡片。
推荐阅读
- jquery - 使用 jQuery 切换 flex div
- selenium - Selenium 启动的 WebBrowser 是否像普通浏览器一样消耗相同的品牌宽度?
- c - 取消引用指针的越界警告
- android - Android 重叠个人资料照片视图
- java - Spring MVC - 在 localhost:8080 看不到预期的输出
- scala - 使用 flatMap 设置增量
- kubernetes - 为什么自定义域需要 kubernetes Ingress?
- jquery - .inArray() 用于带键的数组?
- sql - PostgreSQL jsonb 更新多个嵌套字段
- nlp - 朴素贝叶斯类别关键字