网格行在Android上重叠，但在iOS上不重叠

Posted 2021-04-01

我正在使用网格布局来制作注册表单。我有一个包含两行的网格。第一行是图像，第二行是另一个网格，并且问题是在android上条目（在StackLayout中）与按钮重叠，但这没有意义，因为网格不应该与其他行重叠。实际上，它适用于ios。截图：Android，iOS

XAML：

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition
        Height="Auto" />
    <RowDefinition
        Height="*" />
  </Grid.RowDefinitions>
  <Image
      Source="blue_background.png"
      Aspect="Fill"
      Grid.Row="0"
      Grid.Column="0" />
  <Image
      Source="icon.png"
      Grid.Row="0"
      Grid.Column="0"
      VerticalOptions="Center" />
  <Grid
      Padding="10"
      Grid.Row="1"
      Grid.Column="0">
    <Grid.RowDefinitions>
      <RowDefinition
          Height="*" />
      <RowDefinition
          Height="2*" />
      <RowDefinition
          Height="*" />
      <RowDefinition
          Height="Auto" />
    </Grid.RowDefinitions>
    <Label
        Text="Unisciti a Youni!"
        FontSize="Large"
        FontAttributes="Bold"
        HorizontalTextAlignment="Center"
        TextColor="#174668"
        Grid.Row="0"
        Grid.Column="0"
        VerticalOptions="Center" />
    <StackLayout
        Grid.Row="1"
        Grid.Column="0"
        Spacing="0"
        VerticalOptions="Fill">
      <Entry
          Text="{Binding RegName}"
          Placeholder="Nome"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegSurname}"
          Placeholder="Cognome"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegEmail}"
          Placeholder="Email"
          Keyboard="Email"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegPassword}"
          Placeholder="Password"
          IsPassword="true"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegPasswordConfirm}"
          Placeholder="Conferma password"
          IsPassword="true"
          VerticalOptions="FillAndExpand" />
    </StackLayout>
    <Button
        Command="{Binding RegisterCommand}"
        Text="  Registrati  "
        TextColor="White"
        BackgroundColor="#3A8FDA"
        Grid.Row="2"
        Grid.Column="0"
        HorizontalOptions="Center"
        VerticalOptions="Center" />
    <StackLayout
        Orientation="Horizontal"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Grid.Row="3"
        Grid.Column="0">
      <StackLayout.Spacing>
        <OnPlatform
            x:TypeArguments="x:Double">
          <On
              Platform="Android"
              Value="-10" />
          <On
              Platform="iOS"
              Value="3" />
        </OnPlatform>
      </StackLayout.Spacing>
      <Label
          Text="Sei già registrato?"
          FontSize="Small"
          VerticalTextAlignment="Center"
          HorizontalTextAlignment="Center" />
      <Button
          x:Name="LoginSwitchButton"
          Pressed="LoginSwitch_Handle_Pressed"
          Released="LoginSwitch_Handle_Released"
          Command="{Binding LoginSwitchCommand}"
          Text="Passa al login"
          FontSize="Small"
          TextColor="#45BFEE"
          BackgroundColor="Transparent" />
    </StackLayout>
  </Grid>
</Grid>

答案

