How can I toggle the visibility of the Search bar using keyboard shortcuts?
By default i want the search bar to be hidden. However then user presses Ctrl+F i want it to be visible. When they then click the 'X' button it hides it again.
MyContent.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ColumnLayout {
anchors.fill: parent
RowLayout {
width: parent.width
visible: true
TextField {
text: ""
placeholderText: qsTr("Search...")
selectByMouse: true
Layout.fillWidth: true
}
Button {
text: "x"
}
}
Label {
wrapMode: Text.Wrap
font.pixelSize: Qt.application.font.pixelSize * 1.1
Layout.fillWidth: true
Layout.fillHeight: true
text: qsTr("<h1>Stuff goes here</h1><p>this is just some sample text</p>")
}
}
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MyContent {
anchors.centerIn: parent
}
}
You have to use the Shortcut component:
// ...
RowLayout {
id: row
width: parent.width
visible: false
Shortcut {
sequence: "Ctrl+F"
onActivated: {
row.visible = true
tf.focus = true
}
}
TextField {
id: tf
text: ""
placeholderText: qsTr("Search...")
selectByMouse: true
Layout.fillWidth: true
}
Button {
text: "x"
onClicked: row.visible = false
}
}
// ...
Related
I have the following problem. I created a Periodic table in QML that consists of GroupBoxes that contain a ColumnLayout in order to arrange the specific properties of each element. But as you can see in the pictures...
Window after starting
Window after downsizing
... the properties will not scale properly according to the size of the GroupBox. So when I scale down the size of the window, some text properties will just move out of its GroupBox and lay wherever they are not supposed to be. How can I fix this?
//PeriodicTable.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts 1.15
Item {
id: root
Button {
id: button
checkable: true
text: qsTr("Show")
onClicked: window.show()
}
Window {
id: window
Material.accent: parent.Material.accent
Material.background: parent.Material.background
Material.foreground: parent.Material.foreground
Material.primary: parent.Material.primary
Material.theme: parent.Material.theme
color: Material.background
height: parent.height
title: qsTr("Periodic table")
width: parent.width
GridView {
id: gridview
anchors.fill: parent
cellHeight: cellWidth * 1.5
cellWidth: parent.width / 18
delegate: PeriodicTableDelegate {
}
model: PeriodicTableModel {
}
}
}
}
//PeriodicTableModel.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
ListModel {
id: elements
ListElement {
atomicWeight: "1.00794"
electronConfiguration: qsTr("1s")
elementName: qsTr("Hydrogen")
elementSign: qsTr("H")
ionizationEnergy: qsTr("13 5984")
ordinalNumber: qsTr("1")
unknownNumber: qsTr("S1/2")
}
} // I shortened this to just one element because yet it is the only one I have
// PeriodicTableDelegate.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
GroupBox {
property int cellHeight: GridView.view.cellHeight
property int cellWidth: GridView.view.cellWidth
height: cellHeight
width: cellWidth
ColumnLayout {
RowLayout {
Label {
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
font.bold: true
text: ordinalNumber
}
Label {
Layout.alignment: Qt.AlignRight
text: unknownNumber
}
}
Label {
Layout.alignment: Qt.AlignHCenter
font.bold: true
text: elementSign
}
Label {
Layout.alignment: Qt.AlignHCenter
text: elementName
}
Label {
Layout.alignment: Qt.AlignHCenter
text: atomicWeight
}
Label {
Layout.alignment: Qt.AlignHCenter
text: electronConfiguration
}
Label {
Layout.alignment: Qt.AlignHCenter
text: ionizationEnergy
}
}
}
a slightly contrived example:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.0
Window {
height: 800
width: 600
visible: true
title: qsTr("cell test")
GridView {
id: grid
anchors.fill: parent
cellHeight: grid.height / 3
cellWidth: grid.width / 4
model: 12
delegate: Rectangle {
id: rect
width: grid.cellWidth
height: grid.cellHeight
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
ColumnLayout {
id: layout
anchors.fill: parent
Repeater {
model: 5
Text {
id: txt
property int fsize: (layout.height + layout.width) / 30
Layout.fillWidth: true
text: "some text"
horizontalAlignment:Text.AlignHCenter
font.pointSize: fsize > 0 ? fsize : 16
}
}
}
}
}
}
The ColumnLayout in your GroupBox is missing an anchors.fill: parent.
I'm having a specific problem where i click on the text on the middle of a SpinBox and it gets focus but after that i go to another SpinBoxand i click on the - or +, when i do that i want to get the focus out of the last SpinBox to the new one, for that value to get assumed.
As an example, lets suppose i click on the top SpinBox:
Now i click on the +button on the bottom SpinBox, doing that i want to get the focus on this bottom SpinBox
I provide the code of main.qmlbelow:
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
id: window
title: "Stack"
visible: true
height: 200
width: 400
ListModel {
id: libraryModel
ListElement {
text: "A Masterpiece"
}
ListElement {
text: "Brilliance"
}
ListElement {
text: "Outstanding"
}
}
Item {
id: page
anchors.fill: parent
width:parent.width
height: parent.height
ScrollView {
id:scrollView
anchors.fill:parent
style: ScrollViewStyle{
handle: Rectangle {
implicitWidth: 30
color: "black"
}
scrollToClickedPosition: true
transientScrollBars:true
}
function scrollToY(y) {
scrollView.contentItem.contentY = y;
}
Column{
width:parent.width
spacing:10
TextField {
id:textField
implicitHeight: 30
font.bold: true
onFocusChanged: if(focus) { scrollView.scrollToY(y); }
}
ComboBox {
id:comboBox
anchors.topMargin: 10
textRole: "text"
model: libraryModel
onFocusChanged: if(focus) { scrollView.scrollToY(y); }
}
SpinBox {
width: 100
height: 30
editable: true
}
SpinBox {
width: 100
height: 30
editable: true
}
}
}
}
}
How can this be done?
You can use focusPolicy:
import QtQuick 2.0
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
height: 200
width: 400
visible: true
Column{
spacing: 10
SpinBox {
width: 100
height: 30
editable: true
}
SpinBox {
width: 100
height: 30
editable: true
focusPolicy: Qt.ClickFocus // or Qt.StrongFocus
}
}
}
Qt.ClickFocus will give focus to the control when it's clicked, Qt.TabFocus for tab, Qt.WheelFocus for wheel, Qt.StrongFocus for all three.
When I execute my QML code, the output is:
When I minimize the window, It becomes like
and finally, when I again maximize the window it changes to
the GUI which I want to make looks like
![][5]
I am not getting what is the issue for all of the changes in GUI at different events. And this is the Qml code which I wrote
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 1080
height: 720
title: qsTr("Login")
GridLayout{
Rectangle{
id:one
Rectangle
{ id:two
color:"black";
width: 700
height:40
}
Image {
id: image
x: 470
y: 0
width: 54
height: 42
source: "qrc:/user.png"
}
Rectangle
{
id:three;
color:"#f47a42";
width: 200
height:40
anchors.left:two.right;
anchors.margins:940
Text {
id: user
text: qsTr("4200")
color:"white"
anchors.top: value.bottom
}
Text
{
id: value;
text: qsTr("User");
color:"yellow"
}}
}
}
Rectangle{
ColumnLayout{
width: 50
height: childrenRect.height+fillHeight;
}
color:"green"
}
}
So why this is happening and how can I solve this problem?
Output of the code below
Here is example of scalable window:
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11
Window {
visible: true
width: 800
height: 600
title: qsTr("Layout example")
ColumnLayout{
spacing: 0
anchors.fill: parent
Item {
id: titlebar
Layout.preferredHeight: 40
Layout.fillWidth: true
RowLayout {
anchors.fill: parent
spacing: 0
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "orange"
Text {
anchors.centerIn: parent
text: "Title"
}
}
Rectangle {
Layout.preferredWidth: 100
Layout.fillHeight: true
color: "lightgreen"
Text {
anchors.centerIn: parent
text: "Actions"
}
}
}
}
Rectangle {
id: content
Layout.fillHeight: true
Layout.fillWidth: true
color: "lightyellow"
Text {
anchors.centerIn: parent
text: "Content"
}
}
}
}
I'm trying to get a tool bar working but the first 3 tab buttons keep writing on top of each other.
Each tab gets display on top of one another on the left hand side of the screen.
I would like each tab button to fill and take up its on unique space.
How do I get the toolbar to display 3 individual tabs that span horizontally across the screen at equal size?
import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.1
import QtGraphicalEffects 1.0
import "../controls" as Controls
Page{
anchors.fill: parent
header: ToolBar{
Material.background: "green"
TabButton {
id: tab1
width: parent.width/3
text: qsTr("Asset")
Image{
source: "../assets/clipboard.png"
}
onClicked: qmlfile1 = "./asset.qml"
}
TabButton {
id:tab2
width: parent.width/3
text: qsTr("Issue")
Image{
source: "../assets/wrench.png"
}
onClicked: qmlfile1 = "./issue.qml"
}
TabButton {
width: parent.width/3
id: tab3
text: qsTr("Log")
Image{
source: "../assets/cogs.png"
}
onClicked: qmlfile1 = "./log.qml"
}
}
Rectangle{
id: loader1
Loader{
width: pageApp.width
source: qmlfile1
}
Component.onCompleted: {
console.log(loader1.height)
console.log(pageApp.height)
console.log(tabBarApp.height)
}
}
}
The solution was to add row layout and each tab button gets
Layout.fillHeight: true
Layout.fillWidth: true
which fills the tabs out to occupy all space it needs
import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.1
import QtGraphicalEffects 1.0
import "../controls" as Controls
Page{
anchors.fill: parent
header: ToolBar{
Material.background: "green"
RowLayout {
anchors.fill: parent
TabButton {
id: tab1
width: parent.width/3
text: qsTr("Asset")
Layout.fillHeight: true
Layout.fillWidth: true
Image{
source: "../assets/clipboard.png"
Layout.alignment: Qt.AlignLeft
}
onClicked: qmlfile1 = "./asset.qml"
}
TabButton {
id:tab2
width: parent.width/3
Layout.fillHeight: true
Layout.fillWidth: true
text: qsTr("Issue")
Image{
source: "../assets/wrench.png"
Layout.alignment: Qt.AlignLeft
}
onClicked: qmlfile1 = "./issue.qml"
}
TabButton {
width: parent.width/3
Layout.fillHeight: true
Layout.fillWidth: true
id: tab3
text: qsTr("Log")
Image{
source: "../assets/cogs.png"
Layout.alignment: Qt.AlignLeft
}
onClicked: qmlfile1 = "./log.qml"
}
}
}
// Add a Loader to load different samples.
// The sample Qml files can be found in the Samples folder
Rectangle{
id: loader1
Loader{
width: pageApp.width
source: qmlfile1
}
Component.onCompleted: {
console.log(loader1.height)
console.log(pageApp.height)
console.log(tabBarApp.height)
}
}
}
I am using a checkbox control in a TableView, which I define with QML as follows:
import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
TableViewColumn {
title: ""
role: "check"
delegate: CheckBox {
anchors.fill: parent
checked: false
anchors { horizontalCenter: parent.horizontalCenter }
}
}
I can use it in a TableView as follows:
import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
ControlView {
visible: true
width: parent.width; height: parent.height
anchors.centerIn: parent
TableView {
id: reviewTable
width: parent.width; height: parent.height
anchors.centerIn: parent
TableViewCheckBoxColumn {
title: "Upload"
width: 100
resizable: false
}
TableViewColumn {
resizable: true
role: "Dummy"
title: "Dummy"
width: 250
}
style: TableViewStyle {
headerDelegate: Rectangle {
height: textItem.implicitHeight
width: textItem.implicitWidth
Text {
id: textItem
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
text: styleData.value
renderType: Text.NativeRendering
font.bold: true
}
}
}
model: ListModel {
ListElement {
Dummy: "value 1"
}
ListElement {
Dummy: "value 3"
}
}
}
}
Now despite having set the anchors (or any alignment property that were available), the checkbox remains aligned to the left. How can I center it horizontally wrt to the column?
Wrap the CheckBox in the delegate as below:
Item {
anchors.fill: parent
CheckBox {
anchors.centerIn: parent
checked: false
}
}
And btw, don't mix QtQuick versions in the same application.