调整网格行内的框架大小

Question

我将 xamarin 与适用于 IOS 和 Android 的 Visual Studio 一起使用

我正在尝试向我的 Frame 所在的同一网格行添加一个 scrollView，但因为该框架与我的网格行大小相同，它切断了框架的底部（我相信）

我尝试过的： 1. 将 RowDefinition 设置为“*”和“Auto”，但框架会随着网格增加长度，并且 2.调整scrollView高度

我觉得我最好的选择是调整框架的大小，使其小于网格行，但是 heightRequest 不起作用..我希望有任何建议。

代码如下：

<Grid HeightRequest="400">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="130"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="300"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

<ScrollView Orientation="Horizontal" Grid.Row="4"  Margin="0,20,0,0" HeightRequest="390" HorizontalScrollBarVisibility="Never">
            <StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
                <Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
                    <StackLayout>
                        <Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
                        <Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b"  HorizontalOptions="Center" Margin="0,-5,0,0"/>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                            <Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
                            <Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
                        </StackLayout>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
                            <Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
                            <Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
                        </StackLayout>
                    </StackLayout>
                </Frame>

            </StackLayout>
        </ScrollView>
</Grid>

Answer 1

<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">

正如您定义的 StackLayout Orientaition="Horizontal"，默认情况下 Frame 将填充高度。

如果你想调整 Frame 高度，你应该设置它的 VerticalOptions 属性

喜欢：

<ScrollView Orientation="Horizontal" Grid.Row="4"  Margin="0,20,0,0"  HorizontalScrollBarVisibility="Never">
                <StackLayout Orientation="Horizontal"  BackgroundColor="Red" >
                    <Frame  VerticalOptions="CenterAndExpand" HeightRequest="270" WidthRequest="200" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
                        <StackLayout>
                            <Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
                            <Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b"  HorizontalOptions="Center" Margin="0,-5,0,0"/>
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                                <Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
                                <Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
                            </StackLayout>
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
                                <Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
                                <Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
                            </StackLayout>
                        </StackLayout>
                    </Frame>

                </StackLayout>
</ScrollView>

具体尺寸根据您的要求设置。

或者您也可以将 Padding 属性设置为 StackLayout 以调整 Frame 位置的大小，例如：

<StackLayout Padding="0,10,0,10" Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
                    <Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
                        <StackLayout>
                            <Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
                            <Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b"  HorizontalOptions="Center" Margin="0,-5,0,0"/>
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                                <Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
                                <Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
                            </StackLayout>
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
                                <Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
                                <Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
                            </StackLayout>
                        </StackLayout>
                    </Frame>

 </StackLayout>