Appcelerator css 类计算方法

Question

我正在使用Alloy framework to build a mobile application in Appcelerator Studio。为了构建用户界面，我使用 *.tss 文件（类似于 css）并使用 Titanium.UI.SIZE 或 Titanium.UI.FILL 等常量作为 [=25] 的宽度和高度属性=] 组件。

我想知道 Alloy 框架中是否有一种 css CALC 方法可用，这样可以像这样进行大小计算：

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

提前致谢！

Answer 1

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

现在你想做什么，你需要更深入地学习 Alloy 和 Titanium，因为你可以在 Titanium 中进行各种计算，但还有其他方法，也许因为你正在将它与.css，你没看对。

因此，我建议您首先了解 Alloy 和 Titanium 是什么，它们如何工作以及它们如何相互支持。

您可以随时访问 Titanium 文档，这些文档非常清楚，可以帮助您走上正确的道路。首先试一试，花时间学习，我们随时为您提供支持。 :)

祝你好运！

Answer 2

TSS（钛金风格 Sheet）不是 CSS。它纯粹是声明性的 json 文件 - 但您可以在其中使用一些 Titanium 代码，例如 Ti.UI.FILL 或 Ti.UI.SIZE 或者您可以使用 L() 函数进行翻译。

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

在 alloy.js 中预先计算您需要的内容作为应用程序 bootstrap 的一部分，并将其作为 "namespace" 的一部分存储在 alloy 中 - 请注意它将驻留在 "global scope" - 但我认为这不会导致您的应用程序崩溃。所以你会有这样的东西：

Alloy.js:

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

ControllerStyle.tss:

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

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

有关 alloy.js 的更多信息，请参阅此处：http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Controllers-section-34636384_AlloyControllers-InitializerFile(alloy.js)

第二种解决方案是使用动态样式。看这里：http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles
第三种解决方案是在您的控制器代码中应用您需要的属性——这是我最不喜欢的，因为它迫使您在加载控制器时在 js 和本机之间 "cross the bridge"让你慢下来。

Answer 3

你可以做的一件事是预先计算它，另一个是在控制器文件中而不是在 tss 中设置计算的宽度。

当我需要计算这样的东西时，我倾向于做的是预先计算并在整个应用程序中使用它（如果使用它的目的不止一个）。例如在 alloy.js

中执行此操作

Alloy.Globals.marginContentWidth = 300;

或者您可以使用 Ti 平台中的任何常数来计算一些东西。现在 tss 你可以使用这个

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

这对你有用。

另一件事是不要像对待网站那样考虑移动 UI。在移动设备上，您需要更加灵活地思考。您可能想要 width - 20px 的原因之一是因为您希望两边的边距均为 10px。

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

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

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

Answer 4

如果要在 .tss 文件中设置宽度或高度，则必须将值设置为 Alloy 全局对象的属性（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/#!/api/Titanium.Platform.DisplayCaps-property-platformHeight

Appcelerator css 类计算方法

Appcelerator css-like calc method

user-interface

styles

appcelerator

appcelerator-alloy

tss