SAPUI5基础知识17 - 控件的外边距和内边距（Margins and Paddings）

1. 背景

CSS，全称为级联样式表（Cascading Style Sheets），是一种用来描述HTML或XML（包括如SVG、XHTML等各类XML分支语言）文档样式的计算机语言。

在SAPUI5中，我们可以通过CSS，改变屏幕元素的外观，例如颜色、大小、位置等。

接下来的两篇博客中，让我们一起调整一下SAPUI5应用程序的页面样式。

2. 基础知识

首先，让我们看一下CSS中的一个基础概念，外边距（Margins）和内边距（Paddings），这两个属性对于控制网页上元素的间距和位置都是必不可少的。

• 外边距：是指元素周围的空间，用于在页面上向上或向下移动元素，以及向左或向右移动元素。外边距是完全透明的，没有任何背景色。它们清除元素周围的区域，将相邻的元素推开，以创建所需的空隙。元素的每一边都可以有不同的外边距大小，可以单独更改。
• 内边距：是元素与其内部相关内容之间的空间，它决定了元素在容器中的外观和位置。内边距会影响元素周围的容器背景，并清除内容周围的区域。增大内边距会增大元素的大小，或者缩小元素内部的内容，而元素的大小默认是增大的。

在SAPUI5中，我们可以使用以下预定义的CSS类来调整控件的空间：

• 预定义的外边距类有（用于增加控件间的空间大小）：
  - sapUiTinyMargin
  - sapUiSmallMargin
  - sapUiMediumMargin
  - sapUiLargeMargin
  - sapUiResponsiveMargin

• 预定义的内边距类有（增加控件内的空间）：
  - sapUiNoContentPadding
  - sapUiContentPadding
  - sapUiResponsiveContentPadding

3. 练习

在前序博客练习的基础上，让我们调整下页面的布局。可以看到，我们之前的应用程序中，所有的空间都是紧密地贴在一起的。让我们调整一下它们的之间的间距。

3.1 为控件添加外边距

首先，在App.view.xml文件中，让我们通过CSS类sapuiresponsivmargin ，为Panel面板控件周围增加一些空间。

注意：需要将面板的宽度width设置为自动，否则外边距将被添加到默认宽度100%，这样会超过页面大小。

sapuiresponsivmargin是响应式的，会根据设备的屏幕大小进行调整。若是在平板电脑上，则会自动显示更小的外边距，而在手机上，将会去除外边距以节省空间。

外边距可以添加到各种控件中，例如，我们也可以为按钮添加sapUiSmallMarginEnd类，为按钮和输入框之间添加空白。

为了改变输出文本的格式，我们删除Input控件description属性，并添加一个具有相同值的Text文本控件，并使用了一个小边距sapUiSmallMargin来对齐其他内容。

类似地，我们可以添加标准的内边距类(例如sapUiResponsiveContentPadding)来调整Panel面板控件的内部布局，但因为面板控件已经默认引入了内边距，在这里我们不再做额外的调整。

改动后的App.view.xml文件内容如下：

<mvc:View
    controllerName="zsapui5.test.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
>
    <!--在视图中想要使用的库的命名空间列表-->
    <Shell>
        <App>
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <Panel
                            headerText="{i18n>helloPanelTitle}"
                            class="sapUiResponsiveMargin"
                            width="auto"
                        >
                            <content>
                                <Button
                                    text="{i18n>showHelloButtonText}"
                                    press=".onShowHello"
                                    class="sapUiSmallMarginEnd"
                                />
                                <Input
                                    value="{/recipient/name}"
                                    valueLiveUpdate="true"
                                    width="60%"
                                />
                                <Text
                                    text="Hello {/recipient/name}"
                                    class="sapUiSmallMargin"
                                />
                            </content>
                        </Panel>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

3.2 运行效果

运行程序，我们可以看到应用程序布局上面的变化：

调整前：

调整后：

3.3 扩展练习

为Panel控件添加内边距CSS类sapUiNoContentPadding，然后试一下运行效果。

可以为同一个控件分配多个CSS类，用空格分隔。

改动后的代码效果：

...
<Panel
headerText="{i18n>helloPanelTitle}"
class="sapUiResponsiveMargin sapUiNoContentPadding"
width="auto"
>
...

4. 小结

本文介绍了如何使用SAPUI5中预制的CSS类来调整控件的外边距和内边距，并通过具体的代码展示了其运行效果。