组件/数据展示引入于 1.2.0

ECodeView 代码展示

import EUI 1.0

示例与代码

代码高亮与复制

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECodeView { width: Math.min(420, parent ? parent.width : 420) height: 160 code: "import EUI 1.0\n\nEButton {\n text: \"Hello\"\n}\n" }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

隐藏行号

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECodeView { width: Math.min(420, parent ? parent.width : 420) height: 160 code: "EInput {\n clearable: true\n}\n" showLineNumbers: false }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

隐藏复制按钮

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECodeView { width: Math.min(420, parent ? parent.width : 420) height: 160 code: "EFilePicker {\n mode: \"save\"\n}\n" showCopy: false }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

JavaScript 代码

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECodeView { width: Math.min(420, parent ? parent.width : 420) height: 160 code: "function sum(a, b) {\n return a + b\n}\n" language: "javascript" }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

纯文本展示

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECodeView { width: Math.min(420, parent ? parent.width : 420) height: 160 code: qsTr("<纯文本> & Unicode: 中文\n较长的文本行支持横向滚动。\n") language: "text" }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

backgroundColorcolor

代码视图背景颜色。

默认值ETheme.dark ? "#1D2129" : "#F6F8FC"

codestring

用于展示与完整复制的原始代码文本。

默认值""

enabledbool

是否允许交互；false 时控件禁用。

默认值true

fontfont

字体配置，控制字体、字号及文字样式。

常用字段：
family、pixelSize、pointSize
bold、italic、weight
underline、strikeout
letterSpacing、wordSpacing

默认值Qt.font({ pixelSize: 16 })

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

highlightbool

启用 QML / JavaScript 语法高亮。

默认值true

languagestring

高亮语言：qml、javascript / js；其他值使用纯文本颜色。

默认值"qml"

lineHeightreal

代码行高，单位为像素，最小为字体像素大小。

默认值22

showCopybool

显示完整源码复制按钮。

默认值true

showLineNumbersbool

显示行号栏。

默认值true

syntaxColorsvar

按 plain、keyword、string 等角色配置高亮颜色。

默认值

展开默认值

({ plain: EPaletteManager.ThemePalette.textPrimary(ETheme.dark), type: ETheme.dark ? "#71CED1" : "#087F8C", property: ETheme.dark ? "#89B4FA" : "#315EB5", keyword: ETheme.dark ? "#C4A7E7" : "#8255AD", literal: ETheme.dark ? "#C4A7E7" : "#8255AD", string: ETheme.dark ? "#A6D3A0" : "#27775B", number: ETheme.dark ? "#E6B673" : "#A15C21", member: ETheme.dark ? "#89B4FA" : "#315EB5", comment: EPaletteManager.ThemePalette.textSecondary(ETheme.dark), punctuation: EPaletteManager.ThemePalette.textSecondary(ETheme.dark) })

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

contentHeightreal只读

完整代码的内容高度，包含上下间距。

默认值由运行时计算

lineCountint只读

原始代码行数。

默认值由运行时计算

selectedTextstring只读

当前选中的代码文本。

默认值由运行时计算

textItemalias只读

只读文本选择与显示对象。

默认值由运行时计算

viewportalias只读

代码滚动视口，可读取和设置滚动位置。

默认值由运行时计算

信号

签名作用

copied(string text)

复制完成后触发，text 为复制的内容。

方法

签名作用

copy()

复制当前展示的代码到剪贴板。