移动开发概述

虽然 Slint 在移动端和桌面应用程序中的用法相同，但在开发过程中有几点需要注意。移动平台通常屏幕小且没有硬件键盘，这会带来直接的后果，这些后果无法由用户界面框架处理，而是特定于应用程序的。与基于鼠标的交互相比，触摸界面也需要特殊处理。

本页描述适用于所有移动平台的注意事项。后续页面会在这些内容之上深入探讨特定于平台的问题。

滚动

默认情况下，Slint 的 ScrollView 只能通过拖动滚动条或鼠标滚轮来滚动。这对桌面来说没问题，但触摸界面在平移整个视图时应当滚动。

像这样在 Slint 中启用它：

import { ScrollView } from "std-widgets.slint";
export component MyComponent {
    ScrollView {
        mouse-drag-pan-enabled: true;

        // Your own elements here
    }
}

slint

注意，这也会在连接鼠标时启用该行为，而这可能不是你想要的。这会在 Slint 的未来版本中修复。

安全区域

移动设备的操作系统开发者试图通过把系统级覆盖层的数量降到最低，来改善小屏幕的局限。这意味着应用程序通常可以访问整个屏幕，但会有一些系统项目叠加在上面，例如基站信号和电池状态。在 Android 上，这还包括导航按钮。此外，许多手机设备将前置摄像头嵌入显示屏，只留下一小块非矩形区域不可访问（即“刘海”）。

应用通常可以在整个屏幕上以及某些覆盖区域下方绘制，但并非所有地方都允许用户交互。例如，绘制在前置摄像头区域下方的按钮无法被点击。因此，Android 和 iOS 描述了一个所谓的“安全区域（safe area）”：一个矩形区域，应用程序可以预期用户能够在其中与界面元素交互。它通过一个内边距（inset）来定义，即定义应用窗口内部一条不可见边框的厚度，该边框内应只包含背景元素（如背景图像、图案、颜色）。这个安全区域的大小也可能在运行时改变，例如在 Android 上底部导航按钮显示和隐藏时。

在 Slint 中，该区域通过 Window 元素上的 Window.safe-area-insets 属性暴露出来。

如果你想放置一个矩形来可视化安全区域，例如用于调试，你可以这样做：

export component MainWindow inherits Window {
    Rectangle {
        background: yellow;
        x: root.safe-area-insets.left;
        y: root.safe-area-insets.top;
        width: root.width - root.safe-area-insets.right - root.safe-area-insets.left;
        height: root.height - root.safe-area-insets.bottom - root.safe-area-insets.top;
    }
}

slint

键盘处理

自 iPhone 问世以来，现代智能手机通常没有用于文本输入的硬件键盘。虽然有蓝牙或 USB 键盘以及特殊手机壳之类的配件提供这一功能，但始终必须有软件回退方案，即“虚拟键盘”。

注意，键盘并不总是由一排排按钮组成，它也可以是手写识别区域、语音输入，或用于捕获文本或条形码然后将其插入的摄像头取景器。不过，所有这些都被透明地处理，因此应用无需关心它们，除非应用自身提供虚拟键盘。

虚拟键盘放置于需要文本输入的应用之上，从而进一步缩小本已有限的屏幕空间。虽然有分体键盘、浮动键盘等等，但操作系统始终把虚拟键盘当作覆盖在应用窗口上的一个矩形。

Slint 通过 Window 元素上定义矩形的这两个属性来暴露它：

当聚焦文本输入元素时，Slint 会透明地调用操作系统来打开和隐藏虚拟键盘。操作系统会决定是否实际显示它，这取决于系统设置以及是否检测到硬件键盘。这也可能在运行时改变，例如当用户在虚拟键盘可见时连接硬件键盘（这种情况下，操作系统可能会自行隐藏虚拟键盘）。无论如何，如果存在可见的非浮动虚拟键盘，Slint 会将其暴露给应用。

你可以通过检查 virtual-keyboard-size.width * virtual-keyboard-size.height 是否大于 0 来判断键盘是否显示。

有些虚拟键盘是半透明的，这意味着键盘下方的区域可以在一定程度上被看见。所以，应用可以在那里显示基本的视觉元素（如纯色），让键盘看起来融入了视觉风格。

通常，应用不必使用这些属性，原因见下一节所述的行为。

保持编辑区域可见

一个常见问题是，用户想要编辑的文本字段最终位于虚拟键盘下方，从而不可见。 Slint 可以通过滚动自动处理这一点，但应用必须以某种方式组织，才能让它生效。

当键盘显示时，当前获得焦点的元素会尝试保持可见。它通过在父元素链中（直到窗口）搜索可滚动区域（Flickable）来实现这一点。如果找到，就会指示该区域以尽可能小的偏移滚动，使其不与键盘重叠。滚动区域的边界检查会因与键盘的重叠而缩小，这意味着该区域可以比正常情况滚得更远。当键盘再次隐藏时，这种过度滚动会自动修正。

因此总结一下，如果你想在虚拟键盘显示时让文本字段保持可见，请把它放在像这样的滚动区域内：

import { LineEdit, ScrollView } from "std-widgets.slint";
export component MyView {
    ScrollView {
        mouse-drag-pan-enabled: true;

        VerticalLayout {
            label := Text {
                text: "Text input";
                horizontal-alignment: left;
                overflow: elide;
            }

            LineEdit {
                placeholder-text: "Write your text";
                accessible-label: label.text;
            }
        }
    }
}

slint

如你所见，ScrollView 不必是 LineEdit 的直接父元素。

应用程序布局注意事项

触控笔和鼠标输入可以是像素级精确的，而触摸输入则不是，尤其是对于电容式触摸屏。因此，面向触摸的应用必须注意让交互区域尽可能大，并且触摸区域之间要有足够的间距。此外，屏幕上某些部分用握持设备那只手的拇指操作起来比其他部分更容易。

Slint 无法在这方面提供任何帮助，因此作为应用开发者的你必须记住这一点，尤其是在使用设备模拟器或像 Figma 这样的 UI 设计应用进行开发时。

我们强烈建议阅读 Apple 的 Human Interface Guidelines 和 Google 的 Design for Android 页面。