How to implement Master Details View in Qt/QML (part 2) - qt

I previously asked how to implement a Master Details View in Qt/QML here: How to implement a master-details view Qt/QML on an Android tablet?.
Having continued working on this, I came out with the following mockup QML layout:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4
Item {
y: 50
Layout.fillHeight: true
width: appWindow.width
RowLayout {
id: mainLayout
anchors.fill: parent
ListModel {
id: navigation
ListElement {
item: "Item 1"
}
ListElement {
item: "Item 2"
}
ListElement {
item: "Item 3"
}
ListElement {
item: "Item 4"
}
ListElement {
item: "Item 5"
}
ListElement {
item: "Item 6"
}
ListElement {
item: "Item 7"
}
ListElement {
item: "Item 8"
}
ListElement {
item: "Item 9"
}
ListElement {
item: "Item 10"
}
ListElement {
item: "Item 11"
}
}
ScrollView{
Layout.fillHeight: true
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
ListView {
id: listview
Layout.fillHeight: true
Layout.preferredWidth: 300
contentWidth: 300
model: navigation
delegate: Rectangle {
id: wrapper
width: 300
height: 50
Text {
id: itemInfo
text: item
color: "red"
}
}
}
}
Rectangle {
x: 300
y: 50
Layout.preferredWidth: appWindow.width - listview.width-4
height: appWindow.height - 50
color: "green"
border.width: 1
}
}
}
The master view is essentially a ListView with a number of items (each item represents a selectable element, which will trigger an update of the details view, which is currently represented by the green rectangle (see attached screenshot below)
At the moment I am still having a couple of issues with the following points:
How should I modify the Layout so that the ListView covers the entire screen height?
When I "scroll" through the ListView, I have noticed a lot of screen flickering? How can I minimize this?
How can I prevent the entire upper status bar (where device system information such as battery charge is shown) from being displayed?
Edit: Modified the code by adding the ListView in a ScrollView. In this case, the ScrollView's height is the same as the screen height, which is also what I wanted (minus a 50 offset at the top, see Figure below). I think that the ListView is behaving as expected and not occupying more space that its items.
What needs to be achieved now is to change the Background color of the SrollView so that it matches the ListView color. In that case it will appear as if the ListView is occupying the entire space.

In order to hide the status bar, the easiest thing to do is to specify a theme and apply it in the manifest file. Other solutions require modifying the activity and such.
In yourApp/android/res/values create a theme.xml with the following content:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="#android:style/Theme.DeviceDefault.Light.NoActionBar">
</style>
</resources>
Then in the manifest, on the same line where you added the screen orientation, add the theme:
android:theme="#style/AppTheme"
And in your main window use Window.FullScreen visibility instead of maximized.
For the layouting, it appears you could do with less. There is nothing wrong with Layout, just IMO it is more suited to standard scalable "micro" GUI elements like buttons and such rather than custom macro elements. Here is a condensed but functional example:
Row {
anchors.fill: parent
ListView {
id: lv
width: 200
height: parent.height
model: 30
delegate: Rectangle {
width: 200
height: 50
color: index == lv.currentIndex ? "lightgray" : "white"
Text {
text: "item " + index
color: "red"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: lv.currentIndex = index
}
}
Rectangle {
anchors.right: parent.right
width: 5
height: parent.height * parent.visibleArea.heightRatio
color: "grey"
y: parent.height * parent.visibleArea.yPosition
}
}
Rectangle {
width: parent.width - lv.width
height: parent.height
color: "green"
Text {
anchors.centerIn: parent
text: "selected item n" + lv.currentIndex
color: "white"
font.pointSize: 15
}
}
}
The result:
Although it is not exactly clear the reason you offset things vertically, if you want to have the free space at the top, simply don't fill the entire parent with the root Rowelement but rather size it accordingly.

I am a bit clueless, how it comes, that you consider the ScrollView to be needed.
I removed it from your example, added clipping to the ListView and I was done.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow
{
id: appWindow
width: 1024
height: 800
visible: true
Item {
y: 50
Layout.fillHeight: true
width: appWindow.width
RowLayout {
id: mainLayout
anchors.fill: parent
ListModel {
id: navigation
ListElement { item: "Item 1" }
Component.onCompleted: {
for (var i = 2; i < 50; i++) append({ item: 'Item' + i })
}
}
ListView {
id: listview
Layout.fillHeight: true
Layout.preferredWidth: 300
contentWidth: 300
model: navigation
clip: true //<--- Add this, so there won't be no elements outside the ListView-area
delegate: Rectangle {
id: wrapper
width: 300
height: 50
Text {
id: itemInfo
text: item
color: "red"
}
}
}
Rectangle {
x: 300
y: 50
Layout.preferredWidth: appWindow.width - listview.width-4
height: appWindow.height - 50
color: "green"
border.width: 1
}
}
}
}
There are a few things you might misunderstand:
The ListView provides no background. If you want such, you need to draw something behind it, e.g. a Rectangle
The ListView does not provide ScrollBars by itself. You need to add them like this:
ScrollBar.vertical: ScrollBar { }
The ScrollBar has no native style. And the handle will disapear by default. You can find more than one question here, on how to style a ScrollBar.
If you don't clip the ListView you will see some elements protruding the ListView and suddenly disappear. If you have nothing that covers this anyway, you should set clip: true

For your ListView to take all the height, you can simply set it to fill the height of the layout. However make sure the Layout (and its parent in your case) have the right size too. Size defaults to (0,0) for Item in QML.
ListView {
id: listview
//...
Layout.fillHeight: true
//...
}
Regarding the "flickering", you can try increasing the ListView cacheBuffer property, which corresponds to the content height, in pixels, which is preloaded. However if this is really flickering, there's probably little you can do.
Flickering appears when display is refreshed with the wrong timings regarding screen refresh rate, and typically solved by using multiple buffers and/or synchronization. QtQuick hides all this complexity and uses OpenGL for rendering, but I didn't saw (yet) any flickering on Android with recent Qt versions.
You can remove the status bar by editing the Android manifest file as explained in this other post, or worse case, through JNI.

Related

qml components disappearing after enabeling layers

I have a Component for an sddm theme. At the moment I use the theme dark sugar as the base theme. The component looks like the following:
Item {
id: hexagon
property color color:"yellow"
property int radius: 30
//layer.enabled: true
//layer.samples: 8
Shape {
//... Here some Positioning and other Stuff
ShapePath {
//... Here some Options and Pathlines
}
}
}
This works fine, but as soon as I uncomment both layer settings the component disappears. Does this happen, because I load the component like this:
Pane {
...
Item {
...
MyComponent {
z: 1
}
}
}
Nor the Pane or the Item use layer but most Components in the Item use the z: 1 property.
As iam_peter says, the default width and height properties of any Item are 0, and layer.enabled sets the size of the offscreen texture to the item size. By default, the scene graph doesn't do any clipping: a child item can populate scene graph nodes outside its parent's bounds. But when you confine the children's rendering to a specific offscreen texture, anything that doesn't fit is clipped. Here's a more interactive example to play with this:
import QtQuick
import QtQuick.Controls
Rectangle {
width: 640
height: 480
Column {
CheckBox {
id: cbLE
text: "layer enabled"
}
Row {
spacing: 6
TextField {
id: widthField
text: layerItem.width
onEditingFinished: layerItem.width = text
}
Label {
text: "x"
anchors.verticalCenter: parent.verticalCenter
}
TextField {
id: heightField
text: layerItem.height
onEditingFinished: layerItem.height = text
}
}
}
Rectangle {
id: layerItem
x: 100; y: 100
border.color: "black"; border.width: 2
layer.enabled: cbLE.checked
Rectangle {
width: 100
height: 100
color: "tomato"
opacity: 0.5
}
Text {
text: "this text will get clipped even when layer size is defined"
}
}
}
You can use renderdoc to see how the rendering is done; for example you can see the texture that is created by enabling the layer.
This is a small reproducible example:
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
//width: 200
//height: 200
//layer.enabled: true
Rectangle {
width: 100
height: 100
color: "red"
}
}
}
I suspect that if you don't set a size on the Item on which you want to enable the layer (layer.enabled: true), it will have a size of 0. Hence the offscreen buffer has a size of 0.
As a side note, this works without layer, because the clip property of an Item by default is set to false. So it won't clip to the bounds of its parent.

