android - 未定义上边距时钛合金屏幕中的 UI 错误

Question

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

我在 index.xml 中写道：

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

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

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

Answer 1

默认情况下，Alloy 将绝对布局应用于 View / Window 的子组件。为了克服这个问题，只需指定一个垂直布局，如下所示：

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

Answer 2

layout您必须通过为属性赋予类似verticalor的值来覆盖 Window 子项的默认对齐方式horizontal，请查看此链接以获取更多说明。

您还可以为文本字段赋予相同的类并赋予该类一个top值，尝试并在 UI 中检查结果。

索引.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>

索引.tss：

".inputs": {
    top: 10
}