NativeScript ListView 项目模板

Question

我想创建一个带有自定义项视图的列表视图 NativeScript。我正在使用 GridLayout 来做到这一点。问题是：行之间有很大的 space 项。

这些是我所做的：

XML:

<Page loaded="loaded">
<ActionBar title="Welcome">
    <android>
        <NavigationButton android.systemIcon="ic_menu_emoticons" icon="res://icon" tap="showSlideout"/>
    </android>
</ActionBar>
<ListView items="{{ items }}">
    <ListView.itemTemplate>
        <GridLayout rows="auto" columns="auto,*" class="threads-list-wrapper" height="100">
            <Image row="0" col="0" src="{{ photo }}"></Image>
            <StackLayout row="0" col="1" class="" orientation="vertical">
                <Label class="h1" text="{{title}}"></Label>
                <Label text="{{ body }}"></Label>
                <Label text="{{ date }}"></Label>
            </StackLayout>
        </GridLayout>
    </ListView.itemTemplate>
</ListView>

CSS

.threads-list-wrapper {
padding: 15;
}

.threads-list-wrapper > Image {
height: 64;
width: 64;
margin-right: 15;
}

代码：

var observableModule = require("data/observable");
var model = new observableModule.Observable();

exports.loaded = function (args) {
    var items = [
        {
            photo: 'res://icon',
            title: 'Ardiansyah Putra',
            body: 'Ini adalah pesan yang saya kirimkan kepada anda, mohon cepat dibalas ya',
            date: 'Just Now'
        },
        {
            photo: 'res://icon',
            title: 'Bagus Putra',
            body: 'Ini adalah pesan yang saya kirimkan kepada anda, mohon cepat dibalas ya',
            date: '12 Jan'
        }
    ];
    var page = args.object;
    model.set("items", items);
    page.bindingContext = model;
};

结果：

Answer 1

不确定究竟是什么导致了你的情况下的白色 space，但这里有一个片段，其中在剥离所有 CSS 后没有额外的白色 space 生成列表视图模板。

<GridLayout rows="*" columns="*, *">
    <Image col="0" src="res://icon" stretch="none" />
    <StackLayout col="1" >
        <Label class="h1" text="{{title}}"></Label>
        <Label text="{{ body }}"></Label>
        <Label text="{{ date }}"></Label>
    </StackLayout>
</GridLayout>

NativeScript ListView 项目模板

NativeScript ListView Item Template

css

android

listview

nativescript