Question

我使用GridView Nativescript来安排UI，我想动态地将css设置为特定的按钮或标签。当外部按钮触发时我如何找到内部标签，我尝试使用getViewById方法，但总是得到空结果。没有找到任何方法吗？

var gridview;
  exports.onPageLoaded = function (args) {
    page = args.object;
    gridview =  page.getViewById("gridview");

};

exports.onSelectedIndexChanged = function(args){
    var totalMatch = 0;
    var btn = args.object;
    var index = btn.index;

   var a = gridview.getViewById("25");

    btn.backgroundColor = "red";
    btn.color = "white";  
};


<GridLayout columns="*,1,*,1,*" rows="auto" borderWidth="1" borderColor="#DBDBDB" borderRadius = "3" >
            <Button text="selectALL" index="0" tap="onSelectedIndexChanged" backgroundColor= "red" id ="btnSelectAll" color="white" borderRadius="3" />
            <Button text="UnselectAll" index="1" col="2"  tap="onSelectedIndexChanged" backgroundColor= "white" id ="btnUnSelectAll" borderRadius = "3" />
            <Border col="1" borderWidth="1"  borderColor="#DBDBDB" />
            <Border col="3" borderWidth="1"  borderColor="#DBDBDB" />
        </GridLayout>   
    <gv:GridView items="{{ items }}"  verticalSpacing="3" horizontalSpacing="3" colWidth="100" rowHeight="50" padding="3" id="gridview" height="400">
                  <gv:GridView.itemTemplate>
                    <GridLayout backgroundColor="#ffffff" style="border-width:3px;border-color:#696969;border-radius:5">
                      <Button text="{{ Name }}" id="{{ Id }}" index="{{ Index }}" tap="onGridViewItemTap" backgroundColor= "white" color="red" style="background-size:100% 100%;background-repeat:no-repeat;background-image:url('~/images/drawable-hdpi-v4/spt_fiter_checked.png')"  borderWidth="1"  borderColor="#DBDBDB" borderRadius = "5"/>
                    </GridLayout>
                  </gv:GridView.itemTemplate>
                </gv:GridView>

Answer 1

在我理解之后，你要做的是：

按GridLayout中的按钮
触发onSelectedIndexChanged功能
使用ID =＆＃34; 25＆＃34;
修改按钮

首先，我想指出不建议使用ID访问视图，尤其是当您具有复杂的UI结构时。我建议你使用绑定。我不确定你想要修改什么，所以我假设您想要更改按钮的背景属性。在这种情况下，您可以将代码中的Observable对象绑定到XML中的background属性。然后在函数onSelectedIndexChanged中，您可以通过设置新颜色来修改代码中的对象。由于它是可观察的，它将通知所有听众进行修改。在我们的例子中 - XML中的属性。在这里，我向您发送一个简单的例子：

主要-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded"> <GridLayout rows="auto,auto" > <Button text="Click to Change Color" row="0" tap="onSelectedIndexChanged"/> <Button text="Button" row="1" backgroundColor="{{color}}"/> </GridLayout> </Page>

主要-page.js

var observable = require("data/observable"); var json={color:'red'}; var changeCss = new observable.Observable(json); var gridview; exports.onPageLoaded = function (args) { page = args.object; page.bindingContext=changeCss; }; exports.onSelectedIndexChanged = function(args){ changeCss.set("color","blue"); };

我希望这会给你一些指示。

使用Nativescript网格视图在Griview中查找按钮或标签

1 个答案: