NativeScript: comment le style d'un listview ItemTemplate

Question

je le code NativeScript suivant:

<Page loaded="onPageLoaded"> 
    <GridLayout rows="auto, *"> 
     <ListView items="{{ items }}" row="1"> 
      <ListView.itemTemplate > 
       <Image url="{{ url }}" /> 
      </ListView.itemTemplate> 
     </ListView> 
    </GridLayout> 
</Page> 

Je voudrais le style de la ListView-Item, ce qui lui donne un rembourrage de sorte que chaque image a un peu d'espaces autour . J'ai essayé de lui donner une classe et de styler la classe dans le css mais je n'ai pas été capable de le changer. J'ai cependant été capable de styliser l'image elle-même (en lui donnant une marge). Est-il possible de styliser le listviewItem-container (comme je le ferais avec un div-container dans css)?

Answer 1

Vous avez raison! Il n'est pas possible pour le moment de styler le conteneur d'éléments - uniquement le contenu de l'élément. Nous allons réfléchir à la façon de l'activer dans le futur.

Nous vous remercions de vos commentaires!

Answer 2

Vous pouvez utiliser l'élément Border pour envelopper votre contenu itemTemplate.

<Page loaded="onPageLoaded"> 
    <GridLayout rows="auto, *"> 
     <ListView items="{{ items }}" row="1"> 
      <ListView.itemTemplate > 
       <Border borderWidth="0"> 
        <Image url="{{ url }}" /> 
       </Border> 
      </ListView.itemTemplate> 
     </ListView> 
    </GridLayout> 
</Page> 

Answer 3

Pour l'instant (1.5.2), vous pouvez mettre vos images à l'intérieur du conteneur de mise en page et appliquer un style à ce conteneur:

<Page loaded="onPageLoaded"> 
    <GridLayout rows="auto, *"> 
     <ListView items="{{ items }}" row="1"> 
      <ListView.itemTemplate > 
       <StackLayout> 
        <Image url="{{ url }}" horizontalAlignment="stretch"/> 
       </StackLayout> 
      </ListView.itemTemplate> 
     </ListView> 
    </GridLayout> 
</Page>