NativeScript：更改属于 ListView 的按钮的背景颜色和文本答案

【问题标题】：NativeScript: change background color and text of a Button belonging to a ListViewNativeScript：更改属于 ListView 的按钮的背景颜色和文本
【发布时间】：2018-07-11 15:31:58
【问题描述】：

我需要一个 2 状态切换按钮：在每次点击时，它都会更改其背景颜色和文本标签（颜色和文本）。它的实现很简单，当按钮属于一个简单的页面时它可以正常工作。相反，当按钮被放入一个简单列表（20 个元素）的每个元素中时，它不会改变它的背景颜色，只有它的标签文本会改变，而不是它的颜色。

这里有一些代码细节来检查问题：

<StackLayout orientation="vertical" >
    <ListView items="{{ items }}" itemTap="onItemTap">
        <ListView.itemTemplate>
            <StackLayout orientation="vertical" class="follow-button">
                <Button text="Undefined" tap="onTap"/>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</StackLayout>

在js端（'value'未绑定到按钮，此处仅用于演示列表中单个按钮的点击问题）：

var value = 1;
exports.onTap = function (args) {
    view  = args.object;
    value = value === 1 ? 0 : 1;
    view.text            = value === 1 ? "button on" : "button off";
    view.backgroundColor = value === 1 ? "red"       : "white";
    view.color           = value === 1 ? "white"     : "red";
}

我看到删除或修复文本，然后每次点击时背景都会正确更改。

有什么建议吗？

【问题讨论】：

你能创建 Playground 演示吗？
这里是操场演示 play.nativescript.org/?template=play-js&id=Hms4zb&v=2 我刚刚检查过，在 Android 中没问题，在 iOS 中出现问题。
我遇到了类似/相同的问题。我使用 CSS 类的声明性绑定，在事件处理程序中设置一个“isComparing”布尔变量并像这样启用该类：[class.active]="item.isComparing" 对我来说，它改变了一次背景颜色（通过 CSS 类），然后从不改变它背部。我什至添加了一个相反的 CSS 类 inactive 来将背景重置为白色，但这仍然不起作用：[class.inactive]="!item.isComparing" CSS:`button.compare.inactive { background-color:#ffffff; } button.compare.active { 背景颜色：$cd-orange; } `
请在下面查看我的解决方案，它对我有用。

标签： javascript ios nativescript

【解决方案1】：

我发现here 中描述的修复方法似乎很有魅力！

这是我发现的唯一解决方案，它可以完整地保留应用程序代码，而不会引入破坏使用组件背后的哲学的技巧。

就这样吧：

Object.defineProperty(View.prototype, "isLayoutValid", {
    get: function () {
        return (this._privateFlags & PFLAG_LAYOUT_REQUIRED) !== PFLAG_LAYOUT_REQUIRED;
    },
    enumerable: true,
    configurable: true
});

在

node_modules/tns-core-modules/ui/core/view/view.ios.js

一切都被神奇地修复了！

【讨论】：