In Qml GridLayout with Repeater in it firstly creates items with zero x,y coordinates, width and height. After it emits Component.onComleted signal. And then moves items to correct coordinates, then resizes them.
GridLayout {
id: inputPanel
property var tableModel
rowSpacing: 0
columnSpacing: 0
Repeater {
model: inputPanel.tableModel
delegate: KeyButton {
displayedText: model.display
Layout.minimumHeight: tableModel.elementSize.height
Layout.minimumWidth: tableModel.elementSize.width
Layout.maximumHeight: tableModel.elementSize.height
Layout.maximumWidth: tableModel.elementSize.width
Layout.alignment: Qt.AlignCenter
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
Keybutton.qml
Item {
id: keyButton
anchors.margins: 2.5
Rectangle {
anchors.fill: parent
}
}
Is there any way to catch a moment, when KeyButtons already will have correct x, y, width, height. (KeyButton.onXChanged is not best way, because it emits, when Grid Layout's size changes too)
Related
Dynamic loading data into a QML SwipeView loaded asyncronous is autmomatically increment the current index.
Loader{
asynchronous: true
anchors.fill: parent
sourceComponent: ColumnLayout{
//Any content here that can take some time to load
TabBar{
Layout.fillWidth: true
Repeater{
model: swRepeater.model
delegate: TabButton{
text: "Tab button "+index
}
}
}
SwipeView{
// anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
currentIndex: 0
Repeater{
id: swRepeater
model: 5
delegate: Item{
Label{
anchors.centerIn: parent
text: qsTr("Test "+index)
}
}
}
onCurrentIndexChanged: {
console.debug("Index was modified to ",currentIndex)
}
}
}
}
At the end of the loading data the current item and index will be 4, and not 0 as explected.
Also is displayed the last item from stack.
The same behavior can be se on the TabBar item so the problem looks to came from ListView or Container.
Any suggestion on this behavior?
I have two elements inside of a RowLayout, which I'm trying to fit within the boundaries of my window.
Page {
id: settingsView
anchors.fill: parent
ColumnLayout {
Layout.fillWidth: true
RowLayout {
Layout.fillWidth: true
Label {
text: "This is some long sample text which will definitely be wider than the page width."
padding: 6
Layout.maximumWidth: parent.width - timeComboBox.width
verticalAlignment: timeComboBox.height * 0.5
wrapMode: Label.WordWrap
}
ComboBox {
id: timeComboBox
model: ["1", "2", "3"]
}
}
}
}
This page gets pushed onto a StackView(the StackView also anchors.fill: parent), but no matter what I do, I cannot make it so that the Label text gets wrapped, and the ComboBox ends up half outside the window boundaries.
You have several problem points, I've correct them a bit:
Page {
id: settingsView
anchors.fill: parent
ColumnLayout {
width: parent.width // this item is not inside Layout so can't have Layout.* attached properties
RowLayout {
Layout.fillWidth: true
Label {
text: "This is some long sample text which will definitely be wider than the page width."
padding: 10
Layout.fillWidth: true // just fill all the space except the ComboBox
verticalAlignment: Text.AlignVCenter // that should be enum, not numerical value
wrapMode: Text.WordWrap // this is Text.* emum, not Label's one
}
ComboBox {
id: timeComboBox
model: ["1", "2", "3"]
}
}
}
}
It turns out that the answer was quite simple, all I had to do was remove Layout.maximumWidth: parent.width - timeComboBox.width and replace it with Layout.fillWidth: true
I'm using Qt 5.10 and i'm using a SwipeView. I want to change the swipe animation speed, but after reading the docs i could not see how. Is there some workaround to do this?
the reason i was trying to do this was because, don't know why, the swipe transition animation was very slow (see below)
this is my code:
ColumnLayout{
anchors.fill: parent
Item{
id:modulecontainer
Layout.fillHeight: true
Layout.fillWidth: true
SwipeView{
id: moduleview
anchors.fill: parent
interactive: loggedUser.role==User.AdminRole
clip: true
orientation: Qt.Horizontal
Item {
id: firstPage
Loader {
anchors.fill: parent
id:moduleLoader
}
}
Item {
id: secondPage
Rectangle{
anchors.fill: parent
color: "red"
}
}
}
}
}
I solved this issue just taking the code of contentItem implementation from the source code of SwipeView:
....
SwipeView{
id: moduleview
....
contentItem: ListView {
model: moduleview.contentModel
interactive: moduleview.interactive
currentIndex: moduleview.currentIndex
spacing: moduleview.spacing
orientation: moduleview.orientation
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.StopAtBounds
highlightRangeMode: ListView.StrictlyEnforceRange
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 250
// min:10
maximumFlickVelocity: 4 * (moduleview.orientation ===
Qt.Horizontal ? width : height)
}
}
....
the result:
don't know why this solves the problem, but i'm sharing just in case others face the same problem. If more animation speed is wanted just replace the maximumFlickVelocity factor from 4 to a bigger value
I want to set the ApplicationWindow to minimum width and height by the minimum width and height of the child element "mainLayout". I am having trouble to use the property of "mainLayout" in the parent QML ApplicationWindow. I tried to make the property viewable by making an alias. Not sure if it is the right solution. It does not work. But there is also no Error when I run.
My code looks like this:
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2
ApplicationWindow {
visible: true
width: 1500
height: 1200
property int margin: 11
minimumWidth: serial.mainLayout.minimumWidth + 2 * margin //this one is not working
minimumHeight: serial.mainLayout.minimumHeight + 2 * margin //this one is not working
Serial {
id: serial
anchors.fill: parent
}
}
Serial.qml
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import io.qt.serialComm 1.0
Item {
anchors.fill: parent
id: item
property alias mainLayout: mainLayout
ColumnLayout {
id: wrapper
width: parent.width/2
height: parent.height/2
ColumnLayout {
id: mainLayout
anchors.fill: parent
anchors.margins: margin
GroupBox {
id: rowBox
title: "Row layout"
Layout.fillWidth: true
RowLayout {
id: rowLayout
anchors.fill: parent
TextField {
placeholderText: "This wants to grow horizontally"
Layout.fillWidth: true
}
Button {
text: "Button"
}
}
}
GroupBox {
id: gridBox
title: "Grid layout"
Layout.fillWidth: true
GridLayout {
id: gridLayout
rows: 3
flow: GridLayout.TopToBottom
anchors.fill: parent
Label { text: "Line 1" }
Label { text: "Line 2" }
Label { text: "Line 3" }
TextField { }
TextField { }
TextField { }
TextArea {
text: "This widget spans over three rows in the GridLayout.\n"
+ "All items in the GridLayout are implicitly positioned from top to bottom."
Layout.rowSpan: 3
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
TextArea {
id: t3
text: "This fills the whole cell"
Layout.minimumHeight: 30
Layout.fillHeight: true
Layout.fillWidth: true
}
GroupBox {
id: stackBox
title: "Stack layout"
implicitWidth: 200
implicitHeight: 60
Layout.fillWidth: true
Layout.fillHeight: true
StackLayout {
id: stackLayout
anchors.fill: parent
function advance() { currentIndex = (currentIndex + 1) % count }
Repeater {
id: stackRepeater
model: 5
Rectangle {
color: Qt.hsla((0.5 + index)/stackRepeater.count, 0.3, 0.7, 1)
Button { anchors.centerIn: parent; text: "Page " + (index + 1); onClicked: { stackLayout.advance() } }
}
}
}
}
}
}
}
When I put the code in one file, it works and the ApplicationWindow does not get smaller than the minimum height and width of the child element "mainLayout". But splitting into 2 files does not work..
The reason why you are not able to use the property minimumWidth of your QML element with the id mainLayout like serial.mainLayout.minimumWidth is that it doesn't have one.
However, the QML element in question does have an attached property Layout.minimumWidth because it's an item in a ColumnLayout with the id wrapper. You already found out that you could access it through serial.mainLayout.Layout.minimumWidth.
Attached property mechanism that enables the minimumWidth for mainLayout is not the easiest one to understand. In short, it enables objects to be annotated with extra properties that are otherwise unavailable to the object but are relevant in certain circumstances. In this case minimumWidth is considered relevant for child items of ColumnLayout. Items in a ColumnLayout support these attached properties.
i have a listview, how to change a speed of changing items, tried highlightMoveSpeed(highlightMoveDuration), but that does not working
Is there any way to increase the spped
slider.qml
import QtQuick 1.0
Rectangle {
id: slider
anchors.fill: parent
Component {
id: pageDelegate
Rectangle {
id: page
height: parent.height
Component.onCompleted: page.width = slider.width
Rectangle {
anchors.fill: parent
// anchors.margins: 15
Image{
anchors.top: parent.top
anchors.fill: parent
source: modelData
}
}
}
}
ListView {
id: list_model
anchors.fill: parent
model: modelData
delegate: pageDelegate
orientation: ListView.Horizontal
snapMode: ListView.SnapToItem
spacing: 5
highlightMoveSpeed: 10000000
}
}
You can either use the default highlight and set its speed, e.g.
highlightMoveDuration : 200
highlightMoveVelocity : 1000
or, in case you use your custom highlight, let the highlight component handle the behaviour. E.g.
// Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
// to false so the highlight delegate can control how the highlight is moved.
highlightFollowsCurrentItem: false
highlight: Rectangle {
y: myListView.currentItem.y;
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration:200;
maximumEasingTime:300
velocity : 1000
}
}
}
Check the qt highlight example
A note about the other highlight move property: if you want to use highlightMoveDuration instead of highlightMoveVelocity (highlightMoveSpeed in Qt 4), you need to set the latter to -1:
highlightMoveDuration: 1000
highlightMoveVelocity: -1