FluentUI/example/qml/component/CodeExpander.qml

146 lines
4.4 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-04-05 17:48:17 +08:00
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
FluExpander{
2023-06-08 13:55:25 +08:00
id:control
2023-04-05 17:48:17 +08:00
property string code: ""
headerText: "Source"
contentHeight:content.height
2023-06-08 13:55:25 +08:00
focus: false
2023-04-05 17:48:17 +08:00
FluMultilineTextBox{
id:content
width:parent.width
2023-04-06 19:27:37 +08:00
text:highlightQmlCode(code)
textFormat: FluMultilineTextBox.RichText
2023-04-06 17:32:21 +08:00
KeyNavigation.priority: KeyNavigation.BeforeItem
2023-06-08 13:55:25 +08:00
enabled: false
2023-04-05 17:48:17 +08:00
background:Rectangle{
2023-04-06 17:32:21 +08:00
radius: 4
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
2023-05-25 17:00:48 +08:00
Behavior on color{
ColorAnimation {
duration: 300
}
}
2023-04-05 17:48:17 +08:00
}
}
FluIconButton{
iconSource:FluentIcons.Copy
anchors{
right: parent.right
top: parent.top
rightMargin: 5
topMargin: 5
}
2023-06-08 13:55:25 +08:00
onActiveFocusChanged: {
if(activeFocus){
control.expand = true
}
}
2023-04-05 17:48:17 +08:00
onClicked:{
2023-04-27 17:29:39 +08:00
FluTools.clipText(content.text)
2023-04-05 17:48:17 +08:00
showSuccess("复制成功")
}
}
2023-04-06 19:27:37 +08:00
function htmlEncode(e){
2023-05-25 17:00:48 +08:00
var i,s;
for(i in s={
"&":/&/g,//""//":/"/g,"'":/'/g,
"<":/</g,">":/>/g,"<br/>":/\n/g,
" ":/ /g," ":/\t/g
})e=e.replace(s[i],i);
return e;
2023-04-06 19:27:37 +08:00
}
function highlightQmlCode(code) {
2023-05-25 17:00:48 +08:00
// 定义 QML 关键字列表
var qmlKeywords = [
"FluTextButton",
"FluAppBar",
"FluAutoSuggestBox",
"FluBadge",
"FluButton",
"FluCalendarPicker",
"FluCalendarView",
"FluCarousel",
"FluCheckBox",
"FluColorPicker",
"FluColorView",
"FluComboBox",
"FluContentDialog",
"FluContentPage",
"FluDatePicker",
"FluDivider",
"FluDropDownButton",
"FluExpander",
"FluFilledButton",
"FluFlipView",
"FluFocusRectangle",
"FluIcon",
"FluIconButton",
"FluInfoBar",
"FluItem",
"FluMediaPlayer",
"FluMenu",
"FluMenuItem",
"FluMultilineTextBox",
"FluNavigationView",
"FluObject",
"FluPaneItem",
"FluPaneItemExpander",
"FluPaneItemHeader",
"FluPaneItemSeparator",
"FluPivot",
"FluPivotItem",
"FluProgressBar",
"FluProgressRing",
"FluRadioButton",
"FluRectangle",
"FluScrollablePage",
"FluScrollBar",
"FluShadow",
"FluSlider",
"FluTabView",
"FluText",
"FluTextArea",
"FluTextBox",
"FluTextBoxBackground",
"FluTextBoxMenu",
"FluTextButton",
"FluTextFiled",
"FluTimePicker",
"FluToggleSwitch",
"FluTooltip",
"FluTreeView",
"FluWindow",
"FluWindowResize",
"FluToggleButton",
"FluTableView",
"FluColors",
"FluTheme",
"FluStatusView",
"FluRatingControl",
"FluPasswordBox",
"FluBreadcrumbBar",
"FluCopyableText",
"FluAcrylic"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");
return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
2023-04-06 19:27:37 +08:00
}
2023-04-05 17:48:17 +08:00
}