如何在 Titanium JS 中创建带有按钮的标题栏？答案

【问题标题】：How to create a header bar with buttons in Titanium JS?如何在 Titanium JS 中创建带有按钮的标题栏？
【发布时间】：2014-02-21 20:59:27
【问题描述】：

我正在使用 Titanium Alloy 构建一个应用程序，我正在尝试创建一个带有按钮的标题栏，类似于联系人应用程序，如下图所示：

这个标题在中间有标题和按钮。

我一直在到处寻找在 Titanium 中执行此操作的方法，但我还没有找到任何东西。这似乎不在文档中，我需要创建一些完全自定义的东西吗？

我试图在导航视图中添加一个按钮，但它不起作用 - 它出现一个错误，提示您导航视图的子元素必须是一个窗口。

如果可能的话，我想使用合金来创建它。

【问题讨论】：

标签： titanium appcelerator titanium-alloy

【解决方案1】：

这是很容易创建的视图。唯一的技巧是用 NavigationWindow 包装 Window，因为它在您提到的错误中被建议。导航栏按钮在控制器中创建和附加。据我记得，你不能在 xml 文件中创建它们。但是，通过使用 $.UI.create() 方法，您可以确保所有类和样式也适用于它们。

index.html:

<Alloy>
    <NavigationWindow>
        <Window title="Contacts" id="contacts">
            <SearchBar hintText="Search" />
            <TableView />
        </Window>
    </NavigationWindow>
</Alloy>

index.js：

$.contacts.leftNavButton = $.UI.create('Button', { title: 'Groups' });
$.contacts.rightNavButton = $.UI.create('Button', { systemButton: Ti.UI.iPhone.SystemButton.ADD });

$.index.open();

index.tss：

"Window": {
    backgroundColor: "white",
    layout: "vertical",
},

【讨论】：

感谢@daniula 的回答，您说“创建的视图很漂亮”，这是什么意思？
我的意思是“很容易”。丢了一个字:)