Question

我有以下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容器的样式（就像我在css中设置div容器样式一样）？

Answer 1

你是对的！现在无法设置项容器的样式 - 仅限项目内容。我们将考虑如何在未来实现这一目标。

感谢您的反馈！

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

Answer 3

现在（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>

NativeScript：如何设置listview itemTemplate的样式

3 个答案: