i having problems objects layout. need create 2 blocks of text items. second block should follow first. here code:
import qtquick 2.5 import qtquick.window 2.2 import qtquick.layouts 1.1 window { visible: true id: page rectangle { id: contentrec anchors.fill: parent columnlayout { spacing: 16 anchors.fill: contentrec anchors.margins: 16 rectangle { id: hlprec color: "#fff" columnlayout { anchors.fill: hlprec spacing: 8 text { text: "some text 1" color: "#434d56" } text { text: "some text 1" } text { text: "some text 2" } text { text: "some text 3" } text { text: "some text 4" } } } rectangle { layout.preferredheight: 16 } rectangle { id: inforec color: "#fff" columnlayout { anchors.fill: inforec spacing: 8 text { text: "status text 1" } text { text: "status text 2" } text { text: "status text 3" } } } } } } the problem second block overlaps first. wrong code?
both of inner columnlayout components set fit parents, have neither width/height nor anchor properties defined, hence size zero. because rectangles don't clip contents, see items overlapping.
when working column or columnlayout, content height calculated put in containers. if correctly, can build pretty flexible , clever layouts without having keep track of individual heights. however, have specify other dimension either setting width property or appropriate anchors. in case of column , columnlayout want "snap" component's width fit parent. @ same time leave height unconstrained, allowing item grow vertically. same goes row , rowlayout width calculated , have specify height.
the solution in case either based on columnlayout or column. note hlprec , inforec removed , anchors of column/columnlayout set.
via columnlayout:
import qtquick 2.6 import qtquick.layouts 1.1 rectangle { anchors.fill: parent columnlayout { spacing: 16 anchors.fill: parent anchors.margins: 16 columnlayout { anchors.left: parent.left anchors.right: parent.right spacing: 8 repeater { model: 5 text { text: "top " + index } } } rectangle { layout.preferredheight: 16 anchors.left: parent.left anchors.right: parent.right color: "#ff00ff" } columnlayout { anchors.left: parent.left anchors.right: parent.right spacing: 8 repeater { model: 5 text { text: "bottom " + index } } } } } via column:
import qtquick 2.6 rectangle { anchors.fill: parent column { spacing: 16 anchors.fill: parent anchors.margins: 16 column { anchors.left: parent.left anchors.right: parent.right spacing: 8 repeater { model: 5 text { text: "top " + index } } } rectangle { height: 16; anchors.left: parent.left anchors.right: parent.right color: "#ff00ff" } column { anchors.left: parent.left anchors.right: parent.right spacing: 8 repeater { model: 5 text { text: "bottom " + index } } } } } the columnlayout center content items individually , uses total height available window whereas column align elements top bottom using content height. you'll notice different behavior when changing window's height.
in case rectangles used define individual backgrounds, can (demonstrated column based approach):
import qtquick 2.6 rectangle { anchors.fill: parent column { spacing: 16 anchors.fill: parent anchors.margins: 16 rectangle { anchors.left: parent.left anchors.right: parent.right height: topcolumn.height color: "#ff0000" column { id: topcolumn anchors.left: parent.left anchors.right: parent.right spacing: 8 repeater { model: 5 text { text: "top " + index } } } } rectangle { height: 16; anchors.left: parent.left anchors.right: parent.right color: "#ff00ff" } rectangle { anchors.left: parent.left anchors.right: parent.right height: bottomcolumn.height color: "#0000ff" column { id: bottomcolumn anchors.left: parent.left anchors.right: parent.right spacing: 8 repeater { model: 5 text { text: "bottom " + index } } } } } } hope helps!
Comments
Post a Comment