My problem is that in my QML app I have a menu bar button and I want to show the icon on the left and text on the right so that the text is hidden when I menu is contracted and only the icon is showing but when I add the icon to the button it is visible in the Qt Quick Designer but when I run the app the icon is not visible at all.
Here is the code for my main QML:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle {
id: main_frame
color: "#282c34"
anchors.fill: parent
Rectangle {
id: menu_frame
width: 56
color: "#21252b"
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
Button {
id: menu_button
text: "Hide"
icon.name: "menu_icon"
icon.source: "icons/menu.png"
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
leftPadding: 17
checkable: false
autoExclusive: false
checked: false
font.family: "Times New Roman"
display: AbstractButton.TextBesideIcon
highlighted: false
autoRepeat: false
flat: false
anchors.leftMargin: 0
anchors.rightMargin: 0
anchors.topMargin: 0
}
}
}
}
Here is how it looks in the designer:
Here is how it looks when I run the app:
Related
I am new to QML and I am trying to implement a horizontal splitview with 2 children. The problem that I am having is that despite setting maximum and minimum widths for the children, the last child always takes up the entire split view and all the others are hidden and have to be manually opened. I have tried defining minimum and maximum widths using Layout.maximum/minimumwidth (which dont work at all) and have tried using fillwidth on the first child of the splitview. Nothing seems to work. I even copied and pasted the code from the qml doc page from splitview and it did the same thing. Here is my code:
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
import "../buttons"
import "../customWidgets"
Rectangle {
id: conversationsPage
anchors.fill: parent
height: 455
width: 800
SplitView {
id: splitView
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
id: sideBar
Layout.minimumWidth: 200
Layout.preferredWidth: 300
Layout.maximumWidth: 500
Layout.fillWidth: true
color: "#b9b9b9"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.topMargin: 0
clip: true
Rectangle {
id: sideBarTopBar
y: 0
z: 2
height: 44
color: "#e868ff"
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 0
anchors.rightMargin: 0
SearchBar {
id: conversationSearchBar
anchors.left: parent.left
anchors.right: newConversationBtn.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
anchors.topMargin: 10
anchors.leftMargin: 10
anchors.rightMargin: 10
}
IconBtn {
id: newConversationBtn
width: 35
height: 35
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 10
btnIconSource: "../images/icons/plus.svg"
}
}
ScrollView {
id: conversationsListScroll
anchors.left: parent.left
anchors.right: parent.right
anchors.top: sideBarTopBar.bottom
anchors.bottom: parent.bottom
z: 1
anchors.topMargin: 0
ColumnLayout {
id: conversationListLayout
x: 0
y: 0
width: conversationsListScroll.width
clip: true
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
}
}
}
Rectangle {
id: conversationView
Layout.fillWidth: false
Layout.minimumWidth: 300
Layout.maximumWidth: 500
color: "#ff0000"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.bottomMargin: 0
}
}
Do you guys have any idea why the split view isnt working the way I want it to?
I noticed a couple of things, first, in SplitView from Quick Controls 2, you must use the SplitView attached property instead of the Layout attached property.
Secondarily, I also noticed that you have anchors specified inside the direct children of the SplitView, which have no effect and can be removed. I am not sure, but it seems like the child with SplitView.fillWidth: true should not have a maximum width set, as both children having maximum widths can prevent the SplitView from filling its parent Rectangle fully (you may still have a use case for this, but I removed it for this reason).
Here is the code with these recommendations:
SplitView {
id: splitView
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
id: sideBar
SplitView.minimumWidth: 200
SplitView.preferredWidth: 300
SplitView.fillWidth: true
color: "#b9b9b9"
clip: true
// children here...
}
Rectangle {
id: conversationView
SplitView.fillWidth: false
SplitView.minimumWidth: 300
SplitView.maximumWidth: 500
color: "#ff0000"
}
}
I'm trying to use a scrollbar inside a scrollview. The scrollbar shows up and I can interact with it (hover/pressed), but it doesn't move, and I can't understand why. I wrote my code by following the official documentation and online examples.
Here's the code:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Window {
width: 740
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")
Rectangle {
id: rectangle
color: "#40405f"
anchors.fill: parent
Button {
id: button
text: qsTr("Menu")
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 10
anchors.bottomMargin: 466
anchors.topMargin: 74
onClicked: animationMenu.running = true
}
ScrollView {
id: scrollView
width: 0
anchors.left: button.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 10
anchors.bottomMargin: 10
anchors.topMargin: 10
clip: true
Rectangle {
id: rectangle1
color: "#00000000"
border.color: "#00000000"
border.width: 0
anchors.fill: parent
PropertyAnimation {
id: animationMenu
target: scrollView
property: "width"
to: if(scrollView.width == 0) return 240; else return 0
duration: 800
easing.type: Easing.InOutQuint
}
Column {
id: columnMenu
width: 0
anchors.fill: parent
spacing: 10
Button {
id: button1
text: qsTr("Button")
}
Button {
id: button2
text: qsTr("Button")
}
Button {
id: button3
text: qsTr("Button")
}
Button {
id: button4
text: qsTr("Button")
}
}
}
ScrollBar {
id: vbar
hoverEnabled: true
orientation: Qt.Vertical
size: scrollView.height / rectangle1.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
wheelEnabled: true
pressed: true
active: true
}
}
}
}
Ok, so I edited the code to a smaller version so that it can be run.
Some advices:
Use anchors or Layouts. Do not use fixed values or some kind of treats, no matter if it works. The long term value of your code will be bad.
You should read carefully the (ScrollView documentatio). Also the Size section and the Touch and Mouse Interaction Section.
I am able to modify your example without the animation.
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.15
Window {
width: 740
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")
Rectangle {
id: rectangle
color: "#40405f"
anchors.fill: parent
RowLayout{
anchors.fill: parent
Button {
id: button
text: qsTr("Menu")
width: 100
height: 50
}
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout{
implicitHeight: 2000
implicitWidth: 2000
Column {
id: columnMenu
width: 0
anchors.fill: parent
spacing: 10
Repeater{
model: 50
delegate: Button {
text: qsTr("Button")
}
}
}
}
}
}
}
}
Requirement: I am building a Settings app in QML, in which the I have divided screen into a grid. On the left hand side of the Grid, there are buttons : Home, Connectivity, Settings and Quit. and on the right hand side, corresponding display should be drawn. Currently, I have added a rectangle, and when I click on buttons like Home, Settings, connectivity etc.. . Code written inside the rectangle of StackLayout is executed successfully.
Instead of writing code in a rectangle, i want to write code in a separate file like settings.qml, connectivity.qml.
How to call the different file by clicking on buttons and setting current Index
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id:main1
visible: true
x:0
y:20
width: Screen.width
height: Screen.height
title: qsTr("Settings")
GridLayout {
id: gridLayout
width: parent.width
height:main1.height
columns: 2
Rectangle {
id: left_rect
width: Screen.width/4
height: gridLayout.height
color:"yellow"
Button {
id: button
text: qsTr("Home")
anchors.right: parent.right
anchors.rightMargin: 5
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
anchors.topMargin: 5
onClicked: {
layout.currentIndex = 0
}
}
Button {
id: button1
x: 1
y: -4
text: qsTr("Connectivity")
anchors.topMargin: 59
anchors.leftMargin: 5
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 5
anchors.right: parent.right
onClicked: {
layout.currentIndex = 1
}
}
Button {
id: button2
x: 5
y: -8
text: qsTr("Settings")
anchors.topMargin: 112
anchors.leftMargin: 5
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 5
anchors.right: parent.right
onClicked: {
layout.currentIndex = 2
}
}
Button {
id: button3
x: 6
y: -16
text: qsTr("Quit")
anchors.topMargin: 172
anchors.leftMargin: 5
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 5
anchors.right: parent.right
onClicked: {
Qt.quit()
}
}
}
Rectangle {
id: right_rect
width: ( Screen.width/4 )*3
height: Screen.height
color:"green"
StackLayout {
id: layout
anchors.fill: parent
currentIndex: 0
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
Rectangle {
color: 'plum'
implicitWidth: 300
implicitHeight: 200
}
Rectangle {
color: 'orange'
implicitWidth: 300
implicitHeight: 200
}
}
}
}
Where you currently have
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
replace with
qmlClassName {
id: someId
}
I'm trying to learn Qt and wrap my head around the UI forms. The doc states that I should be able to implement headers in the implementation file. However, I cannot do this (nor override any attributes assigned in the designer).
Here's my BasicWindowForm.ui.qml:
import QtQuick 2.4
import QtQuick.Controls 2.12
Item {
id: element
width: 400
height: 400
property alias quitButton: quitButton
Rectangle {
id: rectangle
x: 100
width: 200
height: 86
color: "#ffffff"
radius: 10
border.width: 3
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 25
}
Row {
id: row
y: 222
height: 100
layoutDirection: Qt.RightToLeft
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Button {
id: quitButton
text: qsTr("Quit")
}
}
}
/*##^##
Designer {
D{i:1;anchors_y:20}D{i:2;anchors_width:200;anchors_x:21}
}
##^##*/
Here's how it looks in the design mode:
Here's BasicWindow.qml:
import QtQuick 2.4
BasicWindowForm {
quitButton.text: "Lorem"
quitButton.onClicked: Qt.quit()
}
And main.qml:
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Play QtQuick")
BasicWindowForm {
anchors.fill: parent
id: winform
}
}
If I move the handler to the main.qml file, it works. But, as it is here, clicking on the button does nothing, and it still reads "quit".
What am I doing wrong?
I'm trying to add padding/margins to my layout so my controls to appear so close to the border of the window. When i set the anchor margins it doesn't appear to actually affect anything.
This is the qml file displayed for the Settings Tab.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
Page {
id: control
title: qsTr("Settings")
objectName: "SettingsView"
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Switch {
text: qsTr("Theme")
checked: root.Material.theme === Material.Dark
Layout.fillWidth: true
LayoutMirroring.enabled: true
onClicked: {
root.Material.theme = checked ? Material.Dark : Material.Ligth
//Settings.currentTheme = root.Material.theme
}
}
}
}
This is the main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
ApplicationWindow {
id: root
visible: true
width: 300
height: 500
// Theme
Material.theme: Material.Dark
Material.accent: "#4096DD"
Material.primary: "#4096DD"
// Controls
header: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
//text: qsTr("Home")
icon.source: "qrc:/Images/home.svg"
}
TabButton {
//text: qsTr("Settings")
icon.source: "qrc:/Images/settings.svg"
}
}
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1 {
}
SettingsView {
}
}
}
If an Item is affected by a Layout then you must use Layout.margins if you want to set all the margins to the same value, but if you want to set a different margin in each direction you must use Layout.leftMargin, Layout.topMargin, Layout.rightMargin and Layout .bottomMargin, in your case:
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Switch {
Layout.leftMargin: 20
Layout.topMargin: 20
Layout.rightMargin: 20
// ...
Update:
Then set the margin at the anchor:
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.leftMargin: 20
anchors.topMargin: 20
anchors.rightMargin: 20
Switch {
text: qsTr("Theme")
// ...