EDIT: I also discovered that the Material style isn't displaying the icon correctly. I'm going to close this topic and open a new one.

EDIT:

Using a background seems to fix it (sort of). Let me play with this and I'll report back.

That is what I'm trying to fix (plus another problem I'll bring up later).

Thanks...

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: mainWindow
    width: 1024
    height: 768
    visible: true

    ColumnLayout {
        Rectangle {
            id: r1
            height: 60
            width: mainWindow.width
            color: 'red'

            RowLayout {
                id: rowLayout

                Button {
                    id: b1
                    implicitHeight : r1.height / 2
                    text: b1.height
                }
            }
        }

        Rectangle {
            id: r2
            height: 60
            width: mainWindow.width
            color: 'blue'
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            Button {
                id: b2
                implicitHeight: r2.height / 2
                text: b2.height
            }
        }

        Button {
            id: b3
            implicitHeight: r2.height / 2 // just borrowing the height from r2.
            text: b3.height
        }
    }
}

change
height: r1.height
to
implicitHeight: r1.height
will do it.

I assume that change was for the RowLayout, as that's the only place with that exact line of code. It didn't change anything. If I make that change to b1 as well, b1 then looks like b2, which isn't what I want.

Setting the implicit size is useful for defining components that have a preferred size based on their content.

But in this case, I want to dictate the size (height) of the button. I want it to be exactly half the height of the rectangle in which it's being placed. That's why I'm not sure implicit sizes are appropriate here.

height: r1.height

change
height: r1.height
to
implicitHeight: r1.height
will do it.

Setting the implicit size is useful for defining components that have a preferred size based on their content.

This code:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: mainWindow
    width: 1024
    height: 768
    visible: true

    ColumnLayout {
        Rectangle {
            id: r1
            height: 60
            width: mainWindow.width
            color: 'red'

            RowLayout {
                id: rowLayout
                height: r1.height
                width: r1.width

                Button {
                    id: b1
                    height: r1.height / 2
                    text: b1.height
                }
            }
        }
        Rectangle {
            id: r2
            height: 60
            width: mainWindow.width
            color: 'blue'
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            Button {
                id: b2
                height: r2.height / 2
                text: b2.height
            }
        }
        Button {
            id: b3
            height: r2.height / 2 // just borrowing the height from r2.
            text: b3.height
        }
    }
}

yields this:

All buttons should be 30 pixels high (half the height of the rectangles). Buttons 1 and 3 appear as the correct height, but give a bad height value. Button 2 has the correct value, but doesn't appear correctly (not the right height).

Can someone tell me WHAT is going on here?

Thanks...

// implements a round button that can support an icon and up to two lines of text. (not complete yet)
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects

import QtQuick.Controls.Material
import QtQuick.Controls.Fusion

import colors.stylesheet

RoundButton {
    id: roundButton

    property string buttonTitle: "this should not appear"
    property string buttonDescr: ""
    property int fontSize: 16
    property color textColor: Colors.primaryText
    property color buttonColor: Colors.primaryPurple
    property color borderColor: Colors.primaryText
    property int borderWidth: 2
    property url buttonIcon: ""

    height: implicitHeight//implicitBackgroundHeight
    width: implicitWidth
    radius: height / 2
    leftPadding: 8
    rightPadding: leftPadding
    topPadding: 4
    bottomPadding: 4

    display: AbstractButton.TextBesideIcon
    icon {
        color: roundButton.textColor
        source: roundButton.buttonIcon
        height: roundButton.height * 3 / 4
    }
    text: roundButton.buttonTitle

    // note: this line below is an semi-documented feature,
    // https://doc.qt.io/qt-6/qml-qtquick-palette.html
    // but the alternative is to use contentItem, which
    // doesn't support an icon, so it needs a RowLayout, etc.
    // for now, this is the lesser of 2 evils.
    palette.buttonText: roundButton.textColor

    font {
        pixelSize: roundButton.fontSize
        weight: Font.Bold
    }

    background: Rectangle {
        id: buttonBackground
        height: roundButton.height
        width: roundButton.width
        anchors.centerIn: parent
        radius: height / 2
        color: pressed ? Colors.purplePressed : roundButton.buttonColor
        border.color: borderColor
        border.width: borderWidth
    }
}

    background: Rectangle {
        id: buttonBackground
        height: roundButton.height
    }

RoundButton {
    id: roundButton
    height: implicitBackgroundHeight
    background: Rectangle {
        id: buttonBackground
        height: roundButton.height
    }
}