I have to use the same settings for different buttons, but I don't understand how can I do it without write this settings in each button :( I mean text color, font size, button color, button color when button pressed
RowLayout {
id: rowLayout
width: 100
height: 100
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Button {
id: button
Text {
color:"#666666"
text: qsTr("й")
font.family: "Geometria Medium"
font.pointSize: 18
}
background: Rectangle {
implicitWidth: 60
implicitHeight: 60
color: button.down ? "#B3B3B3" : "#E6E6E6"
radius: 4
}
}
Button {
id: button1
height: 40
// width: 70
text: qsTr("ц")
}
Button {
id: button2
width: 50
text: qsTr("у")
}
You have to create a component, for example CustomButton.qml:
CustomButton.qml
import QtQuick 2.14
import QtQuick.Controls 2.14
Button {
id: control
contentItem: Text {
color:"#666666"
text: control.text
font.family: "Geometria Medium"
font.pointSize: 18
}
background: Rectangle {
implicitWidth: 60
implicitHeight: 60
color: control.down ? "#B3B3B3" : "#E6E6E6"
radius: 4
}
}
RowLayout {
id: rowLayout
width: 100
height: 100
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
CustomButton{
text: qsTr("й")
}
CustomButton{
text: qsTr("ц")
}
CustomButton{
text: qsTr("у")
}
}
Related
Well, I've run into a problem with my StackView in Dialog. You can see it in this example.
Maybe I need to rewrite the animation?
Here is my code:
Dialog {
id: settingDialog
anchors.centerIn: parent
width: 350
height: parent.height / 1.1
closePolicy: Dialog.NoAutoClose
background: Rectangle {
color: "darkgrey"
border.color: "cyan"
radius: 5
}
ColumnLayout {
anchors.fill: parent
spacing: 5
ToolBar {
Layout.fillWidth: true
Layout.minimumHeight: 60
background: Rectangle { color: "transparent" }
RowLayout {
anchors.fill: parent
ToolButton {
id: tbBack
enabled: true
Layout.alignment: Qt.AlignHCenter
Layout.minimumWidth: 30
Layout.leftMargin: 10
background: Rectangle {
color: tbBack.hovered ? "darkcyan" : "transparent"
radius: parent.width
}
onClicked: stackViewSettings.pop()
}
Item { Layout.fillWidth: true }
ToolButton {
id: tbClose
Layout.alignment: Qt.AlignHCenter
Layout.minimumWidth: 30
Layout.rightMargin: 10
icon.source: "ADD YOUR ICO"
background: Rectangle {
color: tbClose.hovered ? "cyan" : "transparent"
radius: parent.width
}
onClicked: {
settingDialog.close()
stackViewSettings.pop()
}
}
}
}
//
StackView {
id: stackViewSettings
Layout.fillWidth: true
Layout.fillHeight: true
initialItem: Page {
background: Rectangle { color: noColor }
ColumnLayout {
anchors.fill: parent
spacing: 0
ListView {
id: listViewSettings
currentIndex: -1
interactive: false
spacing: 10
Layout.fillWidth: true
Layout.fillHeight: true
delegate: ItemDelegate {
height: 40
anchors {
left: parent.left
right: parent.right
}
highlighted: ListView.isCurrentItem
// Style of button
background: Rectangle {
color: parent.hovered ? "#555e69" : "transparent"
radius: 10
}
RowLayout {
anchors.fill: parent
spacing: 15
// Image
Rectangle {
color: noColor
Layout.minimumHeight: 30
Layout.minimumWidth: 30
Layout.leftMargin: 15
Layout.alignment: Qt.AlignRight
Image {
anchors.fill: parent
source: model.imageSource
}
}
// Text
Rectangle {
color: "transparent"
Layout.fillHeight: true
Layout.minimumWidth: 150
Layout.alignment: Qt.AlignLeft
Text {
anchors.verticalCenter: parent.verticalCenter
text: model.title
color: textColor
font.pixelSize: 16
}
}
}
onClicked: stackViewSettings.push(model.source)
}
model: ListModel {
ListElement { title: "Change profile"; imageSource: "ADD YOUR ICO"; source: "ADD YOUR PAGE" }
ListElement { title: "Language"; imageSource: "ADD YOUR ICO"; source: "ADD YOUR PAGE" }
}
}
}
}
}
}
}
Upd 1: I don't think I should use the stackview on dialog at all.
Upd 2: Just added clip: true in the StackView and It helped me.
Your problem is just a clipping issue. By default all QML objects have clip set to false, but you can turn it on to solve your problem:
StackView {
...
clip: true
}
I created a control, and when I click it, the popup will be displayed on the left and right sides. Like:
There may be many other buttons on the main interface. I hope that when I click the button, the popup will not close, but when I click other external areas, the popup will close.
I thought of using closePolicy, but when I set Popup.NoAutoClose, no matter I click the outer area or the button control, the popup will not be closed. When I set Popup.CloseOnPressOutside, the popup will be closed.
So how to customize the closing behavior of the popup? Or is there any other custom control way to achieve such a requirement(may not be popup)?
Edit
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
MenuSpinner{
id: menuId
x: 100
y: 50
}
Column{
x: 500
spacing: 10
Repeater{
model: 3
Button{
width: 100
height: 50
text: index
onPressed: {
console.log("pressed" + index)
}
}
}
}
}
MenuSpinner.qml
import QtQuick 2.0
import QtQuick.Controls 2.5
Rectangle{
width: 300
height: 50
property bool bTextClicked: false
onBTextClickedChanged: {
if(bTextClicked) popup.open()
else popup.close()
}
Rectangle{
width: 100
height: parent.height
x: rect1.width
border.color: "blue"
Text {
id: text
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: qsTr("value")
font.pixelSize: 16
}
MouseArea{
anchors.fill: parent
onClicked: {
bTextClicked = !bTextClicked
}
}
}
Popup {
id: popup
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
width: parent.width
height: parent.height
background: Rectangle {
anchors.fill: parent
color: "transparent"
//border.color: "black"
}
Rectangle{
id: rect1
width: 100
height: 50
Text {
text: qsTr("pop1")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 16
}
color: "transparent"
border.color: "blue"
}
Rectangle{
id: rect2
x: parent.width - rect1.width
width: 100
height: 50
Text {
text: qsTr("pop2")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 16
}
color: "transparent"
border.color: "blue"
}
onClosed: {
bTextClicked = false
console.log("close")
}
}
}
One way to do it is to catch mouse clicks on the window itself. Add a function or signal to MenuSpinner that can be called to close the popup. Any clicks to the other buttons should still work.
main.qml
Window {
MouseArea {
anchors.fill: parent
onClicked: {
menuId.closePopup();
}
}
MenuSpinner{
id: menuId
}
}
MenuSpinner.qml
Rectangle{
function closePopup() {
popup.close();
}
Popup {
id: popup
closePolicy: Popup.NoAutoClose
}
}
I have two QML pages main.qml and Kos.qml,
what i want is when a button in main.qml clicked it load Kos.qml in the screen.
i did try using loader, but it is not working
import QtQuick 2.5
import QtQuick.Controls 2.5
ApplicationWindow {
id: applicationWindow
width: 640
height: 480
color: "#fc4343"
title: qsTr("Tabs")
visible: true
// HALAMAN UTAMA
Page {
anchors.centerIn: parent
anchors.fill: parent
id: page
enabled: true
Loader{
id: kos
active: true
anchors.fill: parent
}
Button {
id: button
x: 198
width: 87
height: 30
text: qsTr("Search")
font.bold: true
anchors.top: borderImage.bottom
anchors.topMargin: 198
anchors.right: toolSeparator.left
anchors.rightMargin: 28
MouseArea{
anchors.fill: parent
onClicked:{
kos.source = "Kos.qml";
}
}
background: Rectangle {
id: background
color: "#ef3644"
}
contentItem: Text {
id: textItem
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "white"
text: "Search"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
}
Kos.qml i use PageBackground as a background
import QtQuick 2.4
PageBackground {
id: kos
width: 640
height: 480
Text {
id: element
x: 6
y: 20
width: 24
height: 32
color: "#ffffff"
text: qsTr("<")
font.strikeout: false
styleColor: "#ffffff"
font.underline: false
font.italic: false
font.bold: true
font.pixelSize: 25
MouseArea {
id: mouseArea
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.fill: parent
}
}
}
did i messed up somewhere?
I tried to run your code. Since I am not aware of what your PageBackground is, I changed that to Rectangle. That works for me. Try to start from the minimal code then add your styles and functions on top of it. Try with below minimal code. Keep both main.qml & Kos.qml in the same directory and ensure both files added to qml resources.
main.qml
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
id: applicationWindow
width: 640
height: 480
visible: true
Text {
anchors.centerIn: parent
text: "App window"
}
Loader {
id: loaderId
anchors.fill: parent
source: ""
}
Button {
text: "click me!!"
width: parent.width
anchors.bottom: parent.bottom
onClicked: {
if(loaderId.source == "")
loaderId.source = "Kos.qml"
else
loaderId.source = ""
}
}
}
Kos.qml
import QtQuick 2.9
Rectangle {
id: kos
width: 640
height: 480
color: "grey"
Text {
anchors.centerIn: parent
text: "<b>Loaded Item</b>"
color: "white"
}
}
I have next listview component:
CustomListRadio.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import "."
Rectangle {
id: radio_content
x: 0
y: 40
width: 320
height: 158
color: "black"
property int counter: 0
property int savedIndex: 0
property int checkedIndex: 0
property variant internalModel
ButtonGroup {
id: buttonGroup
}
ListView {
id: list
x: 0
y: 0
width: 320
height: 158
model: parent.internalModel
anchors.fill: radio_content
delegate: RadioDelegate {
text: modelData
checked: index == radio_content.savedIndex
ButtonGroup.group: buttonGroup
font.pixelSize: 23
font.family: "Futura Condensed"
font.styleName: "Medium"
MouseArea {
anchors.fill: parent
onClicked: {
parent.checked = true
radio_content.checkedIndex = model.index
}
}
}
}
}
RadioDelegate.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
RadioDelegate {
id: control
text: qsTr("RadioDelegate")
checked: true
contentItem: Text {
leftPadding: control.indicator.width + control.spacing
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "white"
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
indicator: Rectangle {
implicitWidth: 30
implicitHeight: 30
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 15
color: control.checked ? "#0088FF" : "white"
border.color: "#0088FF"
Rectangle {
width: 10
height: 10
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
radius: 5
color: "white"
visible: control.checked
}
}
background: Rectangle {
implicitWidth: 320
implicitHeight: 40
color: "black"
border {
color: "#383838"
width: 1
}
}
}
How add component
CustomListRadio {
id: radio_list
internalModel: msg.languageVariantList
savedIndex: msg.language
}
It creates a list of radiobuttons. It works well. But, I can't select default checked radio button. Selecting a switch with the mouse, works. But from the code, at best, my solution selects the switch only if the length of the list is equal to the number of visible elements.
Problem in RadioDelegate.qml, need to remove next string:
checked: true
I have a few questions about GridLayout in QtQuickLayouts 1.3:
How should I make it , so the GridLayout places into CORRECT row/column every element of my grid even if the size of the element is not clearly specified by with or height parameter?
Let me remove the width and height and I will show you the broken layout. I will just comment it out:
Item {
id: test_item
//Layout.fillWidth: true
//height: 20
}
Full source code of the .qml file is here, and can be tested with bin/qmlscene:
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
ApplicationWindow {
width: 400
height: 500;
ColumnLayout {
anchors.fill: parent
GridLayout {
anchors.fill: parent
columns: 2
Label {
text:"Email:"
}
Rectangle {
width: 80; height: 20
border.color: "magenta"
}
Label {
text: "Full Name:"
Layout.fillWidth: true
}
Item {
id: test_item // the commented out portion, to show the flaw
//Layout.fillWidth: true
//height: 20
}
Label {
text: "Gender:"
}
RowLayout {
Layout.minimumHeight: 20
Layout.fillWidth: true
RadioButton {
text: "Male"
width: parent.width/2
height: 20
}
RadioButton {
text: "Female"
width: parent.width/2
height: 20
}
}
Label {
text: "Mobile phone:"
}
Rectangle {
width: 80; height: 20
border.color: "magenta"
}
}
Row {
Button {
text: "Cancel"
}
Button {
text: " Ok "
}
}
}
}
The 'broken` output looks like this:
While the correct output , with Item's size specified looks like this:
2) The second question. How do I load a component into a GridLayout cell via Loader using Component type? For example, this is my full source with the Component item and the component is missing when rendering:
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
ApplicationWindow {
width: 400
height: 500;
ColumnLayout {
anchors.fill: parent
GridLayout {
anchors.fill: parent
columns: 2
Label {
text:"Email:"
}
Rectangle {
width: 80; height: 20
border.color: "magenta"
}
Label {
text: "Full Name:"
Layout.fillWidth: true
}
Loader {
id: test_item
sourceComponent: field_template
}
Label {
text: "Gender:"
}
RowLayout {
Layout.minimumHeight: 20
Layout.fillWidth: true
RadioButton {
text: "Male"
width: parent.width/2
height: 20
}
RadioButton {
text: "Female"
width: parent.width/2
height: 20
}
}
Label {
text: "Mobile phone:"
}
Rectangle {
width: 80; height: 20
border.color: "magenta"
}
}
Row {
Button {
text: "Cancel"
}
Button {
text: " Ok "
}
}
}
Component {
id: field_template
Item {
Layout.fillWidth: true
height: 33
Rectangle {
border.color: "blue"
color: "transparent"
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 10
TextEdit {
anchors.fill: parent
anchors.leftMargin: 5
anchors.topMargin: 3
anchors.rightMargin: 2
clip: true
text: "type here"
}
}
}
}
}
The picture of the output rendered by qmlscene is this:
I have correctly speecified witdht and height, why isn't the component being loaded with Loader ?
For the second question folibis is right in the comment. You just have to check the size. Here, is a working code.
...
Item {
Layout.fillWidth: true
//width: 80
height:20
Loader {
id: test_item
anchors.fill: parent
sourceComponent: field_template
}
}
...
Component {
id: field_template
Item {
Rectangle {
border.color: "blue"
color: "transparent"
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 10
TextEdit {
anchors.fill: parent
anchors.leftMargin: 5
anchors.topMargin: 3
anchors.rightMargin: 2
clip: true
text: "type here"
}
}
}