Question

嗨，我正在使用xamarin表单，我想更多地使用网格，而不是嵌套stacklayouts。

我不得不说，即使我已经多次阅读Microsoft的解释“ auto vs“ *” 我确实很困惑，希望我能找到一个简单的解释

看到下面的图片，我希望该数量接近星形图标，但我到达下面，该数量远离该图标。我什至用颜色来查看事物的位置。有什么建议吗？

  <Frame Margin="0,0,0,10"  CornerRadius="10" BorderColor="Red">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" BackgroundColor="Yellow" Grid.ColumnSpan="2" Text="Long description message"/>
                    <Label Grid.Row="0" Grid.Column="2" BackgroundColor="Aqua" Text="28/1/2019" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" />
                    <Image Grid.Row="1" Grid.Column="0" BackgroundColor="Coral" Source="star.png" HorizontalOptions="Start"></Image>
                    <Label Grid.Row="1" Grid.Column="1" BackgroundColor="CornflowerBlue" Text="£ 11.000" VerticalOptions="Start" HorizontalOptions="Start" />
                    <Label Grid.Row="1" Grid.Column="2" BackgroundColor="DarkCyan" Text="£33,565.45" FontSize="16" VerticalTextAlignment="End" HorizontalOptions="EndAndExpand" />
                </Grid>
            </Frame>

Answer 1

Auto表示（在您使用列宽的情况下）它将采用特定列的最大元素所需的宽度作为列宽。在您的示例中，第二列不大于屏幕上的£11.000 所要求的。如果您写£11.000.000 ，则第二列宽度会自动增加并适应此文本，然后第一列和第三列都将变小。

*或 star 表示它将在所有宽度属性中设置的星形总数之间分配可用的剩余空间。例如，给定一个具有2列的网格：如果第1列的宽度等于*（1的简称），而第2列的宽度也等于*，它将把屏幕拆分为中间，两个宽度都相等。如果第一列宽度等于2*，而第二列宽度等于*，则第一列将使用屏幕宽度的2/3，第二列将使用剩余的1/3。如果第一列宽度等于3*，而第二列宽度等于*，则第一列将使用屏幕宽度的3/4（75％），第二列将使用剩余的1/4。依此类推...

因此，对于您的代码，您可以阅读，如下所示：首先，它会根据列的最大元素自动设置第二列宽度（在您的情况下为£11.000 >），因为您还有2列*作为宽度，它将剩余的空间分成2个相等的宽度。这就是为什么数字不在图片旁边的原因，因为第一列为“ *”。

要解决此问题，只需将第一列宽度设置为Auto，将第二列宽度设置为*：

<Frame Margin="0,0,0,10"  CornerRadius="10" BorderColor="Red">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" BackgroundColor="Yellow" Grid.ColumnSpan="2" Text="Long description message"/>
        <Label Grid.Row="0" Grid.Column="2" BackgroundColor="Aqua" Text="28/1/2019" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" />
        <Image Grid.Row="1" Grid.Column="0" BackgroundColor="Coral" Source="star.png" HorizontalOptions="Start"></Image>
        <Label Grid.Row="1" Grid.Column="1" BackgroundColor="CornflowerBlue" Text="£ 11.000" VerticalOptions="Start" HorizontalOptions="Start" />
        <Label Grid.Row="1" Grid.Column="2" BackgroundColor="DarkCyan" Text="£33,565.45" FontSize="16" VerticalTextAlignment="End" HorizontalOptions="EndAndExpand" />
    </Grid>
</Frame>

网格布局无法正确显示Xamarin形式

1 个答案: