QtQuickレイアウトマージン

Question

QMLレイアウトコンポーネントの開始マージンと終了マージンを削除する方法はありますか？

ここに、2つの子を持つColumnLayoutの例を示します。問題は、これらの上下のマージンを削除し、すべての子を親レイアウトの高さに沿って再配布する方法です。

ColumnLayout { 
    id: dotColumn 
    anchors.horizontalCenter: bg.horizontalCenter 
    height: root.height 
    Repeater { 
     id: repeater 
     model: root.model 

     Item { 
      id: activeDot_container 

      property int radius: 15 
      width: radius * 2 
      height: radius * 2 

      Rectangle { 
       anchors.centerIn: parent 
       radius: parent.radius 

       width: radius * 2 
       height: radius * 2 

       color: Palette.colors['deepPurple']['500'] 
      } 
     } 
    } 
} 

Answer 1

レイアウト配置を用いた実験のカップルの後、私は解決策を以下に来ています。

除外したい余白がレイアウトの子要素の間隔の半分の大きさであると仮定すると、最初と最後の子が開始点/終了点で整列するまで、レイアウトコンポーネントの最初と最後に負の余白を設定できます。レイアウト。私はマージンを計算するために使用される

機能：

rootレイアウト・コンポーネントの親である

function getMargin() { 
    var height = root.height; 
    var spacing = (height - root.radius * 2 * model.length)/model.length; 
    return spacing/2; 
} 

、root.radius*2は、レイアウト子アイテムの大きさを表しており、他の子ディメンションと子供が数えるためmodel.lengthスタンドと交換することができます。

次に、レイアウトコンポーネントのアンカーを設定して、対応する余白を設定するだけです。

ColumnLayout { 
    anchors.top: root.top 
    anchors.bottom: root.bottom 
    anchors.topMargin: -1 * getMargin() 
    anchors.bottomMargin: -1 * getMargin() 
    Repeater { 
     model: root.model 
     Item { 
      property int radius: root.radius 
      width: radius * 2 
      height: radius * 2 
      /* more code */ 
     } 
    } 
} 

P.レイアウト上/下アンカーを左/右に置き換えることで、RowLayoutにも同じ解決策を適用できます。

Answer 2

あなたはトップにして、下方に、両方のレイアウト内のアイテムを揃えることができません。以下に示すように、あなたが容器の内部変数yにアイテムを置くことができる回避策として：

Window { 
    visible: true 
    visibility: Window.Maximized 

    ColumnLayout { 
     anchors.horizontalCenter: parent.horizontalCenter 
     height: parent.height 
     spacing:1 
     Repeater { 
      id: repeater 
      model: 10 
      Rectangle { 
       color: "green" 
       property int radius: 15 
       width: radius 
       Layout.fillHeight: true 
       Rectangle { 
        anchors.horizontalCenter: parent.horizontalCenter 
        y: index * (parent.height - height)/(repeater.count - 1) 
        radius: parent.radius 
        width: radius * 2 
        height: radius * 2 
        color: "blue" 
       } 
      } 
     } 
    } 
}