如何使图像填充qml控件按钮
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使图像填充qml控件按钮相关的知识,希望对你有一定的参考价值。
我想要图标来填充Button
。这是代码:
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
Window{
id: root
title: "settings"
flags: Qt.Dialog
minimumHeight: 700
minimumWidth: 700
maximumHeight: 700
maximumWidth: 700
ColumnLayout{
id: columnLayout
anchors.fill: parent
RowLayout{
Button{
iconSource: "images/1x1.png"
checkable: true
checked: true
Layout.minimumWidth: 100
Layout.minimumHeight: 100
}
Button{
iconSource: "images/1x2.png"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
}
Button{
iconSource: "images/2x1.png"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
}
Button{
iconSource: "images/2x2.png"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
}
}
Rectangle{
visible: true
implicitHeight: 600
implicitWidth: 700
color: "red"
}
}
}
按钮大小为100 * 100像素,但图像尺寸要低得多。如何使图像像按钮一样大
如果你不介意使用私有API,那就是padding属性:
import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Item {
width: 200
height: 200
Button {
iconSource: "http://www.sfweekly.com/imager/the-exhikittenist-cattown-cat-pics-and-m/b/square/3069319/58c8/WikiCat.jpg"
anchors.centerIn: parent
style: ButtonStyle {
padding {
left: 0
right: 0
top: 0
bottom: 0
}
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: parent.pressed ? 0.5 : 0
}
}
}
看看ButtonStyle.qml
:
/*! The padding between the background and the label components. */
padding {
top: 4
left: 4
right: control.menu !== null ? Math.round(TextSingleton.implicitHeight * 0.5) : 4
bottom: 4
}
这实际上取决于你想要达到的目标。 IMO,这里有三个解决方案:
1)如果你需要一个图像作为按钮,只需使用Image
和MouseArea
填充它:
Image {
source: "http://images5.fanpop.com/image/photos/27500000/Cool-beans-azkaban-27533920-200-200.gif"
MouseArea {
anchors.fill: parent
onClicked: {
console.info("image clicked!")
}
}
}
2)如果要使用带图像的按钮,请重新定义label
的style
属性,如下所示:
Button{
width: 200
height: 200
style: ButtonStyle {
label: Image {
source: "http://images5.fanpop.com/image/photos/27500000/Cool-beans-azkaban-27533920-200-200.gif"
fillMode: Image.PreserveAspectFit // ensure it fits
}
}
}
这样,您可以在Button
中放置任何图像,并且边框的小填充允许您查看按钮被单击/选中的时间。请注意,通过使用ButtonStyle
,您将失去平台风格。
3)如果你真的想使用Button
并让它看起来像Image
,请遵循Mitch提出的智能方法。
如果您想要图像将填充按钮:
Button{
Image {
anchors.fill: parent
source: "images/1x1.png"
fillMode: Image.Tile
}
checkable: true
checked: true
Layout.minimumWidth: 100
Layout.minimumHeight: 100
}
或者你需要的其他fillMode
我在这里说过同样的问题。非常感谢不同的解决方案。但@folibis建议的那个最终给了一个平台(在Windows 10中是平的)按钮和我的svg图像。但它确实可以很好地工作。原因有三:1。图像与按钮紧密贴合。为了像图标一样,我使用了FLAT组合框。 2.当我们在按钮上寻找简单的标志性图像时,fillmode tile是不合适的。我已将其更改为PreserveASpectFit。 3.可检查和检查的属性不适用于普通操作按钮。但问题的代码示例肯定有这些。请在这里查看我的代码。可能有用。再次感谢@Folibis
Button {
id: nextButton
GroupBox {
flat: true
anchors.fill: parent
Image {
anchors.fill: parent
source: "qrc:/next.svg"
fillMode: Image.PreserveAspectFit
}
}
Layout.minimumWidth: 100
Layout.minimumHeight: 100
}
以上是关于如何使图像填充qml控件按钮的主要内容,如果未能解决你的问题,请参考以下文章