PDA

View Full Version : How to set font size to given height?



Szyk
16th February 2018, 12:46
Hi!
I want to make custom button with image (2/3 parent height) and text (should have 1/3 parent height). But I have problem with this. I can set image height properly. But I can't found way to set font height properly. When I put image and text to column layout, then I have set manually height for image and text (!), and when I do these some part of the text (bottom parts) was printed outside parent! You can see it on the image 1.
Then I got advice that this simple button I should manage manually (x, y, height, margins and spacing). So I did it. 12770 The problem which I see is that I subtract (by hand) 5 pix from text.height and this value I set as font.pixelSize. Now it looks good on Windows, but what will happen on mobile devices?!? I have no idea... So my question is:
How to set font size to given height? (in my case it will be 1/3 parent height)

The current button code is as follow:


//Import the declarative plugins
import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2

//Implementation of the Button control.
Rectangle {
id: button
color: "#ffffff"
property alias text: text.text
property alias source: image.source
signal clicked
property bool hovered
anchors.margins: 0

Image {
id: image
smooth: true
fillMode: Image.PreserveAspectFit
source: ""
height: parent.height * 0.66
anchors.margins: 0
x: (parent.width - implicitWidth) / 2
y: 2
}
Text {
id: text
color: "black"
font.bold: true
horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true
height: parent.height - 2 - image.height - 3
font.pixelSize: height - 5
anchors.margins: 0
x: (parent.width - implicitWidth) / 2
y: image.height + 2 + 3
}

MouseArea {
anchors.fill: button
onClicked: { button.clicked(); /*messageDialog.open()*/ }
hoverEnabled: true
onEntered: button.hovered = true
onExited: button.hovered = false
}
}