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