NativeScript ListView Item Template

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>