我想在Xamarin Forms中创建Simple XAML-Java 学习之路

这是我想在Xamarin Forms中创建XAML的屏幕截图 .

enter image description here

所以我想知道的是如何将“62”置于父级中心，将“PSI”置于“62”旁边 . 它似乎需要使用RelativeLayout但我无法创建完美相同的东西 .

谢谢你的帮助！

4 回答

实现这一目标的一种方法是 Grid 与 Columns 和 Rows

<Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>


        <Label Grid.Row="0" Grid.Column="0" TextColor="Gray" Text="Healthy" />

        <StackLayout  HorizontalOptions="Center" Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
        <Label Text="62" TextColor="Black" FontAttributes="Bold" FontSize="Medium" />
        <Label Margin="0,10,0,0"  Text="PSI" TextColor="Gray" />
        </StackLayout>

        <Label Grid.Row="2" Grid.Column="2" Text="Your image" />

    </Grid>

result

回复于 2024-04-19T20:22:14+08:00

就像Alessandro说的那样，GeralexGR通过使用网格来回答它是一个很好的方法 . 下一个样本并根据您的需要进行修改

<Grid Margin="20" BackgroundColor="#EEEEEE">
        <Frame CornerRadius="10" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Margin="0, 20, 0, 0">
            <Grid ColumnSpacing="0" RowSpacing="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
                       Text="Healthy" TextColor="Gray"
                       FontSize="Small" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" />
                <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
                       Text="62" TextColor="Black"
                       FontSize="Large" FontAttributes="Bold"
                       HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"/>
                <Label Grid.Row="1" Grid.Column="2"
                       Text="PSI" TextColor="LightGray"
                       FontSize="Medium" HorizontalOptions="Start" HorizontalTextAlignment="Start"
                       VerticalTextAlignment="Center"/>
                <Image Grid.Row="2" Grid.Column="2"
                       Source="hearth.png" />
            </Grid>
        </Frame>
</Grid>

在UI上它看起来像这样sample

回复于 2024-04-19T20:22:14+08:00

0
你可以使用RelativeLayout，但这比你需要的更复杂 . 其他答案建议使用网格，这是最好的答案，但需要一些不同的方法，以便：
- "62"完全居中 .
- "PSI"就在它之后，根据屏幕尺寸没有不同的空间 .
用于定义Grid Rows and Columns的Xamarin.Forms文档列出了三种方法（从Xamarin文档复制）：
- 自动 - 自动调整大小以适合行或列中的内容 . 在C＃中指定为GridUnitType.Auto或在XAML中指定为Auto .
- Proportional（） - 将列和行的大小作为剩余空间的一部分 . 在C＃中指定为值和GridUnitType.Star，在XAML中指定为＃，其中＃是您想要的值 . 使用*指定一行/列将使其填充可用空间 .
- 绝对 - 使用特定的固定高度和宽度值来定义列和行 . 在C＃中指定为值和GridUnitType.Absolute，在XAML中指定为＃，其中＃是您想要的值 .
您想要的布局可以使用3x3网格实现，其中心是自动调整大小 - 它的大小取决于内容 . 然后PSI标签可以在同一行和最右边的列中，因此它们之间的间距不依赖于屏幕大小 .
```
<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Grid.Column="0" TextColor="Gray" Text="Healthy" />

        <Label Grid.Row="1" Grid.Column="1" Text="62" TextColor="Black" FontAttributes="Bold" FontSize="Large" VerticalOptions="End"/>
        <Label Grid.Row="1" Grid.Column="2" Text="PSI" TextColor="Gray" FontSize="Small" VerticalOptions="End" HorizontalOptions="Start"/>

        <Image Grid.Row="2" Grid.Column="2" Source="icon.png" VerticalOptions="End" HorizontalOptions="End" Aspect="AspectFit"/>

    </Grid>
```
回复于 2024-04-19T20:22:14+08:00

<Frame CornerRadius="15" HeightRequest="120" WidthRequest="120" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="White">
        <Grid Margin="-10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalTextAlignment="Center" TextColor="Gray" FontSize="17" Text="Healthy"/>
            <Label Grid.Row="1" Grid.Column="1" Text="6200" TextColor="Black" FontAttributes="Bold" FontSize="30" VerticalOptions="End" />
            <Label Grid.Row="1" Grid.Column="2" Text="PSI" TextColor="Gray"  FontSize="Medium" VerticalOptions="End" HorizontalOptions="Start" />
            <Image Grid.Row="2" Grid.Column="2" Source="iconHeart.png" VerticalOptions="End" HorizontalOptions="End" Aspect="AspectFit" HeightRequest="30" WidthRequest="30" />
        </Grid>
    </Frame>

圆桌角的框架 .
使用3列和3行将网格内置 .
第一行应该在所有三列中展开，其中包含带有文本的标签"Healthy"
数字标签位于第2行和第2列，位于中心 . 最多可以使用4位数而不会中断您的UI .
PSI被添加到第2行和第3列中以将其添加到数字标签之外 .
图像将进入第3行，第3列进入右下角列 .

回复于 2024-04-19T20:22:14+08:00

我想在Xamarin Forms中创建Simple XAML

4 回答

相关问题