I have a text edit in QML, but the problem is that when I run the app it shows only parts of some letters, here is what it looks like:
This is the code for the the text edit plus the parents:
StackLayout {
id: stack_layout
anchors.left: menu.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 0
anchors.topMargin: 0
anchors.leftMargin: 0
anchors.bottomMargin: 0
currentIndex: 1
HomeScreen {
id: home_screen
}
Rectangle{
color: "#303030"
anchors.left: menu.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 0
anchors.leftMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
TextField{
height: 20
font.family: "Times New Roman"
font.pixelSize: 30
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 100
anchors.leftMargin: 100
anchors.topMargin: 75
Material.accent: Material.Cyan
}
}
}
So what is the problem?
Ok so I figured out the solution to the problem, the problem was that the height of the text field was too small so it got cut off so I just added: height: 52, and the problem was fixed.
tip: make sure the height of the TextField is 20 or more than the font size. Since the font size was 30, I made the height 50-60.
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 need to scroll by mouse click ,the code bellow works very well when scroll bars clicked or on wheel,BUT I need by mouse click and hold in anywhere in text.
ScrollView {
id: scrollView
x: 15
y: 38
width: 647
height: 168
visible: true
spacing: 2
focusPolicy: Qt.ClickFocus
clip: true
Text {
id: text1
x: -17
y: -27
opacity: 1
visible: true
color: "#ffffff"
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
font.pixelSize: 16
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WrapAnywhere
font.preferShaping: false
font.kerning: false
font.styleName: "Bold"
style: Text.Normal
font.weight: Font.Medium
font.bold: true
clip: true
anchors.topMargin: 0
anchors.bottomMargin: -8
anchors.leftMargin: 0
anchors.rightMargin: 0
font.family: "Courier New"
}
}
You can use a Flickable instead of ScrollView.
A really basic sample would be like this.
Flickable {
width: 200; height: 100
contentWidth: text.width; contentHeight: text.height
// These create default scroll bars for both orientations.
// You could modify the scroll bars if you want.
ScrollBar.vertical: ScrollBar{}
ScrollBar.horizontal: ScrollBar{}
Text{ id: text; width: 200; height: 300; text: "Some long text here" }
}
I created a switch in my settingsPage.qml file that can be turned on and off. When this is done, I want to change the color of a rectangle from homePage.qml file.
How do I create a connection between two qml files?
homePage.qml
import QtQuick 2.0
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Layouts 1.0
Item {
id: item1
Rectangle {
id: rectangle
color: "#2c313c"
anchors.fill: parent
property color windowBackground: #495163
...
I want to change the property windowBackground with the switch from settings.qml
Rectangle {
id: lightmode
width: 220
height: 60
visible: true
color: "#2c303b"
radius: 10
border.width: 0
Layout.fillHeight: false
anchors.topMargin: 20
anchors.leftMargin: 20
Switch {
id: customTitleBar1
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
display: AbstractButton.IconOnly
onToggled: {
//backend.showHideRectangle(customTitleBar.checked)
}
font.wordSpacing: 0
padding: 0
font.pointSize: 15
rightPadding: 0
Label {
id: labelTextName2
x: 120
width: 200
color: "#e8e9ec"
text: qsTr("Light Mode")
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.rightMargin: -170
font.pointSize: 14
}
spacing: 20
}
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
}
(I am using Py Creator, Pyside2, and Qt Quick Control widgets.)
EDIT: Add complete code:
Code
settingsPage.qml:
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
Item {
id: item1
Rectangle {
id: rectangle
color: "#2c313c"
anchors.fill: parent
Rectangle {
id: rectangleTop
height: 69
color: "#20232b"
radius: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.topMargin: 40
Label {
id: labelTextName
x: 10
color: "#f1f2f3"
text: qsTr("Settings")
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.topMargin: 22
anchors.bottomMargin: 22
anchors.leftMargin: 10
anchors.rightMargin: 10
font.pointSize: 14
}
}
Rectangle {
id: rectangleTop1
color: "#20232b"
radius: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.topMargin: 131
anchors.leftMargin: 50
anchors.rightMargin: 50
GridLayout {
id: gridLayout
anchors.fill: parent
rows: 2
columns: 2
anchors.rightMargin: 10
anchors.leftMargin: 10
anchors.bottomMargin: 10
anchors.topMargin: 10
Rectangle {
id: rectangle1
width: 220
height: 60
visible: true
color: "#2c303b"
radius: 10
border.width: 0
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillWidth: true
anchors.leftMargin: 20
anchors.topMargin: 20
Switch {
id: lightmode
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
display: AbstractButton.IconOnly
spacing: 20
font.wordSpacing: 0
rightPadding: 0
padding: 0
font.pointSize: 15
onToggled: {
}
Label {
id: labelTextName1
x: 120
width: 200
color: "#e8e9ec"
text: qsTr("Light Mode")
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.rightMargin: -170
font.pointSize: 14
}
}
}
Rectangle {
id: other
width: 220
height: 60
visible: false
color: "#2c303b"
radius: 10
border.width: 0
Layout.fillHeight: false
anchors.topMargin: 20
anchors.leftMargin: 20
Switch {
id: customTitleBar1
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
display: AbstractButton.IconOnly
onToggled: {
//backend.showHideRectangle(customTitleBar.checked)
}
font.wordSpacing: 0
padding: 0
font.pointSize: 15
rightPadding: 0
Label {
id: labelTextName2
x: 120
width: 200
color: "#e8e9ec"
text: qsTr("other")
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.rightMargin: -170
font.pointSize: 14
}
spacing: 20
}
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
}
}
}
}
}
The homePage.qml:
import QtQuick 2.0
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Layouts 1.0
Item {
id: item1
Rectangle {
id: rectangle
color: "#2c313c"
anchors.fill: parent
//property color backgroundColor: globalObject.switchValue ? "#ffffff" : "#000000"
Rectangle {
id: rectangleTop
height: 69
color: "#495163"
//color: backgroundColor
radius: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.topMargin: 40
Label {
id: labelTextName
x: 10
color: "#e1e2e6"
text: qsTr("Welcome")
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.topMargin: 22
anchors.bottomMargin: 22
anchors.leftMargin: 10
anchors.rightMargin: 10
font.pointSize: 14
}
}
Rectangle {
id: rectangleVisible
width: 540
color: "#1d2128"
radius: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.top: rectangleTop.bottom
anchors.bottom: parent.bottom
anchors.bottomMargin: 40
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.topMargin: 10
GridLayout {
anchors.fill: parent
columnSpacing: 5
anchors.bottomMargin: 61
anchors.topMargin: 119
anchors.rightMargin: 10
anchors.leftMargin: 10
rows: 2
columns: 3
CustomButton{
id: btnChangeName
height: 70
text: "Bitcoin"
font.pointSize: 12
colorPressed: "#232435"
colorMouseOver: "#2b2c42"
colorDefault: "#252639"
Layout.leftMargin: 10
Layout.maximumWidth: 200
Layout.fillWidth: true
Layout.preferredHeight: 70
Layout.preferredWidth: 250
onClicked: {
backend.setBtc()
backend.setAsOfLabel()
}
}
CustomButton {
id: btnChangeName1
height: 70
text: "Ethereum"
font.pointSize: 12
colorPressed: "#232435"
colorMouseOver: "#2b2c42"
colorDefault: "#252639"
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.preferredWidth: 250
Layout.preferredHeight: 70
Layout.maximumWidth: 200
Layout.fillWidth: true
onClicked: {
backend.setEth()
backend.setAsOfLabel()
}
}
CustomButton {
id: btnChangeName2
height: 70
text: "Binance Coin"
font.pointSize: 12
colorPressed: "#232435"
colorMouseOver: "#2b2c42"
colorDefault: "#252639"
Layout.rightMargin: 10
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Layout.preferredWidth: 250
Layout.preferredHeight: 70
Layout.maximumWidth: 200
Layout.fillWidth: true
onClicked: {
backend.setBnb()
backend.setAsOfLabel()
}
}
CustomButton {
id: btnChangeName3
height: 70
text: "XRP"
font.pointSize: 12
colorPressed: "#232435"
colorMouseOver: "#2b2c42"
colorDefault: "#252639"
Layout.leftMargin: 10
Layout.preferredWidth: 250
Layout.preferredHeight: 70
Layout.maximumWidth: 200
Layout.fillWidth: true
onClicked: {
backend.setXrp()
backend.setAsOfLabel()
}
}
CustomButton {
id: btnChangeName4
height: 70
text: "sBDO"
font.pointSize: 12
colorPressed: "#232435"
colorMouseOver: "#2b2c42"
colorDefault: "#252639"
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.preferredWidth: 250
Layout.preferredHeight: 70
Layout.maximumWidth: 200
Layout.fillWidth: true
onClicked: {
backend.setsBdo()
backend.setAsOfLabel()
}
}
CustomButton {
id: btnChangeName5
height: 70
text: "BDO"
font.pointSize: 12
colorPressed: "#232435"
colorMouseOver: "#2b2c42"
colorDefault: "#252639"
Layout.rightMargin: 10
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Layout.preferredWidth: 250
Layout.preferredHeight: 70
Layout.maximumWidth: 200
Layout.fillWidth: true
onClicked: {
backend.setBdo()
backend.setAsOfLabel()
}
}
}
Label {
id: labelDate
y: 295
height: 25
color: "#55aaff"
text: qsTr(" ")
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.bottomMargin: 5
anchors.rightMargin: 10
anchors.leftMargin: 10
font.pointSize: 12
}
Label {
id: priceSet
height: 70
color: "#cbcbde"
text: qsTr("Please select the following:")
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
font.pointSize: 25
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.topMargin: 5
Component.onCompleted:{
}
}
Label {
id: asOfLabel
height: 70
color: "#cbcbde"
text: qsTr(" ")
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
anchors.rightMargin: 30
font.pointSize: 16
anchors.topMargin: 48
anchors.leftMargin: 30
}
}
}
Connections{
target: backend
function onPrintTime(time){
labelDate.text = time
}
function onBdoInfo(argument){
priceSet.text = argument
}
function onDiffsbdoInfo(argument){
priceSet.text = argument
}
function onAsOfLabel(argument){
asOfLabel.text = argument
}
function onAssetBTC(argument){
priceSet.text = argument
}
function onAssetBNB(argument){
priceSet.text = argument
}
function onAssetXRP(argument){
priceSet.text = argument
}
function onAssetsBDO(argument){
priceSet.text = argument
}
function onAssetBDO(argument){
priceSet.text = argument
}
function onAssetETH(argument){
priceSet.text = argument
}
}
}
Since you haven't provided a complete code example, it's impossible to give an exact answer here. If your homePage instance is a parent of the settings.qml, then you could just reference it by id. That means if your code is something like this:
// HomePage.qml
Item {
id: homepage
Settings {}
}
then your Settings object can see the properties of HomePage, and you can do this:
// Settings.qml
Rectangle {
Switch {
onToggled: {
homePage.doSomething()
}
}
}
Or you can do it the reverse way and expose a property in Settings that HomePage can access:
// Settings.qml
Rectangle {
property alias switchToggled: switch.toggled
Switch {
id: switch
}
}
// HomePage.qml
Item {
id: homepage
property color backgroundColor: settings.switchToggled ? 'red' : 'blue'
Settings { id: settings}
}
Or for a third option, you can have both HomePage and Settings access data from some external source, like a C++ or Python object, or some QML singleton. That would look something like this:
// Settings.qml
Rectangle {
Switch {
onToggled: {
globalObject.switchValue = toggled
}
}
}
// HomePage.qml
Item {
id: homepage
property color backgroundColor: globalObject.switchValue ? 'red' : 'blue'
}
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 have the following TextField as the inputfield which is linked to a virtual keyboard.
TextField {
id: inputField
color: buttonActive ? Style.buttonColorTextOn : Style.buttonColorTextOff
text: "100"
topPadding: 8
anchors.left: parent.left
anchors.leftMargin: 8
anchors.right: icon.left
anchors.rightMargin: 8
anchors.top: parent.top
anchors.topMargin: 6
anchors.bottom: parent.bottom
anchors.bottomMargin: 6
inputMethodHints: Qt.ImhDigitsOnly
validator: IntValidator { bottom:lowestInput; top: highestInput}
selectionColor: Style.textSelectionBg
selectedTextColor: Style.fontcolor1
font.family: stdFont.name
horizontalAlignment: TextField.AlignRight
verticalAlignment: TextField.AlignVCenter
font.pixelSize: Style.highlightedFontSize
leftPadding: 3
rightPadding: 3
TextMetrics{
id: textMetrics
text: inputField.text
font.family: stdFont.name
font.pixelSize: Style.highlightedFontSize
}
background: Rectangle
{
color: buttonActive ? Style.buttonColorOn : Style.buttonColorOff
border.color: buttonActive ? Style.buttonColorTextOn : Style.buttonColorTextOff
border.width: 1
Rectangle
{
id: inputFieldColor
color: buttonActive ? Style.buttonColorOn : Style.buttonColorOff
anchors.top: parent.top
anchors.topMargin: inputField.topPadding - 1
anchors.right: parent.right
anchors.rightMargin: inputField.rightPadding - 1
width: textMetrics.width + inputField.rightPadding
height: textMetrics.height
}
}
}
This keyboard looks as the following.
Here the cancel key is constructed as the following in the custom layout for the keyboard.
Key {
key: Qt.Key_Cancel
text: "cancel"
}
My question is, how can I catch when the cancel button is pressed on the virtual keyboard? I'd like catch in a slot something onKeyCancelPressed and possibly undo the changes made on the textfield before pressing the cancel button.
Thanks.
I think the only way is to respond to it in the Key code itself (textBeforeEditing is your own variable):
onClicked: InputContext.priv.inputItem.text = InputContext.priv.inputItem.textBeforeEditing
The downside is that this uses private API.