NativeScript ListView项模板

Question

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

这些是我所做的：

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;
}

CODE：

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

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

<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>