Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Buttons become transparent over images using Material Style
Forum Updated to NodeBB v4.3 + New Features

Buttons become transparent over images using Material Style

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
7 Posts 2 Posters 792 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • aarelovichA Offline
    aarelovichA Offline
    aarelovich
    wrote on last edited by
    #1

    I want my application to use an image as a Background. So I use this code:

    In my ApplicationWindow:

    Image {
        id: bkgImage
        source: "qrc:/images/bkg.jpg"
        anchors.centerIn: parent
    }
    

    To add a button

    Button {
        id: btnAsistencia
        text: qsTr("ASISTENCIA")
        font.pixelSize: fhButttonTextSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: btnInscripcion.bottom
        anchors.topMargin: parent.height*0.1
    }
    

    The code above is for the second button, but I added one before in the exact same way. This is the result:

    alt text

    The second button becomes transparent over the image. How can I prevent this?

    ekkescornerE 1 Reply Last reply
    0
    • aarelovichA aarelovich

      I want my application to use an image as a Background. So I use this code:

      In my ApplicationWindow:

      Image {
          id: bkgImage
          source: "qrc:/images/bkg.jpg"
          anchors.centerIn: parent
      }
      

      To add a button

      Button {
          id: btnAsistencia
          text: qsTr("ASISTENCIA")
          font.pixelSize: fhButttonTextSize
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.top: btnInscripcion.bottom
          anchors.topMargin: parent.height*0.1
      }
      

      The code above is for the second button, but I added one before in the exact same way. This is the result:

      alt text

      The second button becomes transparent over the image. How can I prevent this?

      ekkescornerE Offline
      ekkescornerE Offline
      ekkescorner
      Qt Champions 2016
      wrote on last edited by
      #2

      @aarelovich you can customize the background of your Button
      https://doc.qt.io/qt-5.9/qtquickcontrols2-customize.html#customizing-button

      ekke ... Qt Champion 2016 | 2024 ... mobile business apps
      5.15 --> 6.8 https://t1p.de/ekkeChecklist
      QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

      1 Reply Last reply
      2
      • aarelovichA Offline
        aarelovichA Offline
        aarelovich
        wrote on last edited by
        #3

        I ended up doing that, but I wanted to use the standard colors for the Material.Dark Theme. Thanks for the reply.

        ekkescornerE 1 Reply Last reply
        0
        • aarelovichA aarelovich

          I ended up doing that, but I wanted to use the standard colors for the Material.Dark Theme. Thanks for the reply.

          ekkescornerE Offline
          ekkescornerE Offline
          ekkescorner
          Qt Champions 2016
          wrote on last edited by
          #4

          @aarelovich please open a bug report

          ekke ... Qt Champion 2016 | 2024 ... mobile business apps
          5.15 --> 6.8 https://t1p.de/ekkeChecklist
          QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

          aarelovichA 1 Reply Last reply
          0
          • ekkescornerE ekkescorner

            @aarelovich please open a bug report

            aarelovichA Offline
            aarelovichA Offline
            aarelovich
            wrote on last edited by
            #5

            @ekkescorner

            I don't understand, what exactly is the bug here? Just because something does not behave like I'd like, it is not necessarily a bug, right?

            ekkescornerE 1 Reply Last reply
            0
            • aarelovichA aarelovich

              @ekkescorner

              I don't understand, what exactly is the bug here? Just because something does not behave like I'd like, it is not necessarily a bug, right?

              ekkescornerE Offline
              ekkescornerE Offline
              ekkescorner
              Qt Champions 2016
              wrote on last edited by
              #6

              @aarelovich then I misunderstood. thought it's not working as expected from Google Material Guidelines.

              ekke ... Qt Champion 2016 | 2024 ... mobile business apps
              5.15 --> 6.8 https://t1p.de/ekkeChecklist
              QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

              aarelovichA 1 Reply Last reply
              0
              • ekkescornerE ekkescorner

                @aarelovich then I misunderstood. thought it's not working as expected from Google Material Guidelines.

                aarelovichA Offline
                aarelovichA Offline
                aarelovich
                wrote on last edited by
                #7

                @ekkescorner Ok, that might be. Thanks!

                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved