滚动时 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>

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

编辑我根据接受的答案建议重组了列表视图中的 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，您需要考虑 table 中的每个单元格 - 您没有。例如第 1 列第 3 行

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

滚动时 ListView 布局问题

ListView Layout Issues While Scrolling

javascript

xml

nativescript