如何在 NativeScript 页面中添加绝对元素

Question

我希望能够通过代码将视图组件（插件）放入页面中，并让它出现在页面上的某个 X\Y 处...但我有点难过。

任何通过 page.content 添加的尝试都会将其添加到 layout\render 通道，因此它占据 space.

所以这会在 "any" 时被注入到 "any" 页面，我无法控制这将用于的标记（知道我的意思吗？）没有 XML 不幸的是，答案不能只是将所有内容包装在 AbsoluteLayout 中，因为不能强制用户这样做 apps\layouts.

想法，甚至可能？

Answer 1

基本上，实现此目的的最简单方法是动态且完全跨平台兼容，即在您的 JavaScript 代码中创建一个 AbsoluteLayout 项，然后将您的项和 AL 动态插入到页面容器中。

代码应该是这样的：

var AbsoluteLayout = require('ui/layouts/absolute-layout').AbsoluteLayout;
var myAL = new AbsoluteLayout();
var myItem = new myPluginItem();

// Set you left, right, top, bottom coords.
myItem.top = x;

// Add our item to the AbsoluteItem
myAL.addChild(myItem);

var frame = require('ui/frame');
var page = frame.topmost().currentPage;
var LayoutBase = require('ui/layouts/layout-base').LayoutBase;

page._eachChildView(function(view) {
  if (view instanceof LayoutBase) {
     view.addChild(myAL); 
     return false;
  } 
  return true;
});

但是，如果您不想使用这种非常简单的方法；唯一的其他方法是实际降低一点。您可以本地访问 iOS 视图控制器 (page._ios.view) 和 android 视图 (page._nativeView)，然后使用 addView (https://developer.android.com/reference/android/view/ViewManager.html) or addSubview (https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/).

Answer 2

我想补充一点，您可以像这样通过导入 AbsoluteLayout 在 TypeScript 中设置 Top 和 Left 属性

import {AbsoluteLayout} from 'ui/layouts/absolute-layout';

然后使用公开的函数 setLeft 或 setTop

AbsoluteLayout.setLeft(YourItem, LeftValue); 要么 AbsoluteLayout.setTop(YourItem, TopValue);

如何在 NativeScript 页面中添加绝对元素

How to add an absolute element in a NativeScript page

layout

plugins

nativescript