.NET MAUI中在Grid外添加布局：右上角购物车实现报错求助

错误原因 #

.NET MAUI的ContentPage的Content属性仅能接收单个子元素，你直接在原有Frame外添加GridView，相当于给Content赋值了多个独立元素，这就触发了"content属性被多次设置"的错误。

解决方案 #

使用布局容器（如Grid、RelativeLayout）包裹所有内容，作为ContentPage.Content的唯一子元素，在容器内部同时放置购物车组件和商品列表即可。

推荐方案：用Grid实现清晰布局

Grid是最适合这类场景的布局容器，可通过行/列划分区域，轻松实现右上角购物车+下方商品列表的结构：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.ProductListPage">
    <ContentPage.Content>
        <!-- Grid作为唯一根容器 -->
        <Grid>
            <!-- 定义两行：第一行自适应高度放购物车，第二行占满剩余空间放商品列表 -->
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- 右上角购物车组件 -->
            <HorizontalStackLayout Grid.Row="0" 
                                  HorizontalOptions="End" 
                                  Margin="10,10,10,0"
                                  BackgroundColor="#f0f0f0"
                                  Padding="8,4"
                                  CornerRadius="6">
                <Label Text="🛒"/>
                <Label Text="{Binding CartItemCount}" Margin="4,0,8,0"/>
                <Label Text="总计: ¥{Binding CartTotal}"/>
            </HorizontalStackLayout>

            <!-- 商品列表区域 -->
            <Frame Grid.Row="1" Margin="10">
                <CollectionView ItemsSource="{Binding Products}">
                    <!-- 你的商品列表ItemTemplate -->
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <HorizontalStackLayout Padding="8">
                                <Image Source="{Binding ProductImage}" WidthRequest="80" HeightRequest="80"/>
                                <VerticalStackLayout>
                                    <Label Text="{Binding ProductName}" FontSize="Medium"/>
                                    <Label Text="¥{Binding Price}" TextColor="Green"/>
                                </VerticalStackLayout>
                            </HorizontalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Frame>
        </Grid>
    </ContentPage.Content>
</ContentPage>

补充：悬浮购物车的实现（用RelativeLayout）

如果需要购物车悬浮在商品列表上方，可改用RelativeLayout：

<ContentPage.Content>
    <RelativeLayout>
        <!-- 商品列表占满整个页面 -->
        <Frame RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"
               Margin="10">
            <CollectionView ItemsSource="{Binding Products}">
                <!-- 列表模板 -->
            </CollectionView>
        </Frame>

        <!-- 购物车悬浮在右上角 -->
        <HorizontalStackLayout RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-160}"
                               RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=20}"
                               BackgroundColor="#f0f0f0"
                               Padding="8,4"
                               CornerRadius="6">
            <Label Text="🛒"/>
            <Label Text="{Binding CartItemCount}" Margin="4,0,8,0"/>
            <Label Text="¥{Binding CartTotal}"/>
        </HorizontalStackLayout>
    </RelativeLayout>
</ContentPage.Content>

注意事项 #

确保你的ViewModel实现了INotifyPropertyChanged接口，并包含CartItemCount（购物车商品数量）和CartTotal（总价）属性，当购物车数据变化时触发属性通知，UI才会自动更新。

内容的提问来源于stack exchange，提问作者Charlie Ansell