ListView未按預期定位在佈局中

Question

我有一個帶有RowLayout的ColumnLayout。 RowLayout按預期定位。如果窗口正在調整大小，則也是如此。即使窗戶比整個ColumnLayout較小（見第二圖像）

但是，如果我用（水平）的ListView更換的RowLayout，因爲我希望這個ListView控件沒有定位。我希望這個行爲就像用的RowLayout的例子，但ListView的定位更高：

如果窗口變「小」藍色矩形「移動到」第一例不同ListView控件：

我怎樣才能實現與一個ListView第一個例子中的行爲嗎？

來源

import QtQuick 2.0 
import QtQuick.Layouts 1.1 

Rectangle { 
    width: 360 
    height: 360 

    ColumnLayout { 
     anchors.fill: parent 
     anchors.margins: 20 

     Item { 
      Layout.fillHeight: true 
     } 
/* 
     ListView { 
      Layout.fillHeight: true 
      Layout.fillWidth: true 
      orientation: ListView.Horizontal 
      spacing: 5 
      model: 3 
      delegate: Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 
     } 
*/ 

     RowLayout { 
      Layout.fillHeight: true 
      Layout.fillWidth: true 

      Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 

      Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 

      Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 
     } 

     Item { 
      Layout.fillHeight: true 
     } 

     Rectangle { 
      width: 50 
      height: 50 
      color: "blue" 
     } 
    } 
} 

Answer 1

你只需要定義的寬度和高度爲你的ListView。通過這種方式，您的列布局將考慮其大小並將其保持爲固定大小。

這裏你的代碼更新：

import QtQuick 2.0 
import QtQuick.Layouts 1.1 

Rectangle { 
    width: 360 
    height: 360 

    ColumnLayout { 
     anchors.fill: parent 
     anchors.margins: 20 

     Item { 
      Layout.fillHeight: true 
     } 

     ListView { 
      //take as much width as possible with a binding 
      width: parent.width 
      //keep enought height to display each delegate instance 
      height: 50 
      orientation: ListView.Horizontal 
      spacing: 5 
      model: 3 
      delegate: Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 
     } 

     Item { 
      Layout.fillHeight: true 
     } 

     Rectangle { 
      width: 50 
      height: 50 
      color: "blue" 
     } 
    } 
}