Qml: ScrollView containing a ListView does not adjust ScrollBar handle

I am trying to add vertical scrollbar, as needed, to a ListView. I have been told that the best approach is to place the ListView inside a ScrollView, instead of inserting a scrollbar into the ListView (like in this question), because that would make it more efficient for the GPU.
I inserted it, as in the example below - but no matter what I tried, if the scroll bar shows, its handle always takes the entire height and of course doesn't move.
I hope you can take a look at my sample and give me a suggestion, why the scroll bar is not showing up properly.
There are comments inside the code explaining what I did and why.
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Item
{
readonly property int parentWidth: 280
readonly property int parentMaxHeight: 400
// Main reason for doing this - the items are custom objects and
// their width does not automatically adjust for having the scroll bar or not
// But also, to set scroll bars because Qt.ScrollBarAsNeeded makes them not show
property bool scrollBarVisible: myListView.contentHeight > myListView.height
width: parentWidth
height: parentMaxHeight
Rectangle
{
id: myMenuRect
anchors.rightMargin: 2
anchors.leftMargin: 2
anchors.bottomMargin: 4
anchors.topMargin: 4
width: parentWidth
height: myListView.height
radius: 10
z: 2
color: "red" // Adding this to show why the height of the rectangle must match the listview
}
ScrollView
{
id: myScrollView
parent: myMenuRect
anchors.fill: parent
anchors.topMargin: 5
anchors.bottomMargin: 5
anchors.rightMargin: 5
frameVisible: false
// I have tried to set implicitHeight in many different ways,
// no matter what I do the scroll bar handle occupies the enire bar and doesn't move
// The Qt.ScrollBarAsNeeded didn't work... so I did this
verticalScrollBarPolicy: scrollBarVisible ? Qt.ScrollBarAlwaysOn : Qt.ScrollBarAlwaysOff
// Adding colors on scrollbar to show which part is showing
style: ScrollViewStyle
{
handle: Rectangle
{
implicitWidth: 10
implicitHeight: 2
radius: 10
anchors.leftMargin: 1
anchors.left: parent.left
color: "yellow"
}
scrollBarBackground: Rectangle
{
implicitWidth: 12
anchors.right: parent.right
color: "green"
}
}
ListView
{
id: myListView
parent: myScrollView
model: wifiComboListModel
focus: true
clip: true
interactive: false
width: parent.width
// I am trying to tell my view to take the minimum space it needs that is below
// a certain height. Ignore the "myListView." prefixes here, I know they are not needed but
// make it easier to move this outside if needed
height: (myListView.contentHeight > 0 ?
(myListView.contentHeight < parentMaxHeight ?
myListView.contentHeight : parentMaxHeight) : 0)
// I made this as simple as possible, without affecting "quality"
delegate: Text
{
text: _comboBoxText
height: 70
width: parent.width - 20
}
}
ListModel
{
id: wifiComboListModel
}
// I want to populate my model from outside, not be static. Not sure if this affects the bars
function populateComboBoxListModel()
{
wifiComboListModel.clear();
for (var itemIndex = 0; itemIndex < listItems.length; itemIndex++)
{
wifiComboListModel.append
({
_id: itemIndex,
_comboBoxText: listItems[itemIndex]
});
}
}
Component.onCompleted:
{
populateComboBoxListModel();
}
property var listItems: [
"This",
"annoying",
"list",
"view",
"does",
"not behave the way",
"I expect.",
"I",
"tried many",
"things,",
"now I am",
"begging for your",
"help",
"."
]
}
you have a binding loop for height in myMenuRect. This occurs because myMenuRect depends on height of the list view and vice versa. After fixing it seems to be working:
import QtQuick 2.0
import QtQuick.Controls 1.4
ApplicationWindow
{
readonly property int parentWidth: 280
readonly property int parentMaxHeight: 400
visible: true
// Main reason for doing this - the items are custom objects and
// their width does not automatically adjust for having the scroll bar or not
// But also, to set scroll bars because Qt.ScrollBarAsNeeded makes them not show
property bool scrollBarVisible: myListView.contentHeight > myListView.height
width: parentWidth
height: parentMaxHeight
Rectangle
{
id: myMenuRect
anchors.rightMargin: 2
anchors.leftMargin: 2
anchors.bottomMargin: 4
anchors.topMargin: 4
width: parentWidth
height: parentMaxHeight
radius: 10
z: 2
}
ScrollView
{
id: myScrollView
parent: myMenuRect
anchors.fill: parent
anchors.topMargin: 5
anchors.bottomMargin: 5
anchors.rightMargin: 5
frameVisible: false
// I have tried to set implicitHeight in many different ways,
// no matter what I do the scroll bar handle occupies the enire bar and doesn't move
// The Qt.ScrollBarAsNeeded didn't work... so I did this
verticalScrollBarPolicy: scrollBarVisible ? Qt.ScrollBarAlwaysOn : Qt.ScrollBarAlwaysOff
ListView
{
id: myListView
model: wifiComboListModel
focus: true
clip: true
interactive: false
width: parent.width
// I am trying to tell my view to take the minimum space it needs that is below
// a certain height. Ignore the "myListView." prefixes here, I know they are not needed but
// make it easier to move this outside if needed
height: (myListView.contentHeight > 0 ?
(myListView.contentHeight < parentMaxHeight ?
myListView.contentHeight : parentMaxHeight) : 0)
// I made this as simple as possible, without affecting "quality"
delegate: Text
{
text: _comboBoxText
height: 70
width: parent.width - 20
}
}
}
ListModel
{
id: wifiComboListModel
}
// I want to populate my model from outside, not be static. Not sure if this affects the bars
function populateComboBoxListModel()
{
wifiComboListModel.clear();
for (var itemIndex = 0; itemIndex < listItems.length; itemIndex++)
{
wifiComboListModel.append
({
_id: itemIndex,
_comboBoxText: listItems[itemIndex]
});
}
}
Component.onCompleted:
{
populateComboBoxListModel();
}
property var listItems: [
"This",
"annoying",
"list",
"view",
"does",
"not behave the way",
"I expect.",
"I",
"tried many",
"things,",
"now I am",
"begging for your",
"help",
"."
]
}
The reason why my ScrollView did not behave was parenthood :)
The issue: even though I set the parent in the ListView, it seems it did not take:
ListView
{
parent: myScrollView
What I had to do to make it work was actually nest the ListView inside the ScrollView.
ScrollView
{
id: myScrollView
parent: myMenuRect
anchors.fill: parent
ListView
{
id: myListView
model: wifiComboListModel
I think the "parent" property may not work well for all controls, and will remember that in the future.

QML MenuItem Highlighted doesn't work

Please can someone explain me one thing. Suppose I have an item, if I click it, then a drop-down menu appears. How to make that when you hover over menu items, they stand out like that?
Code:
Rectangle {
id: main_window
width: 600
height: 600
property int mrg: 10
Rectangle {
anchors.centerIn: parent
width: 500
height: 500
color: 'green'
Text {
id: field
text: "Click!"
font.pointSize: 20
color: 'white'
anchors.centerIn: parent
MouseArea {
id: ma
anchors.fill: parent
hoverEnabled: true
onClicked: {
menu.x = ma.mouseX
menu.open()
}
}
Menu {
id: menu
y: field.height
MenuItem {
text: "Menu item"
highlighted: true
}
}
}
}
}
In the documentation, I came across the point that the proper highlight is responsible for selecting the appropriate menu item. I installed it in the True, but it did not change anything.
Please tell me what I'm doing wrong. Thanks a lot.
Although it's an old question, I came across this as it was something I was wanting to do myself. I think m7913d's answer can be simplified a little by making use of the hovered property of MenuItem.
MenuItem {
id: control
text: "Menu item"
hoverEnabled: true
background: Item {
implicitWidth: 200
implicitHeight: 40
Rectangle {
anchors.fill: parent
anchors.margins: 1
color: control.hovered ? "blue" : "transparent"
}
}
}
The other thing I did was to retain the control.down handling of the original implementation, so the color expression is slightly more involved than shown here.
The default implementation of MenuItem doesn't include any visual highlighting feature, but you can adapt the graphical representation to your needs as explained in the Qt manuals. So, your MenuItem should look like this:
MenuItem {
id: control
text: "Menu item"
background: Item {
implicitWidth: 200
implicitHeight: 40
Rectangle {
anchors.fill: parent
anchors.margins: 1
color: control.highlighted ? "blue" : "transparent" // blue background if the control is highlighed
MouseArea {
anchors.fill: parent
hoverEnabled: true // enable mouse enter events when no mouse buttons are pressed
onContainsMouseChanged: control.highlighted = containsMouse // set the highlighted flag when the mouse hovers the MenuItem
}
}
}
}
Note that this implementation is based on the default implementation provided by Qt:
background: Item {
implicitWidth: 200
implicitHeight: 40
Rectangle {
x: 1
y: 1
width: parent.width - 2
height: parent.height - 2
color: control.visualFocus || control.down ? Default.delegateColor : "transparent"
}
}
Note that Bob's answer simplifies this solution by eliminating the MouseArea

QML ListView scrolling does not produce any animation, when delegates have different width

I am creating a ListView with horizontal orientation. The highlight is set to one fixed position of the view so that the list elements scroll through the visible area when I increment/decrement the current Item. Here is my code for the view:
ListView {
anchors.fill: parent
model: ListModel{
ListElement{name:"x"}
ListElement{name:"y"}
ListElement{name:"z"}
}
delegate:
Rectangle {
property int viewW: ListView.view.width
property bool isCurrent: ListView.isCurrentItem
width: ListView.isCurrent? viewW * 0.4 : viewW * 0.3
Text {
anchors.fill: parent
text: name
}
}
orientation: Qt.Horizontal
highlight: Rectangle {color: "transparent"}
preferredHighlightBegin: 0
preferredHighlightEnd: width*0.4
highlightRangeMode: ListView.StrictlyEnforceRange
}
I want the delegate of the current item to have a greater width than all the other elements. However, when the width of all delegates is not identical, the list scrolling animation (e.g. you can see elements moving to next position, instead of just appearing on the new position) does not apply any more.
How can I have a ListView with the current element showing a different width than the rest of the other elements, while still being able to have the scrolling animations?
The currently selected item can be modified by combining the property to modify with the currentIndex/index properties. The former is the property contained in the ListView to indicate the selected item (as you already know). The latter is a property exposed in the delegate to represent the index of the corresponding item in the list. When we have that
ListView.view.currentIndex === index
we are in the currently selected item. Hence, in your delegate, you can write something like this:
width: ListView.view.currentIndex === index ? 60 : 30
Now the selected item will be twice as large as the other items. However the effect is a little bit ugly. I would go for the following one:
scale: ListView.view.currentIndex === index ? 1.5 : 0.5
Here you are saying that "when this item is the selected one it should grow by 50%, otherwise it should shrink by 50%".
The final code for the width could look like this:
import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
Window {
id: container
width: 300
height: 150
visible: true
ListView {
id: list
anchors.fill: parent
spacing: 5
model: ListModel{
ListElement{name:"a"}
ListElement{name:"b"}
ListElement{name:"c"}
ListElement{name:"d"}
ListElement{name:"e"}
ListElement{name:"f"}
ListElement{name:"g"}
ListElement{name:"h"}
ListElement{name:"i"}
ListElement{name:"j"}
ListElement{name:"k"}
ListElement{name:"l"}
ListElement{name:"x"}
ListElement{name:"y"}
ListElement{name:"z"}
}
delegate:
Rectangle {
width: ListView.view.currentIndex === index ? 60 : 30 // the magnifying/shrinking
color: "steelblue"
height: ListView.view.height
Text {
anchors.centerIn: parent
text: name
font.pixelSize: 20
}
Behavior on width { // added to smooth the resizing
NumberAnimation { duration: 100 }
}
}
orientation: Qt.Horizontal
highlight: Rectangle {color: "transparent"}
preferredHighlightBegin: 0
preferredHighlightEnd: delegate.width
highlightRangeMode: ListView.StrictlyEnforceRange
}
}
And the effect is not that beautiful as said. I would go for the scale property, as follows:
import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
Window {
id: container
width: 300
height: 150
visible: true
ListView {
id: list
anchors.fill: parent
spacing: 5
model: ListModel{
ListElement{name:"a"}
ListElement{name:"b"}
ListElement{name:"c"}
ListElement{name:"d"}
ListElement{name:"e"}
ListElement{name:"f"}
ListElement{name:"g"}
ListElement{name:"h"}
ListElement{name:"i"}
ListElement{name:"j"}
ListElement{name:"k"}
ListElement{name:"l"}
ListElement{name:"x"}
ListElement{name:"y"}
ListElement{name:"z"}
}
delegate:
Rectangle {
scale: ListView.view.currentIndex === index ? 1.5 : 0.5
color: "transparent"
width: 30
height: ListView.view.height
Text {
anchors.centerIn: parent
text: name
font.pixelSize: 20
}
Behavior on scale { // added to smooth the scaling
NumberAnimation { duration: 100 }
}
}
orientation: Qt.Horizontal
highlight: Rectangle {color: "steelblue"}
preferredHighlightBegin: 0
preferredHighlightEnd: delegate.width
highlightRangeMode: ListView.StrictlyEnforceRange
}
}
Note that the highlight it strictly maintained at the beginning of the list (i.e. at the left side) as required.

Add elements dynamically to SplitView in QML

I am working with QML and I want to add elements to SplitView dynamically eg. onMouseClick, but so far I didn't find the answer.
What I've found out so far is that the SplitView has it's default property set to it's first child's data property. So I guess I should try and add new dynamically created components with the parent set to that child (splitView1.children[0]). Unfortunately that doesn't work either. What is more the number of children of that first child is zero after the component has finished loading (seems like the SplitLayout's Component.onCompleted event calls a function that moves those children somewhere else). Thus the added children do not render (and do not respond to any of the Layout attached properties).
Please see the following code snippet:
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
ApplicationWindow {
width: 600
height: 400
SplitView {
anchors.fill: parent
Rectangle {
id: column
width: 200
Layout.minimumWidth: 100
Layout.maximumWidth: 300
color: "lightsteelblue"
}
SplitView {
id: splitView1
orientation: Qt.Vertical
Layout.fillWidth: true
Rectangle {
id: row1
height: 200
color: "lightblue"
Layout.minimumHeight: 1
}
// Rectangle { //I want to add Rectangle to splitView1 like this one, but dynamicly eg.onMouseClick
// color: "blue"
// }
}
}
MouseArea {
id: clickArea
anchors.fill: parent
onClicked: {
console.debug("clicked!")
console.debug("len: " + splitView1.__contents.length); // __contents is the SplitView's default property - an alias to the first child's data property
var newObject = Qt.createQmlObject('import QtQuick 2.1; Rectangle {color: "blue"}',
splitView1, "dynamicSnippet1"); //no effect
// var newObject = Qt.createQmlObject('import QtQuick 2.1; import QtQuick.Layouts 1.0; Rectangle {color: "blue"; width: 50; height: 50}',
// splitView1, "dynamicSnippet1"); //rectangle visible, but not in layout(?) - not resizeable
}
}
}
Is there any way I can make the dynamically created components render properly in the SplitView as the statically added ones?
It appears that the API does not provide support for dynamic insertion of new elements. Even if you do get it to work it would be a hack and might break with future releases. You may need to roll your own control to mimic the behavior you want. Ideally it should be backed by some sort of model.
As of QtQuick Controls 1.3, SplitView has an addItem(item) method.
you have to use the Loader for load dinamicaly objects. in onClicked handle you have to declare sourceComponent property to change the source of the Loader, something like this:
ApplicationWindow {
width: 600
height: 400
SplitView {
anchors.fill: parent
Rectangle {
id: column
width: 200
Layout.minimumWidth: 100
Layout.maximumWidth: 300
color: "lightsteelblue"
}
SplitView {
id: splitView1
orientation: Qt.Vertical
Layout.fillWidth: true
Rectangle {
id: row1
height: 200
color: "lightblue"
Layout.minimumHeight: 1
}
Loader {
id:rect
}
}
}
MouseArea {
id: clickArea
anchors.fill: parent
onClicked: {
console.debug("clicked!")
console.debug("len: " + splitView1.__contents.length) // __contents is the SplitView's default property - an alias to the first child's data property
rect.sourceComponent = algo
}
}
Component {
id:algo
Rectangle {
anchors.fill: parent
color: "blue"
}
}
}
I saw the source code of SplitView, it calculate each split region when Component.onCompleted signal. So I think that is a key point. No matter how you do (insert, dynamic create). The region won't be reset after you insert a new region for split.

Resources