the code is
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Text {
id: name
text: qsTr("cesssssssss")
font.pointSize: 10.5
font.family: "微软雅黑"
topPadding: 10
bottomPadding: 10
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
the result is
Why is the letter c truncated?
If i change font.pointSize to another value, it will display normal.
Related
I am using QT Designer to create a dynamic view for a certain component in my application. However, the 'apple' and 'Food:' text items within the RowLayout aren't aligned properly. I am trying to make it so that the baseline of those texts are aligned. I'm not sure how I can do that.
Note: I could set a custom margin just for the apple, but I would like to avoid that as I want my layout to be as dynamic as possible for different screen sizes/resolutions
import QtQuick 2.0
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12
Item {
id: item1
width: 500
height: 300
x: 177
y: 258
Rectangle {
id: container
anchors.centerIn: parent
anchors.fill: parent
color: "black"
anchors.left: parent.left
anchors.right: parent.right
ColumnLayout{
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: 16
anchors.topMargin: 16
spacing: 0
Text {
id: category
x: 194
y: 227
width: 92
color: "#FFFFFF"
text: qsTr("Category")
font.pixelSize: 18
font.family: "Roboto Medium"
}
RowLayout{
spacing: 2
Text {
id: categoryTitle
width: 365
height: 10
color: "#FFFFFF"
text: qsTr("Food: ")
font.pixelSize: 60
verticalAlignment: Text.AlignBottom
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
font.family: "Roboto"
}
Text {
id: categoryItem
height: 62
width: 365
color: "#FFFFFF"
text: qsTr("apples")
font.pixelSize: 30
verticalAlignment: Text.AlignBottom
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
font.family: "Roboto"
}
}
}
}
}
What it looks like right now:
Instead of:
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
use
Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
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"
}
}
The short version
I'd like to horizontally and/or vertically center groups of QML widgets without being forced to align them in a structured layout.
The long version
I made the following design:
My QML code so far is as follows. (I know the hardcoded X/Y coordinates are sloppy, it's just a mockup.)
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Shapes 1.11
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0
Window {
id: window
visible: true
width: 640
height: 480
color: "#f0eded"
title: qsTr("Hello World")
Image {
id: image
x: 215
y: 96
sourceSize.height: 210
sourceSize.width: 210
source: "lock.svg"
}
Text {
id: element
y: 364
anchors.horizontalCenter: parent.horizontalCenter
color: "#646464"
text: qsTr("Unlock your rclone configuration to continue.")
anchors.horizontalCenterOffset: 0
styleColor: "#00000000"
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 12
}
TextField {
id: txtPassword
x: 193
y: 312
focus: true
font.pointSize: 22
horizontalAlignment: Text.AlignHCenter
echoMode: TextInput.Password
}
Button {
id: btnContinue
x: 399
y: 312
width: txtPassword.height
height: txtPassword.height
text: qsTr("»")
background: Rectangle {
border.color: btnContinueMouse.containsMouse ? "#cdcdcd" : "#ccc"
color: btnContinueMouse.containsMouse ? "#eee" : "#ddd"
}
MouseArea {
id: btnContinueMouse
anchors.fill: parent
hoverEnabled: true
}
}
}
What I'd like to do is to horizontally and vertically center this group of widgets so that its alignment still makes sense if a user increases the size of the window. I know I can put widgets into a row/column/grid layout for such purposes, but then I lose a lot of control over the space between the widgets.
What approach would you recommend to turn this mockup into clean QML code while staying true to the original design?
Two ways:
Wrap it in an Item, then
Use anchors to position your content relative to the screen like this:
Item {
anchors.fill: parent
Image {
id: image
anchors.left: parent.left
anchors.right: parent.right
sourceSize.height: 210
sourceSize.width: 210
source: "lock.svg"
}
Text {
id: element
anchors.top: txtPassword.bottom
anchors.left: txtPassword.left
anchors.right: btnContinue.right
color: "#646464"
text: qsTr("Unlock your rclone configuration to continue.")
styleColor: "#00000000"
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 12
}
OR
Create separate components out of the different parts then place them as a whole into a layout. Do this by moving your elements into a separate file then referencing that file using its name:
example:
LockElement { anchors.centerIn: parent }
will load LockElement.qml which will have your Item, Image, TextBox etc all in one file.
This will make the coordinates relative to their own coordinate space.
LockElement.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Shapes 1.11
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0
Item {
width: 640
height: 480
Image {
id: image
x: 215
y: 96
sourceSize.height: 210
sourceSize.width: 210
source: "lock.svg"
}
Text {
id: element
y: 364
anchors.horizontalCenter: parent.horizontalCenter
color: "#646464"
text: qsTr("Unlock your rclone configuration to continue.")
anchors.horizontalCenterOffset: 0
styleColor: "#00000000"
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 12
}
TextField {
id: txtPassword
x: 193
y: 312
focus: true
font.pointSize: 22
horizontalAlignment: Text.AlignHCenter
echoMode: TextInput.Password
}
Button {
id: btnContinue
x: 399
y: 312
width: txtPassword.height
height: txtPassword.height
text: qsTr("»")
background: Rectangle {
border.color: btnContinueMouse.containsMouse ? "#cdcdcd" : "#ccc"
color: btnContinueMouse.containsMouse ? "#eee" : "#ddd"
}
MouseArea {
id: btnContinueMouse
anchors.fill: parent
hoverEnabled: true
}
}
}
// etc..
How to center element inside qml ColumnLayout? I unsuccessfully tried:
Layout.alignment: Qt.AlignCenter
code:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.11
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout{
anchors.centerIn: parent
width: parent.width
Layout.preferredHeight: parent.height
visible: true
Text{
id: myText
text: "My Text"
Layout.preferredWidth: parent.width
Layout.preferredHeight: 25
Layout.alignment: Qt.AlignCenter
}
}
}
But myText is still not horizontally centered. Any idea?
If we review with the Quick Designer we obtain the following:
As we see the item is centered. The problem is that Layout does not handle the position of the text inside the Text item, for this you must use horizontalAlignment:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.11
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout{
anchors.centerIn: parent
width: parent.width
Layout.preferredHeight: parent.height
visible: true
Text{
id: myText
text: "My Text"
Layout.preferredWidth: parent.width
Layout.preferredHeight: 25
horizontalAlignment: Text.AlignHCenter
}
}
}
This is my Box.qml
I want to use this Box as customized QML Component.
import QtQuick 2.5
Rectangle{
id: sample
width: 100
height: 35
border.color: "Black"
color: "#778899"
Text{
font.pointSize: 10
font.bold: true
anchors.centerIn: parent
}
}
This is my main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Repeater")
Box{
text: "Number"
}
}
But this is not working
I am getting Following Error
qrc:/main.qml:11 Cannot assign to non-existent property "text"
You have to expose that property through property.
Box.qml
import QtQuick 2.5
Rectangle{
property string mytext
id: sample
width: 100
height: 35
border.color: "Black"
color: "#778899"
Text {
font.pointSize: 10
font.bold: true
anchors.centerIn: parent
text: mytext
}
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Repeater")
Box{
mytext: "Number"
}
}
Or use alias:
Box.qml
import QtQuick 2.5
Rectangle{
property alias text: txt.text
id: sample
width: 100
height: 35
border.color: "Black"
color: "#778899"
Text {
id: txt
font.pointSize: 10
font.bold: true
anchors.centerIn: parent
}
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Repeater")
Box{
text: "Number"
}
}