2023年2月8日 21:39:56go评论59阅读模式

英文:

QML how to use a dynamic topmargin correctly

问题

我想根据图标的存在来放大或缩小按钮。按钮位于一个矩形内，我想通过顶部边距来实现它，因为按钮也有圆角，只有顶部的角应该可见。

目标是这样的表示：

如果我将顶部边距固定设置为10，看起来不错

如果我根据图标是否存在来计算值，那么没有图标的按钮会正确显示得更深，但带有图标的按钮会显示得太深

像前一张图片那样，图标按钮的顶部边距是10，但它们被移动得更低。

有什么想法 - display.qml 的代码经过简化，未显示所有属性。如果需要，我会添加它们。

FooterButton.qml

Rectangle {
    id: button
    property string p_identity
    property string p_icon
    property string p_source
    property string p_backgroundColor
    property int p_topmargin: 10
    height: 70
    width: 80
    Layout.leftMargin: 25
    Layout.topMargin: p_topmargin
    color: p_backgroundColor
    radius: 10
    border.color: "black"
    border.width: 0

    Connections { 
        target: m_screen; 
        onScreenChanged: { 
            p_icon = m_screen.getButtonIcon(p_identity)
            p_source = (!p_icon || p_icon.length === 0) ? "" : "image://iconprovider/" + p_icon
            p_topmargin = (!p_icon || p_icon.length === 0) ? 45 : 10
        } 
    }
}

Footer.qml

Item {
    id: footer
    property string p_footerBackgroundColor: "yellow" //m_config.getColor(Colors.FooterBackground)
    property string p_buttonBackgroundColor: m_config.getColor(Colors.ButtonBackground)
    Rectangle { anchors.fill: parent; x: footer.x; y: footer.y; width: footer.width; height: footer.height; color: p_footerBackgroundColor
        RowLayout{ anchors.fill: parent
            FooterButton{ p_identity: "FB1"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB2"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB3"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB4"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB5"; p_backgroundColor: p_buttonBackgroundColor }
        }
    }
}

Display.qml

Item {
    id: display

    Header { x: 0; y: 0; width: display.width; height: p_headerHeight; visible: p_headerVisible; color: p_backgroundColor; p_buttonColor: p_buttonBackgroundColor  }
    Left { x: 0; y: p_headerHeight; width: p_borderWidth; height: p_contentHeight; color: "blue" }
    Right { x: display.width - p_encoderWidth; y: p_headerHeight; width: p_encoderWidth; height: p_contentHeight; p_color: "magenta" }
    Footer { x: 0; y: display.height - p_footerHeight; width: display.width; height: p_footerHeight; visible: p_footerVisible }
}

英文:

I want to enlarge or reduce a button depending on the presence of an icon. The buttons are in a rectangle and I would like to realize it with the top margin, because the buttons also have rounded corners and only the top corners should be visible.

The goal is a representation like this

If I set the topmargin fix to 10 it looks good

If I calculate the value depending on whether an icon is present, the buttons without icon are correctly displayed deeper, but the buttons with icon sit too deep

Like the picture before the topmargin for the icon buttons is 10 but they are moved lower.

Any idea - the code for display.qml is reduced and does not show all the properties. if they are needed i will add them.

FooterButton.qml

