时间戳

首页 > 解决方案 > 带有并排控件的运行风格应用程序

xamarin.forms - 带有并排控件的运行风格应用程序

问题描述

我使用堆栈布局作为最简单的响应式布局，但我试图并排访问项目我试图以速度和距离模拟正在运行的应用程序。

我的主要问题是如何让速度和距离看起来与设计相似我无法在堆栈布局中获得正确的间距

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.BmiInfo">
<ContentPage.Content>
  <StackLayout Orientation="Horizontal" Spacing="0" Padding="0"  VerticalOptions="StartAndExpand"> 
        <Frame x:Name="frameTotalSpeed"    CornerRadius="7" >
            <StackLayout>
            <Label x:Name="lblSpeedText" Text="Distance"></Label>
            <Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
                </StackLayout>
        </Frame>



         <Frame x:Name="frameTotalDistance"    CornerRadius="7">
             <StackLayout>
             <Label x:Name="lbldistanceText" Text="Distance"></Label>
            <Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
                 </StackLayout>
        </Frame>

在此处输入图像描述

我想在这里模仿这种风格

在此处输入图像描述

标签： xamarin.forms

解决方案

使用网格

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="50*" />
    <ColumnDefinition Width="50*" />
  </Grid.ColumnDefinitions>
  <Frame Grid.Column="0" x:Name="frameTotalSpeed"    CornerRadius="7" >
    <StackLayout>
      <Label x:Name="lblSpeedText" Text="Distance"></Label>
      <Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
    </StackLayout>
  </Frame>
  <Frame Grid.Column="1" x:Name="frameTotalSpeed"    CornerRadius="7" >
    <StackLayout>
      <Label x:Name="lbldistanceText" Text="Distance"></Label>
      <Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
    </StackLayout>
  </Frame>
</Grid>

推荐阅读