I want to specify the width and height of a Text, so that the fontSizeMode:Text.Fit would work. But after that, the anchors of the Text would not work. How could this happen?
Rectangle {
width: 360; height: 360
Rectangle {
width: parent.width / 3; height: parent.height / 6
anchors.centerIn: parent
border{ color: "red"; width: 5 }
Text {
anchors {
centerIn: parent
// verticalCenter: parent.verticalCenter
// horizontalCenter: parent.horizontalCenter
}
width: parent.width
height: parent.height
font.pixelSize: 50
fontSizeMode: Text.Fit
text: "Hello, world!"
}
}
}
Well, they are working fine. But since you set width and height, centrerIn anchor do not change anything, as text is already in middle of parent. You should set alignment, to get proper effect:
Text {
anchors.fill: parent
font.pixelSize: 100
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "Hello, world!"
}
Related
I have a rectangle which displays some information in the center of my app, like so:
Rectangle {
id: info
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width * 0.8
height: 500
Column {
spacing: Theme.paddingLarge
anchors.top: parent.top
anchors.topMargin: Theme.paddingLarge
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 2*Theme.paddingLarge
Row {
spacing: Theme.paddingLarge * 2
anchors.horizontalCenter: parent.horizontalCenter
Text {
anchors.verticalCenter: parent.verticalCenter
font.pointSize: Theme.fontSizeLarge
text: info.brand
}
Image {
width: 64
height: 64
source: "qrc:///graphics/other.png"
anchors.verticalCenter: parent.verticalCenter
}
}
Text {
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: Theme.fontSizeTiny
wrapMode: Text.WordWrap
width: parent.width
text: info.priceString
}
Row {
spacing: Theme.paddingMedium
anchors.horizontalCenter: parent.horizontalCenter
Rectangle {
width: 60
height: 30
}
Text {
anchors.verticalCenter: parent.verticalCenter
font.pointSize: Theme.fontSizeTiny
text: info.description
}
Image {
source: "qrc:///graphics/locked.png"
width: 64
height: 64
}
}
Row {
spacing: Theme.paddingMedium
anchors.horizontalCenter: parent.horizontalCenter
Button {
text: qsTr("Find")
width: (scooterInfo.width -2*Theme.paddingLarge) / 2 - Theme.paddingMedium
visible: scooterInfo.mode == "show"
}
Button {
text: qsTr("Missing")
width: (scooterInfo.width -2*Theme.paddingLarge) / 2 - Theme.paddingMedium
visible: scooterInfo.mode == "show"
}
}
}
}
Now since its a SailfishOS app, the font sizes as well as the padding will differ according to the theme. This leaves me unable to set a fixed height for the Rectangle with id info.
It already makes a difference when running in emulator and when running on my device. I can make only one of both fit, not both at the same time.
So I need a way to have the rectangle automatically pick an appropriate height according to its contents, including padding. How can I achieve this?
I tested your code and got it to work by removing the top and bottom anchors from your Column object. Columns will automatically resize themselves based on their children, so you don't need to manually restrict their height.
Rectangle {
id: info
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width * 0.8
height: childrenRect.height // Resize to fit children
Column {
spacing: Theme.paddingLarge
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 2*Theme.paddingLarge
...
}
}
Hello I have the following Layout. But the Grid is left aligned how do I center it in the scrollview area??
Rectangle {
id: card
ScrollView {
width: card.width
height: 60
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
id: bottomMenuScrollArea
anchors {
bottom: parent.bottom
bottomMargin: 20
}
// BOTTOM MENU
Grid {
id: bottomMenu
width: card.width
height: 60
columns: 4
columnSpacing: 20
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
}
}
Can you help me with horizontal center the grid in the scroll view area?? I tried differnt things ut was not succsesfull.
I appricate your help :)
Or is thee any better way to get scrollbars around the grid?
You'll need to place the Grid inside of an Item. Anchor the grid in the horizontal center of the Item and set the Item's width to the maximum of the ScrollView width and the Grid width. Something like this:
ScrollView {
id: bottomMenuScrollArea
Item {
id: gridContainer
width: Math.max(bottomMenuScrollArea.width, bottomMenu.width)
height: bottomMenu.height
Grid {
id: bottomMenu
anchors.horizontalCenter: parent.horizontalCenter
[...]
}
}
}
I have a ListView where the items become visible or not based on whether a header was expanded or not. When the visible property is set to false, there is just blank space in that area. How do I remove the black space in the list so that the next visible item comes in view?
Currently I have set the height:model.count * 50 with 50 being height of each item. I tried subtracting 50 every time an item's visible property is set to false but this just reduces the height of the list overall but the blank space remains.
ListView { id: list
focus: true
anchors.top: header.bottom
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
height:model.count*50
model:hall
Component {
id:comp
Item{
width: parent ? parent.width : 0
height: parent ? parent.height: 0
Column{
id:col1
width: parent.width - 16
height: 25
anchors.centerIn: parent
spacing: 3
Text { id: name
width: parent.width
text: name
elide: Text.ElideMiddle
font: "black"
color: "grey"
}
Row{
width: parent.width
Text { id: file1
width: parent.width * 0.6 - 5
text: "hello"
horizontalAlignment: Text.AlignLeft
elide: Text.ElideMiddle
font: systemFont.TableCellFont
}
Text { id: file2
width: parent.width*0.4 - 3
horizontalAlignment: Text.AlignRight
text: mod
font: systemFont.TableCellFont
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.warn("Mouse onClicked")
}
}
}
}
delegate: Item {
width: parent.width;
height: {
if (!cric && expanded)
return 50
else
return 0
}
Loader {
anchors.fill: parent
sourceComponent: comp
height: expanded? 50: 0
readonly property int index:model.index
readonly property string mod: model.mod
visible: !cric && expanded
}
}
Keys.onReturnPressed: {
console.warn("Return pressed")
}
}
The blank space is created because the List item which is hidden by setting visible to false still has its dimensions set. You can update the item height to 0 and the blank space will not be visible. Try this example for reference.
import QtQuick 1.1
Rectangle{
width: 400; height: 400
color: 'lightblue'
ListView{
width: 400; height: count * 30
model: 20
delegate: Rectangle{
id: rectDel
width: 200; height: 30
color: 'lightgreen'
border{
width: 1
color: 'black'
}
Text{
text: index
anchors.centerIn: parent
}
Rectangle{
width: 20; height: 20
radius: 10
color: 'red'
anchors{
verticalCenter: parent.verticalCenter
right: parent.right; rightMargin: 10
}
Text{ text: 'X'; anchors.centerIn: parent; }
MouseArea{
anchors.fill: parent
onClicked: {
rectDel.visible = false
rectDel.height = 0
}
}
}
}
}
}
in my code i have a ListView of 16 elements, i want that when i scroll the listview the first element must be always visible. How i can do it ?
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
ListView {
id:listview
anchors.fill: parent
model: 16
verticalLayoutDirection: ListView.BottomToTop
delegate: Rectangle {
height: listview.height/5
width: listview.width
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
Text {
text: index
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
font.pixelSize: 35
}
}
}
}
you could make use of a header. Your code will then look something like this:
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
ListView {
id:listview
anchors.fill: parent
model: 15
verticalLayoutDirection: ListView.BottomToTop
headerPositioning: ListView.OverlayHeader
header: Rectangle {
height: listview.height/5
width: listview.width
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
z:2
Text {
text: "0"
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
font.pixelSize: 35
}
}
delegate: Rectangle {
height: listview.height/5
width: listview.width
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
Text {
text: index+1
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
font.pixelSize: 35
}
}
}
}
I am using Qt Quick to develop an app (Qt 5.8). I have text that appears in multiple places so I created a component to use to display the text. The areas the text can vary in placement and size. How can I adjust my text so that the data displays in 1 line horizontally and all text is the same size if I simply want to display the following?
FLAPS 1
GEAR DOWN
TRIM -1.0
I used Text and was able to get close, however since GEAR DOWN has more characters the text was smaller, than flaps and trim. So I moved on to using Label. Can someone provide better insight on how to have text size based on its container's width or height?
main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
id: windowRoot
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
height: windowRoot.height * .80
width: windowRoot.width * .80
color: "green"
anchors.centerIn: parent
Rectangle {
id: rect1
opacity: .5
anchors.top: parent.top
anchors.left: parent.left
color: "lime"
border.color: "orange"
height: parent.height * 1/2
width: parent.width * 1/2
TextHolder {
anchors.top: parent.top
anchors.left: parent.left
width: parent.width * 1/4
height: parent.height
}
}
Rectangle {
id: rect2
anchors.top: parent.top
anchors.left: rect1.right
color: "yellow"
border.color: "blue"
height: parent.height * 1/2
width: parent.width * 1/2
}
Rectangle {
id: rect3
anchors.top: rect1.bottom
anchors.left: parent.left
color: "pink"
border.color: "red"
height: parent.height * 1/2
width: parent.width * 1/2
TextHolder {
anchors.top: parent.top
anchors.left: parent.left
width: parent.width * 1/4
height: parent.height * 1/2
}
}
Rectangle {
id: rect4
anchors.top: rect2.bottom
anchors.left: rect3.right
color: "orange"
border.color: "lime"
height: parent.height * 1/2
width: parent.width * 1/2
TextHolder {
anchors.bottom: parent.bottom
height: parent.height * 1/4
width: parent.width * 1/4
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
TextHolder.qml
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
Rectangle {
color: "purple"
border.color: "steelblue"
border.width: 3
property color colorOfText: "white"
property real textSize: 48
Item {
id: inputs
property int flapHndl: 1
property int gearHndl: 1
property real trim: -1.0
}
clip: true
ColumnLayout {
anchors.top: parent.top
width: parent.width
height: parent.height
spacing: 5
Label {
id: flapLabel
text: "FLAPS " + inputs.flapHndl
color: colorOfText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: textSize
fontSizeMode: Text.HorizontalFit
Layout.fillWidth: true
}
Label {
id: gearLabel
text: {
if (inputs.gearHndl === 1)
return "GEAR DOWN"
else
return "GEAR UP"
}
color: colorOfText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: textSize
fontSizeMode: Text.HorizontalFit
Layout.fillWidth: true
}
Label {
id: trimLabel
text: "TRIM " + inputs.trim.toFixed(1)
color: colorOfText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: textSize
fontSizeMode: Text.HorizontalFit
Layout.fillWidth: true
}
}
}
Can someone provide better insight on how to have text size based on
its container's width or height?
For evaluating the text width and height we can definitely use QML type TextMetrics and having the metrics we can then attempt to fit the text in. If the text still won't fit we can then try to adjust the font size. For that, some logic might need to be implemented with JavaScript. So, the below code is an example of the "feedback" type of solution.
Rectangle {
property string textToShow
property int widthLimit: 400
onTextToShowChanged: {
while (txtMeter.width > widthLimit) {
txtMeter.font.pixelSize --;
}
}
TextMetrics {
id: txtMeter
font.family: "Courier"
font.pixelSize: 25
text: textToShow
}
Text {
font: txtMeter.font
text: textToShow
}
}
P.S. This is just a sketchy idea and your actual implementation may differ
There is fontSizeMode property of Text
Text {
id: goToParentFolderText
anchors.fill: parent
font.family: fontAwesomeSolid.name
text: "\uf060"
fontSizeMode: Text.Fit
font.pointSize: 100
color: Material.accent
}
I was able to get #Alexander V's answer to work, with a minor change. The outer textToShow property was processing its update before the TextMetrics block was updated (which caused the width calculation to be incorrect). You can fix this issue by triggering onTextChanged inside the TextMetrics blocks instead.
Rectangle {
property string textToShow
property int widthLimit: 400
TextMetrics {
id: txtMeter
font.family: "Courier"
font.pixelSize: 25
text: textToShow
onTextChanged: {
while (txtMeter.width > widthLimit) {
txtMeter.font.pixelSize --;
}
}
}
Text {
font: txtMeter.font
text: textToShow
}
}