DtkDeclarative
DTK Declarative module
载入中...
搜索中...
未找到
FloatingPanel类 参考

提供一种浮动效果的背景面板. 更多...

类 FloatingPanel 继承关系图:
Control

属性

DPalette backgroundColor
 backgroundColor 属性用于控制背景颜色。
 
DPalette dropShadowColor
 dropShadowColor 属性用于控制阴影部分的颜色。
 
DPalette outsideBorderColor
 
DPalette insideBorderColor
 
int radius
 radius 属性控制 FloatingPanel 背景的圆角大小,默认情况下为该值为 14。
 
int blurRadius
 blurRadius 属性控制 FloatingPanel 的模糊系数,默认情况下为该值为 14。
 

详细描述

提供一种浮动效果的背景面板.

FloatingPanel 是浮动消息(FloatingMessage)、浮动工具栏、内嵌菜单(Menu)等等控件的通用背景。 FloatingPanel 自带浮动的效果,能够使其内部控件呈现出浮动在应用内部的效果。 FloatingPanel 支持颜色和效果的控制,即它能够在外部控制背景颜色、边框颜色、圆角大小和模糊系数等等。 其使用方式如下代码:

contentItem: RowLayout {
spacing: 20
DciIcon { name: "entry_voice"; sourceSize: Qt.size(16, 16)}
DciIcon { name: "entry_voice"; sourceSize: Qt.size(16, 16)}
DciIcon { name: "entry_voice"; sourceSize: Qt.size(16, 16)}
RowLayout {
spacing: 12
id: toolBarSlider
property int totalValue: 7*60 + 56
property int currentValue: 3 * 60 + 25
Layout.preferredWidth: 230
highlightedPassedGroove: true
handleType: Slider.HandleType.NoArrowHorizontal
from: 0
to: msToValue(totalValue)
value: msToValue(currentValue)
stepSize: 1
function msToValue(ms) { return ms}
function msToText(ms) {
return String("%1:%2").arg(Math.floor(ms / 60)).arg(ms % 60)
}
}
Text {
Layout.preferredWidth: 50
text: String("%1/%2").arg(toolBarSlider.msToText(toolBarSlider.value)).arg(toolBarSlider.msToText(toolBarSlider.to))
}
}
DciIcon { name: "entry_voice"; sourceSize: Qt.size(16, 16)}
DciIcon { name: "entry_voice"; sourceSize: Qt.size(16, 16)}
}
}
提供一种浮动效果的背景面板.
Definition FloatingPanel.qml:7
提供一种行云设计风格的滑动条控件.
Definition Slider.qml:9

效果如下图所示:

属性说明

◆ backgroundColor

Palette FloatingPanel::backgroundColor
read

backgroundColor 属性用于控制背景颜色。

参见
Palette

◆ dropShadowColor

Palette FloatingPanel::dropShadowColor
read

dropShadowColor 属性用于控制阴影部分的颜色。

参见
Palette

该类的文档由以下文件生成: