xamarin - Xamarin.forms中的Cardview？

Question

有谁知道是否可以使用 Xamarin.Forms 创建CardView样式(可滚动)列表？我们需要它在iOS和Android上将呈现为相同的。还需要调整阴影等属性(略微提高每张卡)

Answer 1

这是一个小部件:https://github.com/tiger4589/Xamarin.Forms-CardView

Xamarin.Froms中的Cardview控件。
仅将其安装在您的共享项目中，并在页面的xaml中使用以下导入:

xmlns:cardView="clr-namespace:CardView;assembly=CardView"

只需在 ListView 的视单元中使用控件即可。

Example screenshot: each card is a row in listview

以下代码是上述控件的用法示例:

<ListView
            x:Name="listView"
            Margin="0,8,0,0"
            HasUnevenRows="True"
            ItemTapped="Handle_ItemTapped"
            ItemsSource="{Binding HouseholdDetail}"
            SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="8,8,8,8" Orientation="Vertical">
                            <cardView:CardView
                                BackgroundColor="White"
                                CardViewHasShadow="True"
                                HeightRequest="220">
                                <cardView:CardView.CardViewContent>
                                    <StackLayout
                                        Padding="10"
                                        HorizontalOptions="Center"
                                        Spacing="10"
                                        VerticalOptions="Center">
                                        <Image HeightRequest="96" Source="{Binding Image}" />
                                        <BoxView
                                            HeightRequest="1"
                                            WidthRequest="275"
                                            Color="LightGray" />
                                        <Grid>
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="0"
                                                Margin="15,0,0,0"
                                                FontSize="Medium"
                                                Text="{Binding FullName}" />
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="1"
                                                Margin="0,0,15,0"
                                                FontSize="Medium"
                                                HorizontalTextAlignment="End"
                                                Text="{Binding Relation}" />
                                        </Grid>
                                        <BoxView
                                            HeightRequest="1"
                                            WidthRequest="275"
                                            Color="LightGray" />
                                        <Grid>
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="0"
                                                Margin="15,0,0,0"
                                                FontSize="Medium"
                                                Text="{Binding LeavesAt}" />
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="1"
                                                Margin="0,0,15,0"
                                                FontSize="Medium"
                                                HorizontalTextAlignment="End"
                                                Text="{Binding ArrivesAt}" />
                                        </Grid>
                                    </StackLayout>
                                </cardView:CardView.CardViewContent>
                            </cardView:CardView>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

在这里，您可能会注意到自己具有的自由度，例如可以定义是否具有阴影，并使用Xamarin默认布局来设计cardview的整个布局。