当前位置: 代码迷 >> 综合 >> Qml组件的隐式(implicit)尺寸设置
  详细解决方案

Qml组件的隐式(implicit)尺寸设置

热度:9   发布时间:2023-12-12 18:00:15.0

介绍

  • 使用隐式尺寸可以适配组件中的内容,兼容不同长度
  • Qml隐式尺寸属性:implicitHeight : real/ implicitWidth : real
  • 若组件没有定义宽高,则该项可以来指定其宽高,隐式尺寸根据内容定义组件的尺寸(默认值是0)。
  • Text和Image不能重写其隐式尺寸。

使用1-Text组件间接使用

Text组件内部不支持使用隐式尺寸。

Item中包含Text,可以根据Text中的内容来动态改变组件的尺寸。程序如下:

Item {id:root//指定组件的宽高,根据Text的隐式尺寸来确定(12和6是比较合理美观的数值)implicitWidth: text1.implicitWidth+12implicitHeight: text1.implicitHeight+6//设置背景色,已进行区分Rectangle{anchors.fill: parentcolor: "lightgreen"radius: 3}//Text组件Text {id: text1text: qsTr("测试11122")//设置文字样式font.pixelSize: 20//设置文字居中显示anchors{horizontalCenter: parent.horizontalCenterverticalCenter: parent.verticalCentermargins: 5}}
}

结果如下图,文字居中显示在组件中,组件的尺寸根据文字内容变化

使用2-Button组件使用

Button组件的隐式尺寸属性会根据组件中的内容长度变化,默认最小宽=100,最小高=40,程序如下:

Button{id:btn1//默认宽度=100,implicitWidth会根据显示内容的长度自动调整//默认高度=40,设置24比较美观implicitHeight: 24text: "确定111111111111111111111"//设置四边间距topPadding: 0bottomPadding: 0leftPadding: 6rightPadding:6//设置背景色background: Rectangle{color: "lightgreen"}
}

结果如下:

  相关解决方案