使用 Nativescript Gridview 在 Gridview 中查找按钮或标签

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="25"的按钮
修改按钮

首先，我想指出的是，不建议通过 id 访问视图，尤其是当您具有复杂的 UI 结构时。我建议您使用绑定。我不确定你到底想修改什么，所以我假设你想更改按钮的背景属性。这种情况下，可以在代码中绑定一个Observable对象到后台属性中XML。然后在函数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 Gridview 在 Gridview 中查找按钮或标签

Find button or label inside Griview using Nativescript Grid view

nativescript