0

我正在使用Alloy 框架在Appcelerator Studio中构建移动应用程序。为了构建用户界面，我使用了*.tss文件（某种 css）并使用常量，如UI 组件Titanium.UI.SIZE的Titanium.UI.FILL宽度和高度属性。

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

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

提前致谢！

4

4 回答 4

0

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

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

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

合金.js：

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

控制器样式.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 和本机之间的桥梁”。

于 2016-06-19T12:07:48.220 回答
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

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

于 2016-06-19T12:07:55.190 回答
0

如果要在 .tss 文件中设置宽度或高度，则必须将值设置为 Alloy 全局对象（Alloy.CFG.yourVar 或 Alloy.Globals.yourVar）的属性。

合金.js

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

视图.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

于 2016-06-20T08:53:38.560 回答
-1

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

现在你想做的是，你需要更深入地学习合金和钛，因为你可以在钛中进行各种计算，但还有其他方法，也许因为你将它与 .css 进行比较，所以你没有得到它正确.

所以，我建议你先了解什么是合金和钛，它们是如何工作的，以及它们是如何相互支持的。

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

祝你好运！

于 2016-06-18T16:15:38.363 回答