Xamarin 3 堆栈布局答案

【问题标题】：Xamarin 3 StackLayoutsXamarin 3 堆栈布局
【发布时间】：2018-07-11 18:38:00
【问题描述】：

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

这是我的图像 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>

非常感谢任何帮助。

【问题讨论】：

改用网格
你的意思是只有一列并且所有内容都在行中吗？
4 行 2 列。前三行的 ColSpan=2，最后一行的每个按钮都在它自己的列中

标签： xamarin layout stacklayout

【解决方案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

【讨论】：