javascript - 滚动时的ListView布局问题

在我的Nativescript应用程序中，我构建了一个ListView，其中每个列表项都包含带有嵌套GridLayout的堆栈布局。这是XML的示例。

    <ListView  row="2" items="{{ measurements }}" id="measurement-list" loaded="" itemTap="">
        <ListView.itemTemplate>
            <StackLayout>
                <Label class="date-seperator" text="{{header | dateShortDate}}" textWrap="true" visibility="{{ header ? 'visible' : 'collapsed' }}"/>
                <GridLayout columns="8,*,10,*" rows="*, *" class="{{'measurement-item trend-' + MeasurementColor}}">
                    <Label class="{{'severity-' + MeasurementColor}}" col="0" rowSpan="2"  text="" />
                    <WrapLayout col="1" orientation="horizontal" itemWidth="" itemHeight="">
                        <Label class="measurement-value" col="1" text="{{Value}}" />
                        <Label id="trend-arrow" class="{{'sm-arrow-' + TrendArrow }}" col="1" />
                    </WrapLayout>
                    <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
                    <Label class="measurement-time"  col="3" row="0" text="{{Timestamp | dateTimeStamp}}"/>
                </GridLayout>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>

我遇到了一个问题，当我滚动列表视图时，列表项的布局开始变形，元素未对齐或完全消失。具有布局问题的列表项也不一致。如果我向上滚动并看到一些损坏的项目，可以在几秒钟后向后滚动，它们会很好，但列表中的其他项目看起来会失真。知道是什么原因会导致这种情况，或者我可以用它来解决它吗？以下是我的意思的屏幕截图。



编辑
我根据接受的答案建议对列表视图中的xml进行了重组，现在已解决了该问题。如果有人遇到类似问题，下面是更新的xml。

<ListView  row="2" items="{{ measurements }}" id="measurement-list" loaded="" itemTap="">
    <ListView.itemTemplate>
        <StackLayout>
            <Label class="date-seperator" text="{{header | dateShortDate}}" textWrap="true" visibility="{{ header ? 'visible' : 'collapsed' }}"/>
            <GridLayout columns="8,80,*,90" rows="*, *" class="{{'measurement-item trend-' + MeasurementColor}}">
                <Label rowSpan="2" col="0" class="{{'severity-' + MeasurementColor}}" text="" />
                    <Label row="0" col="1" horizontalAlignment="right" class="measurement-value" text="{{Value}}" />
                    <Label row="0" col="2" horizontalAlignment="left" class="{{'trend-arrow sm-arrow-' + TrendArrow }}" />                                                                                                          -->
                <Label row="1" col="1" horizontalAlignment="right" class="measurement-uom" text="{{ UOM | getUOMFromGlucoseType }}"/>
                <Label row="0" rowSpan="2" col="3" horizontalAlignment="left" verticalAlignment="middle" class="measurement-time" text="{{Timestamp | dateTimeStamp}}"/>
            </GridLayout>
        </StackLayout>
    </ListView.itemTemplate>
</ListView>

最佳答案

2期。其中之一是，对于GridLayout，您需要考虑表中的每个单元格-您无需考虑。例如第1列3。

但是，采用这种方式的主要原因是ListView的工作方式。 ListView似乎在创建过程中会测量一次布局，然后在您滚动时，这些对象将被丢弃并再次用于不同的基础对象。因此，例如如果标签一次包含4:29，则标签宽度设置为适合该宽度。下次ListView在同一项目中放置更长的文本标签时-11:34-空间不足，并且listview决定不显示它。解？显式设置列的宽度。

关于javascript - 滚动时的ListView布局问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39419299/