Results 1 to 1 of 1

Thread: How to set font size to given height?

  1. #1
    Join Date
    Feb 2015
    Location
    Poland
    Posts
    33
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Exclamation How to set font size to given height?

    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. Screenshot_20180216a.png 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:
    Qt Code:
    1. //Import the declarative plugins
    2. import QtQuick 2.7
    3. import QtQuick.Layouts 1.3
    4. import QtQuick.Dialogs 1.2
    5.  
    6. //Implementation of the Button control.
    7. Rectangle {
    8. id: button
    9. color: "#ffffff"
    10. property alias text: text.text
    11. property alias source: image.source
    12. signal clicked
    13. property bool hovered
    14. anchors.margins: 0
    15.  
    16. Image {
    17. id: image
    18. smooth: true
    19. fillMode: Image.PreserveAspectFit
    20. source: ""
    21. height: parent.height * 0.66
    22. anchors.margins: 0
    23. x: (parent.width - implicitWidth) / 2
    24. y: 2
    25. }
    26. Text {
    27. id: text
    28. color: "black"
    29. font.bold: true
    30. horizontalAlignment: Text.AlignHCenter
    31. Layout.fillWidth: true
    32. height: parent.height - 2 - image.height - 3
    33. font.pixelSize: height - 5
    34. anchors.margins: 0
    35. x: (parent.width - implicitWidth) / 2
    36. y: image.height + 2 + 3
    37. }
    38.  
    39. MouseArea {
    40. anchors.fill: button
    41. onClicked: { button.clicked(); /*messageDialog.open()*/ }
    42. hoverEnabled: true
    43. onEntered: button.hovered = true
    44. onExited: button.hovered = false
    45. }
    46. }
    To copy to clipboard, switch view to plain text mode 
    Attached Images Attached Images

Similar Threads

  1. Prevent window size change when font size changes
    By quimnuss in forum Qt Programming
    Replies: 0
    Last Post: 3rd September 2015, 14:17
  2. Replies: 1
    Last Post: 30th March 2012, 16:46
  3. Font Height and width based on font size
    By Ghufran in forum Qt Programming
    Replies: 1
    Last Post: 31st July 2010, 08:02
  4. Replies: 6
    Last Post: 27th July 2010, 21:07
  5. change font size and button size of QMessageBox
    By nass in forum Qt Programming
    Replies: 6
    Last Post: 13th September 2006, 19:16

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.