NativeScript:如何使视图变得透明'用于任何用户交互

时间:2016-06-17 11:39:09

标签: nativescript

有没有办法让观点变得透明'任何用户互动?例如,我有一个视图(具有透明背景)和该视图下的按钮。我希望用户可以点击该视图下的按钮。如果我在该视图下有滚动视图,我希望用户在滚动视图时与滚动器交互,因此视图不会干扰或拦截用户的手势。但只有这种观点应该对用户的互动而不是其子女透明。所以,如果我在该视图中有一个按钮,它表现正常。

示例XML:

<AbsoluteLayout width="100%" height="100%">
    <Button text="Button1" tap="onTap1" />
    <GridLayout width="100%" height="100%" backgroundColor="transparent">
        <Button text="Button2" tap="onTap2" horizontalAlignment="center" verticalAlignment="center"/>
    </GridLayout>
</AbsoluteLayout>

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您可以使用多种方法在NativeScript中更改其颜色。 例如,您可以直接更改其backgroundColor。另一个选择是使用动画,第三个选项是使用CSS动画。 以下是前两个选项的基本示例。

page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
      <GridLayout width="300" height="300" id="myGrid" backgroundColor="transparent">
      </GridLayout>
      <Button text="Tap me" tap="onTap" />
      <Button text="Or Tap me" tap="onAnotherTap" />
  </StackLayout>
</Page>

page.js

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import { GridLayout } from "ui/layouts/grid-layout";

import { Color } from "color";

var myGridView;


export function navigatingTo(args: EventData) {

    var page = <Page>args.object;
    page.bindingContext = new HelloWorldModel();

    // get refference to the view using its id
    myGridView = <GridLayout>page.getViewById("myGrid");  
}

export function onTap(args:EventData) {
    var color = new Color("#FF0000");

    myGridView.backgroundColor = color;
}

export function onAnotherTap(args:EventData) {
    myGridView.animate({
        backgroundColor: new Color("#3D5AFE"),
        duration: 3000
    });
}

可以在NativeScript documenation

中找到所有选项