Xamarin 3 堆栈布局

Question

我正在制作一个页面，其中有一个顶部标题，中间有一个图像，下面有一些文本，然后底部有两个按钮，用于表示是或否。正如您所看到的那样，按钮被按下太多并被切断。我不知道如何将文本向上移动一点或减少图像与标题和文本之间的间距。我知道我可能可以用绝对布局来做到这一点，但我不确定它如何与 larger/smaller 屏幕一起工作。

这是我的 XAML 图片。

<ContentPage BackgroundColor="#FF233D">
        <ContentPage.Content>
                 <StackLayout Padding="10,10,10,10">  
                <StackLayout VerticalOptions="Start">
                    <Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center"></Label>
                       <Image Scale=".65" Source="bed" >
                    </Image>
                </StackLayout>
                <StackLayout VerticalOptions="CenterAndExpand">
                      <Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" > 
                    <Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0">
                    </Button>
                    <Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" >
                    </Button>
                </StackLayout>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>

非常感谢任何帮助。

Answer 1

如果使用4行2列的Grid会更简单

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Scale=".65" Source="bed" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" >

<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"   Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>

<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="1" />

<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="0" />

如果结果与您的需要不同，请尝试调整行高和宽度。有关网格的更多信息：Microsoft docs

Xamarin 3 堆栈布局

Xamarin 3 StackLayouts

xamarin

layout

stacklayout