我正在尝试在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不会滚动到底部。
答案 0 :(得分:1)
您的xaml看起来不错,请尝试检查几件事:
您没有被遗忘的自定义渲染器,而android项目中已包含禁用滚动的滚动视图
检查滚动时未设置高程,可能是一个错误
我可以想象的另一个“臭虫”:看最后一张卡片:很可能它没有达到160的高度,而只是用insert
填充了父元素,所以没有滚动的余地。而且卡的内容已被VerticalOptions="FillAndExpand"
剪切,因此没有IsClippedToBounds="True"
卡。
答案 1 :(得分:1)
在Android中,此问题是由于卡的高度引起的。三个cardviews与屏幕完美对齐。这就是原因,您没有在Android中看到scrollview。仅当scrollview中的内容大于scrollview高度时,才能使用Scrollview功能。要解决此问题,请尝试以下解决方案。添加添加更多卡片视图,您将看到滚动视图。另一个解决方案是,我已将scrollview的高度设为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>