NativeScript 中的 ListView.itemTemplate 和图像

Posted 2023-02-19

【中文标题】NativeScript 中的 ListView.itemTemplate 和图像

【英文标题】：ListView.itemTemplate and Images in NativeScript

【发布时间】：2015-08-22 07:22:51

【问题描述】：

我正在尝试为 NativeScript 构建联系人列表类型的 POC。我想在列表项中有一个图像和名称。我用于布局的代码如下

<Page loaded="pageLoaded">
    <ListView items=" myItems ">
        <ListView.itemTemplate>
            <Image src=" imageSrc " />
            <Label text=" title " />
        </ListView.itemTemplate>
    </ListView>
</Page>

显然，标题值正常，但图像根本没有显示。当我尝试将相同的图像代码放在一个空页面中时，NativeScript 会使用图像构建页面。

谁能告诉我为什么图片没有出现在列表视图模板中？以及如何显示？

谢谢

【问题讨论】：

可观察数据结构（myItems）是对象数组，对象为 imageSrc: "blah.png", title: "blah blah blah blah"

是本地图像还是远程图像 (http)？

是的@Nathanael，它是那个对象的数组。

@antione129 ，图片在远程服务器上。

【参考方案1】：

我对此进行了测试；您需要将内部项目放在布局中。我相信 itemTemplate 只能是一个孩子。我所有的测试似乎都表明 itemTemplate 指向一个孩子。

所以这可以正常工作，因为单个子项是 StackLayout，然后包含您的两个项目。

XML：

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
        <ListView id="listview" items=" myItems ">
            <ListView.itemTemplate>
                <StackLayout orientation="horizontal">
                <Label text=" title " />
                <Image src=" src " stretch="none" />
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>
</Page>

最简单的 JS 代码完成（对于任何将来会看到这个的人）：

var observableArray = require("data/observable-array");
function onPageLoaded(args) 
  var page = args.object;
  var array = new observableArray.ObservableArray();

  array.push(title: "Title1", src: 'http://master-technology.com/images/Logo1.gif'));
  array.push(title: "Title2", src: 'http://master-technology.com/images/demos/Apps-TurnItOffLogo.gif'));

  page.bindingContext = myItems: array;

exports.onPageLoaded = onPageLoaded;

【讨论】：

您的解决方案完美运行。谢谢！！我还是不明白 ObservableArray() 这里的要求。

ObservableArray 的唯一目的是让您可以实时进行更改并进行更新。建议您在进行任何绑定时使用 Observable 以便可以进行两种更改。但是，如果列表不会经常更新，您可以只使用普通数组。

我明白了。这是有道理的。