NativeScript：如何设置列表视图项模板的样式答案

【问题标题】：NativeScript: how to style a listview itemTemplateNativeScript：如何设置列表视图项模板的样式
【发布时间】：2015-05-18 12:32:50
【问题描述】：

我有以下 NativeScript 代码：

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

我想设置 ListView-Item 的样式，给它一个填充，这样每个图像周围都有一点空白。我尝试给它一个类并在 css 中设置该类的样式，但我无法更改它。

然而，我能够为图像本身设置样式（给它一个边距）。是否可以设置 listviewItem-container 的样式（就像我在 css 中设置 div-container 的样式一样）？

【问题讨论】：

标签： android css class listview nativescript

【解决方案1】：

目前（1.5.2），您可以将图像放在布局容器中，并将样式应用于该容器：

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

【讨论】：

【解决方案2】：

您可以使用 Border 元素来包装您的 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>

【讨论】：

要知道这是 1.0 的唯一解决方案

【解决方案3】：

你是对的！现在无法设置项目容器的样式 - 只能设置项目内容。我们会考虑在未来如何实现这一点。

感谢您的反馈！

【讨论】：