Question

这按预期方式工作（没有<Repeater.itemsLayout>并由<StackLayout>包装）：

<GridLayout columns="auto, *" rows="auto">
    <Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
    <StackLayout row="0" col="1" backgroundColor="green">
        <Repeater items="{{ items }}">
            <Repeater.itemTemplate>
                <Label text="{{ $value }}"/>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</GridLayout>

这不是预期的（使用<Repeater.itemsLayout>且未用<StackLayout>包装）：

<GridLayout columns="auto, *" rows="auto">
    <Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
        <Repeater items="{{ items }}">
            <Repeater.itemsLayout>
                <StackLayout row="0" col="1" backgroundColor="green"/>
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
                <Label text="{{ $value }}"/>
            </Repeater.itemTemplate>
        </Repeater>
</GridLayout>

Answer 1

以下代码之所以有用，是因为您将Repeater封装在StackLayout中并辅助它的行和列，并且如果将其放在GridLayout中也是必需的。

<GridLayout columns="auto, *" rows="auto">
    <Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
    <StackLayout row="0" col="1" backgroundColor="green">
        <Repeater items="{{ items }}">
            <Repeater.itemTemplate>
                <Label text="{{ $value }}"/>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</GridLayout>

如果您不想包装在StackLayout中，则应将Row =“ 0” col =“ 1”分配给Repeater。现在来问您的问题，即使用Repeater.itemsLayout，它获取或设置Repeater的项目布局。默认值为 StackLayout，方向为“ vertical” 。

因此，如果您有一个用例，希望Repeater中的所有项目都水平对齐，则应使用以下代码。

<ScrollView row="0" col="0" orientation="horizontal">
    <Repeater items="{{ items }}">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal" />
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
            <Label text="{{ $value }}" />
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>

Answer 2

我们可以为row标签设置col和Repeater属性。像这样：

<GridLayout columns="auto, *" rows="auto, *">
    <Label text="Some Text" row="0" col="0"/>
    <Repeater row="1" items="{{ items }}">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal" />
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
            <Label text="{{ $value }}"/>
        </Repeater.itemTemplate>
    </Repeater>
</GridLayout>

可以在以下位置找到答案：https://github.com/NativeScript/NativeScript/issues/6554#issuecomment-438167999

Repeater.itemsLayout属性有什么用？如何以及在什么情况下使用它？

2 个答案: