使用NativeScript中的Javascript设置视图框架

Question

我正在努力弄清楚如何在iOS上的页面中定位视图。

是否可以使用Javascript设置视图的frame？

我尝试了以下但是它似乎没有效果。我看到标签已添加到页面中，但我的框架被忽略。

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo" class="page">
    <StackLayout id="test">

    </StackLayout>
</Page>

JS

var labelModule = require("ui/label");

var page;

exports.onLoaded = function(args) {
    page = args.object;
}

exports.onNavigatedTo = function(args) {
    var test = page.getViewById('test');

    positionEl(test);    
}

function positionEl(el) {
    var myLabel = new labelModule.Label();
    myLabel.text = 'My label';
    myLabel.ios.frame = {origin: {x:200, y:200}, size: {width: 200, height:200}};

    el.addChild(myLabel);
}

CSS

#test {
    background-color: red;
}

#test Label {
    background-color: green;
    color: #FFF;
}

这会导致左侧的图像。我希望（或希望）它看起来像右边的图像。

对于reasons，我不想为此使用AbsoluteLayout。我需要一个允许在任何父元素类型中进行任意定位的解决方案。

Answer 1

StackLayout可能不适合任意定位。您可以使用AbsoluteLayout：

  <AbsoluteLayout id="test" backgroundColor="green">
  </AbsoluteLayout>

..并且这样做：

function positionEl(el) {
  var myLabel = new labelModule.Label();
  myLabel.text = 'My label';
  myLabel.backgroundColor = "yellow";
  myLabel.textAlignment = "center";
  myLabel.width = 200;
  myLabel.height = 200;

  el.addChild(myLabel);
  AbsoluteLayout.setTop(myLabel, 200);
  AbsoluteLayout.setLeft(myLabel, 100);
}

Answer 2

您可以尝试使用style：

Object.assign(myLabel.style, 
      {
         left: '200px', 
         top: '200px', 
         width: '200px', 
         height: '200px'
      }
);