UI Titanium 中的错误 Alloy 未定义上边距时的屏幕

Question

嗨，我是 Titanium App 的新手，正在学习 Alloy 开发方法。

我在index.xml中写道：

<Alloy>
    <Window class="container">
        <TextField id="title" hintText="Title"></TextField>
        <TextArea id="description" hintText="Description"></TextArea>
    </Window>
</Alloy>

但是在 Android 模拟器中预览时，它会在屏幕中央显示重叠的文本字段。但默认情况下，它应该从顶部开始，然后应该自动从顶部相对地取一些边距。

现在显示的是：i.imgur.com/KOZUP6K.png

Answer 1

默认情况下 Alloy 将绝对布局应用于视图的子组件 / Window。要克服这个问题，只需指定一个像这样的垂直布局：

<Alloy>
    <Window class="container" layout="vertical">
        <TextField id="title" hintText="Title"></TextField>
        <TextArea id="description" hintText="Description"></TextArea>
    </Window>
</Alloy>

Answer 2

您必须通过为 layout 属性 提供 vertical 或 [=14= 这样的值来覆盖 Window children 的默认对齐方式]，查看此 link 以获得更多解释。

您也可以给文本字段相同的 class 并给 class 一个 top 值，尝试一下并在 UI 中检查结果。

index.xml:

<Alloy>
    <Window class="container" layout="vertical">
        <TextField hintText="TextField 1" class="inputs" />
        <TextArea hintText="TextArea 1" class="inputs" />
        <TextField hintText="TextField 2" class="inputs" />
        <TextArea hintText="TextArea 2" class="inputs" />
    </Window>
</Alloy>

index.tss:

".inputs": {
    top: 10
}