Appcelerator css-like calc方法

时间：2016-06-18 11:40:00

标签： user-interface styles appcelerator appcelerator-alloy tss

我正在使用Alloy framework在Appcelerator Studio中构建移动应用程序。要构建用户界面，我使用*.tss文件（类似于css）并使用Titanium.UI.SIZE或Titanium.UI.FILL等常量来表示UI组件的宽度和高度属性。

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

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

提前致谢！

4 个答案:

答案 0 :(得分：0)

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

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

  1. 在alloy.js内预先计算你需要的应用程序引导程序，并将其作为“命名空间”的一部分存储在合金中 - 请注意它将驻留在“全局范围” - 但我不要以为这会让你的应用程序失败。所以你会有这样的事情：

    2. 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)

    1. 第二种解决方案是使用动态样式。见这里：http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles

    2. 第三种解决方案是在控制器代码中应用您需要的属性 - 这是我最不喜欢的属性，因为当你的控制器加载并减慢你的速度时，它会迫使你在js和native之间“过桥”。

答案 1 :(得分：0)

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

我倾向于做什么，当我需要计算这样的东西时，预计算这个并在整个应用程序中使用它，如果有多个目的使用它。例如在alloy.js

中执行此操作 
Alloy.Globals.marginContentWidth = 300;

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

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

这对你有用。

另一件事是没有像使用网站那样考虑移动用户界面。在移动设备上，您需要更灵活地思考。你可能想要宽度的原因之一 - 20px是因为你想要两边的10px边距。

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

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

这应该很好地解决你的问题

答案 2 :(得分：0)

如果要在.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

答案 3 :(得分：-1)

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

现在你想做什么，你将需要学习合金＆amp; Titanium有点深，因为你可以在Titanium中进行各种计算，但还有其他方法，也许是因为你将它与.css进行比较，你没有做对。

所以，我建议你先学习什么是Alloy＆amp;钛是它们的工作原理以及它们如何相互支持。

您可以随时查看完全清晰的Titanium Docs，让您开始正确的道路。首先给他们一个尝试，花时间学习东西，我们总是在这里支持你。 ：）

祝你好运！

相关问题
最新问题