javascript - 滚动时 ListView 布局问题

Question

在我的 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> 

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

编辑我根据已接受的答案建议在 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>

Answer 1

2 个问题。一是对于 GridLayout，您需要考虑表中的每个单元格 - 但您还没有。例如第 1 行第 3 列。

但其行为如此的主要原因是 ListView 的工作方式。 ListView 似乎在创建过程中测量了一次布局，然后当您滚动时，对象将被丢弃并重新用于不同的底层对象。所以，例如如果标签包含一次 4:29 - 标签宽度设置为适合该值。下次 ListView 在同一项目中放置较长的文本标签时 - 11:34 - 空间不足，listview 决定不显示它。解决方案？明确设置列的宽度。