Qml android a icon is above the button

JobRecrd

I can't figure out why the icon comes out of the button on one of the devices. Everything works as expected on the Nexus 4, but some magic happens with the Nexus 6.
Nexus 6.

Nexus 4.

RowLayout {
        id:rlWsd
        anchors.left: window.left
       anchors.top: window.top
Rectangle {
       anchors.left: rlWsd.left
       implicitWidth: 40
       implicitHeight: 40
       border.color: "red"
          Button {
                     id: bthup
                     icon: icons.fa_apple
                     font.pointSize : 15
                                    }
}
}

ODБOï

@JobRecrd said in Qml android a icon is above the button:

RowLayout {
id:rlWsd
anchors.left: window.left
anchors.top: window.top
Rectangle {
anchors.left: rlWsd.left //<< dont use anchors here

You are using anchors in an item managed by QML Layout, that can lead to undefined behavior, there must be a warning in your application output in QtCreator

JobRecrd

@LeLev
I removed the anchor, but it didn't help, the problem remained.

ODБOï

@JobRecrd i'm not sure what is wrong then,
try to explicitly center your button in the rectangle maybe..

Button{
  anchors.centerIn:parent
}

Markkyboy

If you are not tied to using RowLayout, try using just Row instead and drop some of the anchors (pun intended!), you could also lose the Button in exchange for a MouseArea to control the icon;

Here's one way;

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 540
    height: 960
    title: qsTr("Apple")

    Row {
        id: rowOne; x: 20; y: 20
        Rectangle {
            id: rect; width: 100; height: width
            border.color: "red"; border.width: 2
            Image { source: "apple.png"; anchors.centerIn: parent }
            MouseArea {
                anchors.fill: parent
                onEntered: {
                    rect.border.width = 4
                    rect.border.color = "black"
                }
                onExited: {
                    rect.border.width = 2
                    rect.border.color = "red"
                    console.log("How d'ya like them apples?")
                }
            }
        }
    }
}