滚动时ListView布局问题

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

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

来源

2016-09-09 Stavros_S

我的猜测是你应该控制WrapLayout中的项目。要么通过itemHeight和itemWidth给他们固定大小，要么使用另一种布局。 –

感谢您的详细评论！如果你想让它成为答案，我会尝试一下，并将其标记为正确的一个。 –

2期。一个是GridLayout，你需要考虑表格中的每个单元 - 你没有。例如第1行3.

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

来源

2016-09-12 11:01:42 dashman

滚动时ListView布局问题

回答

相关问题