上一篇

下一步

练习 - 使用 StackLayout 生成用户界面

已完成

在本练习中，将使用嵌套的 StackLayout 容器在用户界面 (UI) 中排列视图。 第一个屏幕截图显示了初学者项目实现的布局，第二个屏幕截图显示了已完成的项目的布局。 你的任务是使用 StackLayout 容器和 LayoutOptions 将初学者项目转换为完成的项目。

浏览初学者解决方案

初学者解决方案包含功能完整的小费计算器应用程序。 首先，浏览 UI 以了解应用的功能。

1. 使用 Visual Studio，打开在上一个练习开始时克隆的存储库中 exercise2/TipCalculator 文件夹中的初学者解决方案。

2. 在首选操作系统上生成并运行应用。

3. 在文本框中输入一个数字，并使用应用以查看其工作方式。

4. 试验一下小费金额按钮和滑块。

5. 完成后，关闭应用。

6. 打开 MainPage.xaml。 请注意，所有视图都放置在一个 VerticalStackLayout 中，如以下 XAML 标记所示：

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TipCalculator"
            x:Class="TipCalculator.MainPage">
       <VerticalStackLayout>
   
           <Label Text="Bill" />
           <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
   
           <Label Text="Tip"   />
           <Label x:Name="tipOutput" Text="0.00" />
   
           <Label Text="Total" />
           <Label x:Name="totalOutput" Text="0.00" />
   
           <Label Text="Tip Percentage" />
           <Label x:Name="tipPercent" Text="15%" />
           <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />
   
           <Button Text="15%" Clicked="OnNormalTip" />
           <Button Text="20%" Clicked="OnGenerousTip" />
   
           <Button x:Name="roundDown" Text="Round Down" />
           <Button x:Name="roundUp"   Text="Round Up" />
   
       </VerticalStackLayout>
   </ContentPage>
   

修复 UI

了解应用的运行方式后，现在可以通过添加 HorizontalStackLayout 容器来改善外观。 目标是使应用看起来像实验室开头的屏幕截图。

1. 打开 MainPage.xaml 文件。

2. 向 VerticalStackLayout 添加 40 单位的填充和 10 单位的间距：

   <VerticalStackLayout Padding="40" Spacing="10">
   

3. 添加 HorizontalStackLayout 来对 Entry 字段上方显示“帐单”的 Label 进行分组。 将 Spacing 属性设置为 10。

4. 将“帐单”Label 的 WidthRequest 设置为 100，将 VerticalOptions 属性设置为 Center。 这些更改将确保标签与 Entry 字段垂直对齐。

   <HorizontalStackLayout Spacing="10">
       <Label Text="Bill" WidthRequest="100" VerticalOptions="Center"/>
       <Entry ... />
   </HorizontalStackLayout>
   

5. 再添加一个 HorizontalStackLayout，对内容为“小费”、Label 名为“tipOutput”的 Label 进行分组。 将 Spacing 属性设置为 10，将 Margin 属性设置为 0,20,0,0。

6. 将“小费”Label 的 WidthRequest 设置为 100

   <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
       <Label Text="Tip" WidthRequest="100" />
       <Label .../>
   </HorizontalStackLayout>
   

7. 使用 HorizontalStackLayout 对内容为“总值”、Label 名为“totalOutput”的 Label 进行分组。 将 Spacing 属性设置为 10。

8. 将“总值”Label 的 WidthRequest 设置为 100

   <HorizontalStackLayout Spacing="10">
       <Label Text="Total" WidthRequest="100"  />
       <Label .../>
   </HorizontalStackLayout>
   

9. 再添加一个 HorizontalStackLayout，对内容为“小费百分比”、Label 名为“tipPercent”的 Label 进行分组。

10. 将此 HorizontalStackLayout 的 VerticalOptions 属性设置为 End，并将 Spacing 属性设置为 10：

11. 将“小费百分比”Label 的 WidthRequest 设置为 100

    <HorizontalStackLayout VerticalOptions="End" Spacing="10">
        <Label Text="Tip Percentage" WidthRequest="100"/>
        <Label ... />
    </HorizontalStackLayout>
    

12. 使用 HorizontalStackLayout 对标题栏为 15% 的 Button 和标题栏为 20% 的 Button 进行分组。

13. 将此 StackLayout 的 Margin 属性设置为 0,20,0,0，将 Spacing 属性设置为 10：

    <HorizontalStackLayout  Margin="0,20,0,0" Spacing="10">
        <Button Text="15%" ... />
        <Button Text="20%" ... />
    </HorizontalStackLayout>
    

14. 最后添加一个 HorizontalStackLayout，对标题栏为“向下舍入”的 Button 和标题栏为“向上舍入”的 Button 进行分组。 将此 StackLayout 的 Margin 属性设置为 0,20,0,0，将 Spacing 属性设置为 10：

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button ... Text="Round Down" />
            <Button ... Text="Round Up" />
    </HorizontalStackLayout>
    

15. 在全部四个按钮控件上，将 HorizontalOptions 属性设置为 Center，将 WidthRequest 属性设置为 150。 例如：

    <Button Text="15%" WidthRequest="150" HorizontalOptions="Center" ... />
    

内容页的完整 XAML 标记应如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TipCalculator"
             x:Class="TipCalculator.MainPage">

    <VerticalStackLayout Padding="40" Spacing="10">

        <HorizontalStackLayout Spacing="10">
            <Label Text="Bill" WidthRequest="100" VerticalOptions="Center" />
            <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Label Text="Tip"  WidthRequest="100" />
            <Label x:Name="tipOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Spacing="10">
            <Label Text="Total" WidthRequest="100"/>
            <Label x:Name="totalOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout VerticalOptions="End" Spacing="10">
            <Label Text="Tip Percentage" WidthRequest="100"/>
            <Label x:Name="tipPercent" Text="15%" />
        </HorizontalStackLayout>
        
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button Text="15%" Clicked="OnNormalTip" WidthRequest="150" HorizontalOptions="Center"/>
            <Button Text="20%" Clicked="OnGenerousTip"  WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>
        
        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button x:Name="roundDown" Text="Round Down" WidthRequest="150" HorizontalOptions="Center"/>
            <Button x:Name="roundUp"   Text="Round Up" WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>

</ContentPage>

检查结果

再次运行应用并查看 UI 中的差异。 验证控件是否正确对齐、大小正确且有间距。

已使用 VerticalStackLayout 和 HorizontalStackLayout 容器提升现有 UI 的美感。 这些布局是最简单的版式面板，但功能强大，足以生成合理的 UI。

继续