Appcelerator CSS样钙方法

我正在使用合金框架在Appcelerator Studio中构建移动应用程序。要构建用户界面，我正在使用*.tss文件（类型为CS），并使用Titanium.UI.SIZE或Titanium.UI.FILL等常数用于UI组件的宽度和高度属性。

我想知道合金框架中是否有一种CSS CACT方法，因此可以进行这样的尺寸计算：

width: calc(Titanium.UI.FILL - 20px)
height: calc(80% - 30px)

预先感谢！

如果要在.TSS文件内设置宽度或高度，则必须将值设置为合金全局对象（Alloy.cfg.yourvar或Alloy.globals）的属性。yourvar）。

Alloy.js

Alloy.CFG.width = Ti.Platform.displayCaps.platformWidth - 20;

view.tss

"#myView":{
    width:Alloy.CFG.width
}

如果您在控制器中设置了值，则不需要像全局对象属性一样使用。

index.js

$.myView.width = Ti.Platform.displayCaps.platformWidth - 20;

http://docs.appcelerator.com/platform/latest/#！/pi/titanium.platform.displaycaps-property-platformheight

tss（钛样式表）不是CSS。它纯粹是声明性的JSON文件 - 但是您可以在其中使用一些钛码，例如Ti.UI.FILL或Ti.UI.SIZE或转换您可以使用L()函数。

作为具有计算值的解决方案，我看到了3种可能的方法：

作为alloy.js中应用程序引导程序的一部分，预先计算所需的内容，并将其作为"命名空间"的一部分存储在合金中 - 请注意，它将位于"全局范围"上 - 但我不认为它不会这就是将您的应用程序降低的原因。因此，您会有这样的东西：

Alloy.js：

Alloy.UI.MyScreen.MyComponent.height = DO YOU CALCULATION HERE;

controlerStyle.tss：

"#myComponent" : {
    height: Alloy.UI.MyScreen.MyComponent.height
}

确保正确构建命名空间，并使用封闭来不污染全局范围。

有关alloy.js的更多信息，请参见此处：http：//docs.appcelerator.com/platform/latest/#！/Guide/alloy_controllers-section-34636384_alloycontrollers-initialers-initializerfile（Alloy.js）

第二个解决方案是使用动态样式。请参阅此处：http：//docs.appcelerator.com/platform/latest/#！/guide/dynamic_styles
第三个解决方案将是在控制器代码中应用所需的属性 - 这是我最不喜欢的，因为当控制器加载并放慢速度时，它迫使您在JS和本机之间"越过桥"。

您可以做的一件事是预先计算，另一件事是在TSS中而是在控制器文件中设置计算的宽度。

当我需要计算类似的内容时，我倾向于做的事情是预先计算的，如果有1个以上的目的使用它，则在整个应用程序中使用它。例如，在alloy.js

中执行此操作

Alloy.Globals.marginContentWidth = 300;

或者您可以使用Ti平台中的任何要点来计算某些内容。现在在tss中，您可以使用此

"#myUI": {
    width: Alloy.Globals.marginContentWidth
}

这将适用于您。

另一件事不是像您对网站一样考虑移动UI。在移动设备上，您需要考虑更灵活。您可能想要宽度的原因之一-20px是因为您想要两侧的10px保证金。

首先...不要使用PX。在移动开发中，您需要点或dp，但这是默认的，因此您可以使用20。要更灵活地处理它，请执行此操作：

width: Ti.UI.FILL,
right: 10,
left: 10

这应该可以很好地解决您的问题

首先，.tss不是一种.css :)，而是一种json文件。

现在您想做的事情，您需要学习合金＆amp;钛更深一些，因为您可以在钛中进行各种计算，但是还有其他方法，也许由于您将其与.css进行了比较，因此您无法正确处理。

所以，我建议您先了解合金＆amp;钛是他们的工作方式以及它们如何互相支持。

您始终可以前往钛文档，这绝对清楚地让您开始正确的道路。首先尝试一下，花点时间学习东西，我们总是在这里为您提供支持。：）

祝你好运！

相关内容

最新更新

热门标签：