列表视图中带有卡片/框架的页面（X.Forms 4.6+）答案

【问题标题】：Page with cards/frames in a listview (X.Forms 4.6+)列表视图中带有卡片/框架的页面（X.Forms 4.6+）
【发布时间】：2021-01-05 02:04:39
【问题描述】：

我有一个关于 X.Forms 的问题。有谁知道我如何在 X.Forms 中构建这样的页面？

页面流程：用户必须能够创建注释和/或进行更改。我想在另一个下方显示这些注释（最好在可滚动的列表视图中）。

这是我的代码实现，但运行不正常。

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xamarin.Forms.TestPage">
    <ContentPage.Content>
        <AbsoluteLayout BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Blue"  AbsoluteLayout.LayoutBounds="1,0,1,0.1" AbsoluteLayout.LayoutFlags="All"  />
            <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.9" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray"/>
            <ListView>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Frame>
                                <Editor></Editor>
                                <Button x:Name="CreateOrChangeButton" Text="Create/Change" Clicked=""></Button>
                                <Button x:Name="DeleteButton" Text="Delete" Clicked=""></Button>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

【问题讨论】：

试过 GridView？
创建一个看起来像您图像中的模板的 ViewCell。您应该使用 stacklayout 或 grid 在 Frame 内布局视图。
@JackHua-MSFT 你有样品（代码）吗？

标签： xamarin.forms cardview absolutelayout content-pages

【解决方案1】：

应该是这样的：

<ListView RowHeight="300" SeparatorVisibility="None" BackgroundColor="White">

    <ListView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>mono</x:String>
            <x:String>monodroid</x:String>
            <x:String>monotouch</x:String>
        </x:Array>
    </ListView.ItemsSource>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Frame Margin="40" BackgroundColor="Yellow" HeightRequest="220">

                        <StackLayout>
                            <Editor Text="test" HeightRequest="150"></Editor>

                            <StackLayout Orientation="Horizontal">

                                <Button x:Name="CreateOrChangeButton" Text="Create/Change" TextColor="Black" HorizontalOptions="FillAndExpand"></Button>
                                <Button x:Name="DeleteButton" Text="Delete" TextColor="Black" BackgroundColor="Brown" HorizontalOptions="FillAndExpand"></Button>

                            </StackLayout>
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

结果如下：

【讨论】：

谢谢伙计。这就是我需要的。我认为将堆栈布局替换为 Grid 很有用，这样它在性能方面表现良好。