Rectangle {
    id: button
    property string p_identity
    property string p_icon
    property string p_source
    property string p_backgroundColor
    property int p_topmargin: 10
    height: 70
    width: 80
    Layout.leftMargin: 25
    Layout.topMargin: p_topmargin
    color: p_backgroundColor
    radius: 10
    border.color: &quot;black&quot;
    border.width: 0

    Connections { 
        target: m_screen; 
        onScreenChanged: { 
            p_icon = m_screen.getButtonIcon(p_identity)
            p_source = (!p_icon || p_icon.length === 0) ? &quot;&quot; : &quot;image://iconprovider/&quot; + p_icon)
           // p_topmargin = 10
            p_topmargin = (!p_icon || p_icon.length === 0) ? 45 : 10
        } 
    }

Footer.qml

Item {
    id: footer
    property string p_footerBackgroundColor: &quot;yellow&quot; //m_config.getColor(Colors.FooterBackground)
    property string p_buttonBackgroundColor: m_config.getColor(Colors.ButtonBackground)
    Rectangle { anchors.fill: parent; x: footer.x; y: footer.y; width: footer.width; height: footer.height; color: p_footerBackgroundColor
        RowLayout{ anchors.fill: parent
            FooterButton{ p_identity: &quot;FB1&quot;; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: &quot;FB2&quot;; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: &quot;FB3&quot;; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: &quot;FB4&quot;; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: &quot;FB5&quot;; p_backgroundColor: p_buttonBackgroundColor }
        }
    }

Display.qml

Item {
    id: display


    Header { x: 0; y: 0; width: display.width; height: p_headerHeight; visible: p_headerVisible; color: p_backgroundColor; p_buttonColor: p_buttonBackgroundColor  }
    Left { x: 0; y: p_headerHeight; width: p_borderWidth; height: p_contentHeight; color: &quot;blue&quot; }
    Right { x: display.width - p_encoderWidth; y: p_headerHeight; width: p_encoderWidth; height: p_contentHeight; p_color: &quot;magenta&quot; }
    Footer { x: 0; y: display.height - p_footerHeight; width: display.width; height: p_footerHeight; visible: p_footerVisible }

答案1

得分: 0

只是确保您没有过度工程化您的问题，但我想指出，标准的 Button 支持icon和将背景更改为圆角 Rectangle 的能力：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    footer: Frame {
        background: Rectangle {
            color: "yellow"
        }
        RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 20
            AppButton {
                //icon.source: "hammer.svg";
            }
            AppButton {
                //icon.source: "hammer.svg";
            }
            AppButton {
                icon.source: "hammer.svg";
            }
            AppButton {
                //icon.source: "hammer.svg";
            }
            AppButton {
                icon.source: "check.svg";
            }
        }
    }
}

// AppButton.qml
import QtQuick
import QtQuick.Controls
Button {
    width: 100
    height: 100
    background: Rectangle {
        color: pressed ? palette.mid : palette.button
        radius: 20
    }
    icon.source: "blank.svg";
    icon.width: 64
    icon.height: 64
}

// blank.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
</svg>

// hammer.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.64 25.462c-1.186-1.62-3.535-4.176-6.254-7.136-2.657-2.893-5.671-6.173-8.066-9.11a3.883 3.883 0 0 1-1.044-1.531 6.899 6.899 0 0 0-.215-1.271 3.427 3.427 0 0 1-.08-.348 7.985 7.985 0 0 1 3.153-1.61 25.43 25.43 0 0 1 4.095-.527l1.08-.043-1.14-1.239-.148-.035a24.293 24.293 0 0 0-5.123-.606A13.096 13.096 0 0 0 7.53 4.82c-.225.2-1.433 1.478-1.338 2.334.078.730-.212.949-.792 1.383a8.35 8.35 0 0 0-.558.444c-1.468-.125-1.92.252-3.014 1.16l-.39.32-.095.105a1.472 1.472 0 0 0-.277 1.24 7.214 7.214 0 0 0 2.294 3.029 2.25 2.25 0 0 0 2.404-.483 18.003 18.003 0 0 0 1.577-2.018 2.67 2.67 0 0 1 1.633-1.26 12.815 12.815 0 0 1 2.588.88c.11.046.2.077.277.104.05.018.111.032.116.036 4.108 5.004 6.896 8.936 8.93 11.807 1.401 1.976 2.413 3.404 3.3 4.412l.912 1.038a1.935 1.935 0 0 0 1.362.651l.078.001a1.939 1.939 0 0 0 1.334-.534l1.548-1.486a1.927 1.927 0 0 0 .22-2.52zM12.059 11.028l-.029.034c-.03-.012-.052-.018-.088-.033a10.285 10.285 0 0 0-3-.954 3.577 3.577 0 0 0-2.454 1.738 21.031 21.031 0 0 1-1.375 1.786c-.605.434-.936.519-1.313.338a6.931 6.931 0 0 1-1.792-2.446.85.85 0 0 1 .125-.305l.334-.275c1.045-.867 1.228-1.021 2.299-.933a1.02 1.02 0 0 0 .738-.247A7.72 7.72 0 0 1 6 9.337a2.27 2.27 0 0 0 1.186-2.288A3.785 3.785 0 0 1 8.19 5.571a12.232 12.232 0 0 1 7.706-2.565 20.9 20.9 0 0 1 2.624.178c-.523.076-1.076.173-1.614.298A9.024 9.024 0 0 0 13.34 5.3a1.176 1.176 0 0 0-.25 1.356 5.831 5.831 0 0 1 .19 1.1 3.345 3.345 0 0 0 .842 1.625 9.48 9.48 0 0 0-.994.683 7.036 7.036 0 0 0-1.068.964zm16.668 16.234l-1.547 1.485a.945.945 0 0 1-.678.256.924.924 0 0 1-.652-.312l-.912-1.038c-.853-.970-1.905-2.452-3.236-4.33-2.018-2.848-4.780-6.742-8.838-11.696a6.433 6.433 0 0 1 .875-.772 8.145 8.145 0 0 1 .964-.660l.090-.050C17.140 13.000 20.060 16.182 22.650 19.001 2.700 2.939 5.032 5.477 6.184 7.051a.923.923 0 0 1-.106 1.

<details>
<summary>英文:</summary>

just making sure you&#39;re not over-engineering your problem, but, I want to point out that the standard `Button` has both `icon` support and the ability to change the background to a rounded `Rectangle`:

```qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    footer: Frame {
        background: Rectangle {
            color: &quot;yellow&quot;
        }
        RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 20
            AppButton {
                //icon.source: &quot;hammer.svg&quot;
            }
            AppButton {
                //icon.source: &quot;hammer.svg&quot;
            }
            AppButton {
                icon.source: &quot;hammer.svg&quot;
            }
            AppButton {
                //icon.source: &quot;hammer.svg&quot;
            }
            AppButton {
                icon.source: &quot;check.svg&quot;
            }
        }
    }
}

// AppButton.qml
import QtQuick
import QtQuick.Controls
Button {
    width: 100
    height: 100
    background: Rectangle {
        color: pressed ? palette.mid : palette.button
        radius: 20
    }
    icon.source: &quot;blank.svg&quot;
    icon.width: 64
    icon.height: 64
}

// blank.svg
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;&gt;
&lt;/svg&gt;

// hammer.svg
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path d=&quot;M29.64 25.462c-1.186-1.62-3.535-4.176-6.254-7.136-2.657-2.893-5.671-6.173-8.066-9.11a3.883 3.883 0 0 1-1.044-1.531 6.899 6.899 0 0 0-.215-1.271 3.427 3.427 0 0 1-.08-.348 7.985 7.985 0 0 1 3.153-1.61 25.43 25.43 0 0 1 4.095-.527l1.08-.043-1.14-1.239-.148-.035a24.293 24.293 0 0 0-5.123-.606A13.096 13.096 0 0 0 7.53 4.82c-.225.2-1.433 1.478-1.338 2.334.078.73-.212.949-.792 1.383a8.35 8.35 0 0 0-.558.444c-1.468-.125-1.92.252-3.014 1.16l-.39.32-.095.105a1.472 1.472 0 0 0-.277 1.24 7.214 7.214 0 0 0 2.294 3.029 2.25 2.25 0 0 0 2.404-.483 18.003 18.003 0 0 0 1.577-2.018 2.67 2.67 0 0 1 1.633-1.26 12.815 12.815 0 0 1 2.588.88c.11.046.2.077.277.104.05.018.111.032.116.036 4.108 5.004 6.896 8.936 8.93 11.807 1.401 1.976 2.413 3.404 3.3 4.412l.912 1.038a1.935 1.935 0 0 0 1.362.651l.078.001a1.939 1.939 0 0 0 1.334-.534l1.548-1.486a1.927 1.927 0 0 0 .22-2.52zM12.059 11.028l-.029.034c-.03-.012-.052-.018-.088-.033a10.285 10.285 0 0 0-3-.954 3.577 3.577 0 0 0-2.454 1.738 21.031 21.031 0 0 1-1.375 1.786c-.605.434-.936.519-1.313.338a6.931 6.931 0 0 1-1.792-2.446.85.85 0 0 1 .125-.305l.334-.275c1.045-.867 1.228-1.021 2.299-.933a1.02 1.02 0 0 0 .738-.247A7.72 7.72 0 0 1 6 9.337a2.27 2.27 0 0 0 1.186-2.288A3.785 3.785 0 0 1 8.19 5.571a12.232 12.232 0 0 1 7.706-2.565 20.9 20.9 0 0 1 2.624.178c-.523.076-1.076.173-1.614.298A9.024 9.024 0 0 0 13.34 5.3a1.176 1.176 0 0 0-.25 1.356 5.831 5.831 0 0 1 .19 1.1 3.345 3.345 0 0 0 .842 1.625 9.48 9.48 0 0 0-.994.683 7.036 7.036 0 0 0-1.068.964zm16.668 16.234l-1.547 1.485a.945.945 0 0 1-.678.256.924.924 0 0 1-.652-.312l-.912-1.038c-.853-.97-1.905-2.452-3.236-4.33-2.018-2.848-4.78-6.742-8.838-11.696a6.433 6.433 0 0 1 .875-.772 8.145 8.145 0 0 1 .964-.66l.09-.05C17.14 13 20.06 16.182 22.65 19.001c2.7 2.939 5.032 5.477 6.184 7.051a.923.923 0 0 1-.106 1.209z&quot;/&gt;&lt;path fill=&quot;none&quot; d=&quot;M0 0h32v32H0z&quot;/&gt;&lt;/svg&gt;

// check.svg
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path d=&quot;M13.5 22.142L7.59 16.42l.636-.636L13.5 20.87 26.721 7.8l.637.637z&quot;/&gt;&lt;path fill=&quot;none&quot; d=&quot;M0 0h32v32H0z&quot;/&gt;&lt;/svg&gt;

You can Try it Online!

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

QML如何正确使用动态的topmargin

问题

答案1

如何在语言为韩文或中文时更改特定 UI（QML）的字体？

如何在PyQt5中更改光标大小？

在PyQt6上绘图。

实现 QTableView 的部分移动正确。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论