how can I center elements in ColumnLayout?
Here is my qml code:
ApplicationWindow {
id: root
visible: true
width: 640
height: 640
title: qsTr("Your Booking")
GridLayout{
anchors.fill: parent
columns: 2
flow: GridLayout.TopToBottom
Rectangle{
id: appBar
Layout.columnSpan: 2
width: root.width
height: root.height/10
color: "red"
}
ColumnLayout{
spacing:5
id: columnData
height: root.height - appBar.height
width: root.width/2
ComboBox{
anchors.horizontalCenter: parent.horizontalCenter
}
ComboBox{
}
ComboBox{
}
ComboBox{
}
ComboBox{
}
}
ColumnLayout{
}
}
}
I want to center ComboBoxes in ColumnLayout.
You should avoid using anchors and layouts at the same time. Mixing them at the same level would lead to the malfunction of the layouts or some unexpected results (however, using anchors inside the items in layouts is ok).
To align items in layouts, you can use the attached properties: Layout.alignment, e.g.:
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
This statement would make your item stay exactly in the center of your layout.
Related
I would like to add Vertical TabBar to my app in a similar manner of what Qt Creater is doing in their app (as shown in picture).
I have been searching how to simple make the TabBar vertical, yet did not find proper answers (thought its common to have it vertical).
Question: How could I make a Vertical Tab to navigate through the different qml files I have? If there are more suitable options, please suggest.
A TabBar just uses a common ListView to display a bunch of TabButtons. You can customize it by overwriting the contentItem property and making the ListView vertical, like this:
// VertTabBar.qml
TabBar {
id: control
contentItem: ListView {
model: control.contentModel
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Vertical // <<-- VERTICAL
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: height - 40
}
}
A complete example using Fusion theme.
It is important to set the width of the TabButton else the width is divided by the number of items.
Notice there is a light colour separator line, that comes from ???
Issue: first item can be partially clipped.
Well, there are a lot of things under the hood with QML...
Thus, we cannot really make a TabBar vertical...
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Templates as T
// import QtQuick.Controls.impl
// import QtQuick.Controls.Fusion
// import QtQuick.Controls.Fusion.impl
Page {
id: root
width: 1800
height: 800
Row {
anchors.fill: parent
TabBar {
id: control
width: 200
height: parent.height
contentItem: ListView {
model: control.contentModel
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Vertical
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: width - 40
}
Repeater {
model: 50
TabButton {
id: control2
width: control.width
text: "tab blabla blabla %1".arg(model.index)
contentItem: IconLabel {
spacing: control2.spacing
mirrored: control2.mirrored
display: control2.display
icon: control2.icon
text: control2.text
font: control2.font
color: control2.palette.buttonText
}
background: Rectangle {
y: control2.checked || control2.TabBar.position !== T.TabBar.Header ? 0 : 2
implicitHeight: 21
height: control2.height - (control2.checked ? 0 : 2)
border.color: Qt.lighter(Fusion.outline(control2.palette), 1.1)
border.width: 0
gradient: Gradient {
GradientStop {
position: 0
color: control2.checked ? Qt.lighter(Fusion.tabFrameColor(control2.palette), 1.04)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.08)
}
GradientStop {
position: control2.checked ? 0 : 0.85
color: control2.checked ? Qt.lighter(Fusion.tabFrameColor(control2.palette), 1.04)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.08)
}
GradientStop {
position: 1
color: control2.checked ? Fusion.tabFrameColor(control2.palette)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.16)
}
}
}
}
}
}
StackLayout {
id: stack_layout
width: parent.width - 200
height: parent.height
currentIndex: control.currentIndex
Repeater {
model: 50
Item {
Label {
anchors.centerIn: parent
text: "tab %1".arg(model.index)
font.pixelSize: 50
}
}
}
}
}
}
I need to create a long form using QML. The form will not fit inside the window, so I need for it to be scrollable. However I can't get the scroll view to work. Here is a minimum working example of my problem:
import QtQuick.Window 2.2
import QtQuick 2.9
import QtQuick.Controls 2.3
Window {
visible: true
width: 1280
height: 720
title: qsTr("Hello World")
Rectangle{
anchors.centerIn: parent
width: parent.width*0.8;
height: parent.height*0.7;
ScrollView {
anchors.fill: parent
clip: true
contentHeight: parent.height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
As I understand it, this should allow me to scroll in order to see the 3 rectangles. However I only the see the first one and the upper half of the second one and I can't scroll.
Any help would be greatly appriciated
Because your ScrollView contains multiple items you need to take care of sizing yourself and set contentHeight explicitly to the combined height of all the items.
For testing, you can set vertical scrollbar always on to see how content height affects the scrollbar.
I commented out horizontal center anchoring because it is not needed (width of your rectangles is scrollview width).
ScrollView {
anchors.fill: parent
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
contentHeight: rect1.height+rect2.height+rect3.height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
//anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
//anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
//anchors.horizontalCenter: parent.horizontalCenter
}
}
If you wrap your rectangles with an item and set item implicitHeight to its height ScrollView detects the contentHeight correctly.
ScrollView {
anchors.fill: parent
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
Item {
width: parent.width
height: rect1.height+rect2.height+rect3.height
implicitHeight: height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
}
}
}
The default implicit size for most items is 0x0, that's why you have to set implicit height for the item explicitly. However some items have an inherent implicit size, e.g. Image and Text. This means that if you place e.g. TextArea into your ScrollView it will automatically become scrollable if text is long enough.
ScrollView {
anchors.fill: parent
clip: true
TextArea {
readOnly: true
text: online ? provider.loadedText : "Offline"
wrapMode: Text.WordWrap
}
}
Set the height and width of the scrollview to be the total of childs height added together!
I can't figure out why my ToolButton is so small. The ToolBar is the orange rectangle on the top. The following code:
Item{
ToolBar{
id: toolbar
width: parent.width
height: scaleDP(0.29)
anchors.top: parent.top
background: Rectangle{
color: "orange"
}
RowLayout{
anchors.fill: parent
ToolButton {
id: buttonBack
height: parent.height
width: parent.height
Image {
id: imageBack
source: "qrc:/assets/images/left-filled-black-50.png"
anchors.fill: parent
anchors.margins: 4
}
}
Shows my ToolButton so small:
I can change the height of the Image and makes it bigger but then its outside the ToolButton. When I try to resize the height of the ToolButton, nothing happens
Findings
It seems the issue is with RowLayout. If I change it to Row or Rectangle, then the icons resizes as expected.
The RowLayout uses its children's implicitHeight and implicitWidth, and ignores height and width. For some simple items (eg Rectangle), setting their height also changes their implicitHeight, but this is not the case for QuickControls like the ToolButton.
RowLayout{
height: 20
width: parent.width
// WON'T WORK
ToolButton {
id: buttonBack1
height: parent.height
width: parent.height
}
// OK
ToolButton {
id: buttonBack2
Layout.preferredHeight: parent.height
Layout.preferredWidth: parent.height
}
// OK TOO
ToolButton {
id: buttonBack3
implicitHeight: parent.height
implicitWidth: parent.height
}
}
If you still need a RowLayout, you have two options:
Set implicitHeigt and implicitWidth or
Use the Layout's attached properties: Layout.preferredHeight & Layout.preferredWidth
I create a Rectangle to wrap the horizontal listview, but it displays over its boundary. The problem like below image:
In this image, the listview display the item infront and below of current display item. How can display only the current item at that time and When user swipe the listview, the item change by one item?
My source code here:
ApplicationWindow {
visible: true
width: 900
height: 480
title: qsTr("Hello World")
Rectangle{
id: bound
anchors.fill: parent
color: "blue"
}
Rectangle{
id: listview
width: 300
height: 300
anchors.centerIn: parent
color: "red"
ListView{
id:lst
width: 250
height: 250
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
//preferredHighlightBegin: 0
//preferredHighlightEnd: 200
highlightRangeMode: ListView.StrictlyEnforceRange
boundsBehavior: Flickable.StopAtBounds
highlightFollowsCurrentItem: true
keyNavigationWraps: true
interactive: true
model: 10
delegate: Rectangle{
id: dele
width: 250
height: 250
anchors.centerIn: listview
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
}
}
}
}
ListView does not clip by default. You can set clip: true in cases when it is needed. More details: http://doc.qt.io/qt-5/qtquick-performance.html#clipping
My problem is when i scroll ListView elements , the elements scroll over the rectangle border however i have wrapped the ListView inside the Rectangle.How can i make elements scroll without effecting the Rectangle borders.
Here are the result links
https://drive.google.com/file/d/0Bx616yTb6y_xQzNxRy1UcktrVzA/view?usp=sharing
https://drive.google.com/file/d/0Bx616yTb6y_xdl9CbWt4MTJ3Smc/view?usp=sharing
Following is the code
ListModel{
id: mod
}
Rectangle{
id:listviewrec
x: 347
y:644
width: 700
height: 91
radius: 4
border.color:"#7CC7FF"
border.width: 4
visible: true
ListView{
id:modlistview
width: listviewrec.width
height: listviewrec.height
clip: true
boundsBehavior: Flickable.DragOverBounds
spacing:25
model:mod
delegate: delegateimage
orientation: Qt.Horizontal
anchors.fill: listviewrec
}
}
Component{
id:delegateimage
Item{
id:imageitem
width:50
height:60
visible:true
Rectangle{
id:imagerec
x:10
y:6
width: 60
height:70
border.color: "#7CC7FF"
border.width: 5
radius: 2
visible:true
Image{
x: 3
y: 3
height : imagerec.height
visible: true
width : imagerec.width
anchors.fill: imagerec
source:fileUrl
}
}
}
}
I don't think qml has the concept of inner- and outer- rects as far as borders are concerned, (or if it does, borders are drawn in the inner-rect so children will be drawn on top).
Your best bet here is to probably do something like this:
Item {
id:listviewrec
x: 347
y:644
width: 700
height: 91
visible: true
ListView{
id:modlistview
width: listviewrec.width
height: listviewrec.height
clip: true
boundsBehavior: Flickable.DragOverBounds
spacing:25
model:mod
delegate: delegateimage
orientation: Qt.Horizontal
anchors.fill: listviewrec
}
Rectangle {
radius: 4
border.color:"#7CC7FF"
border.width: 4
color: 'transparent'
anchors.fill: parent
}
}
It simply draws a transparent rect with the border you want on top of the ListView
At the moment I am unable to run your code, but it seems a matter of removing explicit width and height settings, since you are using anchors.fill