Results 1 to 1 of 1

Thread: Custom button with image does not display image nor align content to center

Hybrid View

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

    Exclamation Custom button with image does not display image nor align content to center

    Hi
    I have an idea to make my mobile app main screen with Qml and 4 buttons with images (with equal height automatically adjusted to screen). I try to do my custom button, but I failed with this. I have project attached to this post to facilitate dig in my problem for kindly person/programmer. In short: I want button with image and text. Image have to be above text and text should be in the bottom of the button (rest of height of the button will be covered by image). Image and text have to be displayed in center of the screen. Image should be scaled to actual button size. Button size can vary from mobile to mobile, so it can't be fixed. But I can guarantee that buttons will be only 4 and each should have height of 1/4 screen height.

    What I done for now is my button widget and main window and I add free clipart from Internet. From my logic it should work as expected, but for some unknown reasons it display only text (not in center, not in bottom of the button), and the image is not displayed at all. I suppose that Column object in the MainFrom.ui.qml behave wrongly, or it's dimensions are calculated after calculation of the buttons content. But I don't know how to manage with this...

    My Button Qml class is as follow:
    Qt Code:
    1. import QtQuick 2.0
    2.  
    3. Rectangle {
    4. id: button
    5. width: 30
    6. height: 100
    7. property alias text: innerText.text
    8. property alias image: backgroundImage.source
    9. signal clicked
    10.  
    11. Image {
    12. id: backgroundImage
    13. smooth: true
    14. anchors.top: button.top
    15. anchors.bottom: innerText.top
    16. fillMode: Image.PreserveAspectFit
    17. horizontalAlignment: Image.AlignHCenter
    18. source: "qrc:/Images/liftarn_Owl_on_book.svg"
    19. }
    20.  
    21. Text {
    22. id: innerText
    23. anchors.top: backgroundImage.bottom
    24. anchors.bottom: button.bottom
    25. color: "black"
    26. font.bold: true
    27. horizontalAlignment: Text.AlignHCenter
    28. }
    29.  
    30. //Mouse area to react on click events
    31. MouseArea {
    32. anchors.fill: button
    33. onClicked: { button.clicked(); }
    34. }
    35. }
    To copy to clipboard, switch view to plain text mode 

    I use it in MainForm.ui.qml class:
    Qt Code:
    1. import QtQuick 2.4
    2. import QtQuick.Controls 2.2
    3. import "qrc:/Widgets"
    4.  
    5.  
    6. //import "qrc:/src/Qml/Widgets/Button.qml"
    7. Item {
    8. id: item1
    9. width: 400
    10. height: 400
    11.  
    12. Column {
    13. id: column
    14. anchors.fill: parent
    15.  
    16. Button {
    17. id: learning
    18. width: item1.width
    19. height: item1.height / 4
    20. text: qsTr("Learning")
    21. }
    22. Button {
    23. id: syncroniztion
    24. width: item1.width
    25. height: item1.height / 4
    26. text: qsTr("Syncronization")
    27. }
    28. Button {
    29. id: options
    30. width: item1.width
    31. height: item1.height / 4
    32. text: qsTr("Options")
    33. }
    34. Button {
    35. id: exit
    36. width: item1.width
    37. height: item1.height / 4
    38. text: qsTr("Exit")
    39. }
    40. }
    41. }
    To copy to clipboard, switch view to plain text mode 

    please help me, thanks, and best regards
    Szyk Cech
    Attached Files Attached Files
    Last edited by Szyk; 10th February 2018 at 16:52.

Similar Threads

  1. How to center-align QComboBox's drop down button?
    By alexcodercpp in forum Newbie
    Replies: 1
    Last Post: 24th March 2017, 13:28
  2. Qwt, Align content to center
    By Asting in forum Qwt
    Replies: 3
    Last Post: 18th June 2014, 12:06
  3. Replies: 3
    Last Post: 3rd August 2012, 11:35
  4. Replies: 1
    Last Post: 18th June 2011, 19:28

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.