如何删除 QTabWidget 选项卡内的填充?
How to remove padding inside QTabWidget tabs?
从图中可以看出,QTabWidget 中的文本编辑器周围有一个边框。
我这样设置样式表:
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")
如果我将边距设置为负数,它会有所帮助,但事情看起来有点不合适,而且我不想硬编码可能只适用于我的系统但不适用于其他系统的值。
代码如下:
import os, sys
from PySide2 import QtGui, QtCore, QtWidgets, QtWebEngineWidgets, QtWebChannel
# monaco editor index html file
file = "./index.html"
tab = QtWidgets.QTabWidget()
bgcolor = tab.palette().color(QtGui.QPalette.Background)
editor = QtWebEngineWidgets.QWebEngineView()
editor.load(QtCore.QUrl.fromLocalFile(file))
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")
tab.addTab(editor, "python1")
tab.show()
边框似乎来自显示的 HTML 页面。
这是 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="min-height: calc(100vh - 40px); margin: 0; padding: 0; box-sizing: border-box; border: 0px"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'python',
fontFamily:"Verdana",
fontSize: "20px",
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: true,
readOnly: false,
formatOnPaste: true,
insertSpaces: true,
automaticLayout: true,
theme: "vs-dark"
});
});
</script>
</body>
</html>
填充是在 HTML 中生成的,可以使用 css 删除:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style >
#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
<div id="container"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'python',
fontFamily:"Verdana",
fontSize: "20px",
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: true,
readOnly: false,
formatOnPaste: true,
insertSpaces: true,
automaticLayout: true,
theme: "vs-dark"
});
});
</script>
</body>
</html>
从图中可以看出,QTabWidget 中的文本编辑器周围有一个边框。
我这样设置样式表:
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")
如果我将边距设置为负数,它会有所帮助,但事情看起来有点不合适,而且我不想硬编码可能只适用于我的系统但不适用于其他系统的值。
代码如下:
import os, sys
from PySide2 import QtGui, QtCore, QtWidgets, QtWebEngineWidgets, QtWebChannel
# monaco editor index html file
file = "./index.html"
tab = QtWidgets.QTabWidget()
bgcolor = tab.palette().color(QtGui.QPalette.Background)
editor = QtWebEngineWidgets.QWebEngineView()
editor.load(QtCore.QUrl.fromLocalFile(file))
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")
tab.addTab(editor, "python1")
tab.show()
边框似乎来自显示的 HTML 页面。 这是 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="min-height: calc(100vh - 40px); margin: 0; padding: 0; box-sizing: border-box; border: 0px"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'python',
fontFamily:"Verdana",
fontSize: "20px",
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: true,
readOnly: false,
formatOnPaste: true,
insertSpaces: true,
automaticLayout: true,
theme: "vs-dark"
});
});
</script>
</body>
</html>
填充是在 HTML 中生成的,可以使用 css 删除:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style >
#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
<div id="container"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'python',
fontFamily:"Verdana",
fontSize: "20px",
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: true,
readOnly: false,
formatOnPaste: true,
insertSpaces: true,
automaticLayout: true,
theme: "vs-dark"
});
});
</script>
</body>
</html>