滾動時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佈局問題

回答

相關問題