我建议你解决问题的方法是首先简化布局，因为当一个单独的Grid可能用于整个事物时，你在网格中有额外的嵌套视图。例如：

    <Grid ColumnSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Grid.ColumnSpan="2" Source="blue_background.png" Aspect="Fill" />
        <Image Grid.ColumnSpan="2" Source="icon.png" VerticalOptions="Center" HorizontalOptions="Center"/>
        <Label Grid.Row="1" Grid.ColumnSpan="2" Text="Unisciti a Youni!" FontSize="Large" FontAttributes="Bold" TextColor="#174668" VerticalOptions="Center" HorizontalOptions="Center"/>
        <Entry Grid.Row="2" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegName}" Placeholder="Nome" VerticalOptions="FillAndExpand" />
        <Entry Grid.Row="3" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegSurname}" Placeholder="Cognome" VerticalOptions="FillAndExpand" />
        <Entry Grid.Row="4" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegEmail}" Placeholder="Email" Keyboard="Email" VerticalOptions="FillAndExpand" />
        <Entry Grid.Row="5" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPassword}" Placeholder="Password" IsPassword="true" VerticalOptions="FillAndExpand" />
        <Entry Grid.Row="6" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPasswordConfirm}" Placeholder="Conferma password" IsPassword="true" VerticalOptions="FillAndExpand" />
        <Button Grid.Row="7" Grid.ColumnSpan="2" Command="{Binding RegisterCommand}" Text="  Registrati  " TextColor="White" BackgroundColor="#3A8FDA" HorizontalOptions="Center" VerticalOptions="Center" />
        <Label Grid.Row="8" Text="Sei già registrato?" FontSize="Small" VerticalOptions="Center" HorizontalOptions="End" />
        <Button Grid.Row="8" Grid.Column="1" x:Name="LoginSwitchButton" Command="{Binding LoginSwitchCommand}" Text="Passa al login" VerticalOptions="Center" HorizontalOptions="Start" FontSize="Small" TextColor="#45BFEE" BackgroundColor="Transparent" />
    </Grid>

然后从那里我调整行高和间距以相应地匹配您的设计。

另一答案

只需将根容器布局更改为ScrollView即可

<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
    Height="Auto" />
<RowDefinition
    Height="*" />
</Grid.RowDefinitions>
<Image
  Source="blue_background.png"
  Aspect="Fill"
  Grid.Row="0"
  Grid.Column="0" />
<Image
  Source="icon.png"
  Grid.Row="0"
  Grid.Column="0"
  VerticalOptions="Center" />
<Grid
  Padding="10"
  Grid.Row="1"
  Grid.Column="0">
<Grid.RowDefinitions>
  <RowDefinition
      Height="*" />
  <RowDefinition
      Height="2*" />
  <RowDefinition
      Height="*" />
  <RowDefinition
      Height="Auto" />
</Grid.RowDefinitions>
<Label
    Text="Unisciti a Youni!"
    FontSize="Large"
    FontAttributes="Bold"
    HorizontalTextAlignment="Center"
    TextColor="#174668"
    Grid.Row="0"
    Grid.Column="0"
    VerticalOptions="Center" />
<StackLayout
    Grid.Row="1"
    Grid.Column="0"
    Spacing="0"
    VerticalOptions="Fill">
  <Entry
      Text="{Binding RegName}"
      Placeholder="Nome"
      VerticalOptions="FillAndExpand" />
  <Entry
      Text="{Binding RegSurname}"
      Placeholder="Cognome"
      VerticalOptions="FillAndExpand" />
  <Entry
      Text="{Binding RegEmail}"
      Placeholder="Email"
      Keyboard="Email"
      VerticalOptions="FillAndExpand" />
  <Entry
      Text="{Binding RegPassword}"
      Placeholder="Password"
      IsPassword="true"
      VerticalOptions="FillAndExpand" />
  <Entry
      Text="{Binding RegPasswordConfirm}"
      Placeholder="Conferma password"
      IsPassword="true"
      VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
    Command="{Binding RegisterCommand}"
    Text="  Registrati  "
    TextColor="White"
    BackgroundColor="#3A8FDA"
    Grid.Row="2"
    Grid.Column="0"
    HorizontalOptions="Center"
    VerticalOptions="Center" />
<StackLayout
    Orientation="Horizontal"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    Grid.Row="3"
    Grid.Column="0">
  <StackLayout.Spacing>
    <OnPlatform
        x:TypeArguments="x:Double">
      <On
          Platform="Android"
          Value="-10" />
      <On
          Platform="iOS"
          Value="3" />
    </OnPlatform>
  </StackLayout.Spacing>
  <Label
      Text="Sei già registrato?"
      FontSize="Small"
      VerticalTextAlignment="Center"
      HorizontalTextAlignment="Center" />
  <Button
      x:Name="LoginSwitchButton"
      Pressed="LoginSwitch_Handle_Pressed"
      Released="LoginSwitch_Handle_Released"
      Command="{Binding LoginSwitchCommand}"
      Text="Passa al login"
      FontSize="Small"
      TextColor="#45BFEE"
      BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>
</ScrollView>

将您的网格放在ScrollView中