调整网格行内框架的大小

Question

>我正在使用 xamarin 和 Visual Studio for IOS 和 Android

我正在尝试将滚动视图添加到我的框架所在的同一网格行，但由于框架与我的网格行大小相同，因此它切断了框架的底部(我相信(

我试过什么： 1. 将行定义设置为"*"和"自动"，但框架会随着网格和 2. 调整滚动视图高度

我觉得我最好的选择是调整框架的大小，使其小于网格行，但是 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">

正如您定义的那样 堆栈布局Orientaition="Horizontal"，框架将默认填充高度。

如果要调整框架高度的大小，请设置其"垂直选项">属性

喜欢：

<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>

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

或者，您也可以将"填充"属性设置为"堆栈布局"以调整框架位置的大小，如下所示：

<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>