ListView.itemTemplate 和 NativeScript 中的图像

Question

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

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

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

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

谢谢

Answer 1

我测试过这个；您需要将内部项目放在布局中。我相信 itemTemplate 只能是一个 child。我所有的测试似乎都表明 itemTemplate 指向单个 child。

所以这很好用，因为单个 child 是一个 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;

ListView.itemTemplate 和 NativeScript 中的图像

ListView.itemTemplate and Images in NativeScript

listview

nativescript