# QtJambi 中的自定義小部件 > 原文： [http://zetcode.com/gui/qtjambi/customwidget/](http://zetcode.com/gui/qtjambi/customwidget/) 在 QtJambi 編程教程的這一部分中，我們將創建一個自定義小部件。 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 程序員必須自己創建此類小部件。 他們使用工具箱提供的繪圖工具來完成此任務。 有兩種可能性。 程序員可以修改或增強現有的小部件。 或者，他可以從頭開始創建自定義窗口小部件。 ## 刻錄小部件 在下一個示例中，我們將創建一個自定義刻錄小部件。 可以在 Nero 或 K3B 之類的應用中看到此小部件。 該小部件將從頭開始創建。 `Burning.java` ```java package com.zetcode; import com.trolltech.qt.core.QPointF; import com.trolltech.qt.core.QRectF; import com.trolltech.qt.gui.QBrush; import com.trolltech.qt.gui.QColor; import com.trolltech.qt.gui.QFont; import com.trolltech.qt.gui.QFontMetrics; import com.trolltech.qt.gui.QLineF; import com.trolltech.qt.gui.QPaintEvent; import com.trolltech.qt.gui.QPainter; import com.trolltech.qt.gui.QWidget; public class Burning extends QWidget { private final int PANEL_HEIGHT = 30; private final int DISTANCE = 19; private final int LINE_WIDTH = 5; private final int DIVISIONS = 10; private final float FULL_CAPACITY = 700f; private final float MAX_CAPACITY = 750f; private final QColor redColor = new QColor(255, 175, 175); private final QColor yellowColor = new QColor(255, 255, 184); private QWidget parent; private String num[] = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; public Burning(QWidget parent) { super(parent); this.parent = parent; setMinimumHeight(PANEL_HEIGHT); } @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawWidget(painter); painter.end(); } protected void drawWidget(QPainter painter) { JambiApp burn = (JambiApp) parent; float width = size().width(); float slid_width = burn.getCurrentWidth(); float step = width / DIVISIONS; float till = (width / MAX_CAPACITY) * slid_width; float full = (width / MAX_CAPACITY) * FULL_CAPACITY; if (slid_width > FULL_CAPACITY) { painter.setPen(yellowColor); painter.setBrush(yellowColor); painter.drawRect(new QRectF(0, 0, full, PANEL_HEIGHT)); painter.setPen(redColor); painter.setBrush(redColor); painter.drawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT)); } else { if (slid_width > 0) { painter.setPen(yellowColor); painter.setBrush(yellowColor); painter.drawRect(new QRectF(0, 0, till, PANEL_HEIGHT)); } } painter.setPen(new QColor(90, 90, 90)); painter.setBrush(QBrush.NoBrush); painter.drawRect(0, 0, size().width()-1, PANEL_HEIGHT-1); QFont newFont = font(); newFont.setPointSize(7); painter.setFont(newFont); for (int i = 1; i <= num.length; i++) { painter.drawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH)); QFontMetrics metrics = new QFontMetrics(newFont); int w = metrics.width(num[i-1]); painter.drawText(new QPointF(i*step-w/2, DISTANCE), num[i-1]); } } } ``` 在這個文件中，我們創建了刻錄小部件。 ```java public class Burning extends QWidget { ``` 自定義窗口小部件基于`QWidget`小部件。 ```java private final int PANEL_HEIGHT = 30; private final int DISTANCE = 19; private final int LINE_WIDTH = 5; private final int DIVISIONS = 10; private final float FULL_CAPACITY = 700f; private final float MAX_CAPACITY = 750f; ``` 這些是重要的常數。 `PANEL_HEIGHT`定義自定義窗口小部件的高度。 `DISTANCE`是比例尺上的數字與其父邊框頂部之間的距離。 `LINE_WIDTH`是垂直線的寬度。 `DIVISIONS`是秤的數量。 `FULL_CAPACITY`是媒體的容量。 達到目標后，就會發生過度刻錄。 用紅色顯示。 `MAX_CAPACITY`是介質的最大容量。 ```java private String num[] = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; ``` 我們使用這些數字來構建刻錄小部件的比例。 ```java @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawWidget(painter); painter.end(); } ``` 自定義窗口小部件的圖形委托給`drawWidget()`方法。 ```java JambiApp burn = (JambiApp) parent; ``` 我們檢索對父窗口小部件的引用。 ```java float slid_width = burn.getCurrentWidth(); ``` 我們使用它來獲取當前選定的滑塊值。 ```java float width = size().width(); ``` 我們得到小部件的寬度。 自定義窗口小部件的寬度是動態的。 用戶可以調整大小。 ```java float till = (width / MAX_CAPACITY) * slid_width; float full = (width / MAX_CAPACITY) * FULL_CAPACITY; ``` 我們使用`width`變量進行轉換。 在比例尺值和自定義小部件的度量之間。 請注意，我們使用浮點值。 我們在繪圖中獲得了更高的精度。 ```java painter.setPen(redColor); painter.setBrush(redColor); painter.drawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT)); ``` 這三行畫出紅色矩形，表示過度燃燒。 ```java painter.drawRect(0, 0, size().width()-1, PANEL_HEIGHT-1); ``` 這是小部件的周長。 外部矩形。 ```java painter.drawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH)); ``` 在這里，我們畫出小的垂直線。 ```java int w = metrics.width(num[i-1]); painter.drawText(new QPointF(i*step-w/2, 19), num[i-1]); ``` 在這里，我們繪制刻度的數字。 為了精確定位數字，我們必須獲得字符串的寬度。 `JambiApp.java` ```java package com.zetcode; import com.trolltech.qt.core.Qt; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QFrame; import com.trolltech.qt.gui.QHBoxLayout; import com.trolltech.qt.gui.QSlider; import com.trolltech.qt.gui.QVBoxLayout; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * In this program, we create * a custom widget * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QFrame { private final int MAX_CAPACITY = 750; QSlider slider; QWidget widget; int cur_width; public JambiApp() { setWindowTitle("The Burning Widget"); initUI(); resize(370, 200); move(300, 300); show(); } private void initUI() { slider = new QSlider(Qt.Orientation.Horizontal , this); slider.setMaximum(MAX_CAPACITY); slider.setGeometry(50, 50, 130, 30); slider.valueChanged.connect(this, "valueChanged(int)"); QVBoxLayout vbox = new QVBoxLayout(this); QHBoxLayout hbox = new QHBoxLayout(); vbox.addStretch(1); widget = new Burning(this); hbox.addWidget(widget, 0); vbox.addLayout(hbox); setLayout(vbox); } public void valueChanged(int val) { cur_width = val; widget.repaint(); } public int getCurrentWidth() { return cur_width; } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 這是主文件。 在這里，我們創建滑塊小部件并使用我們的自定義小部件。 ```java widget = new Burning(this); hbox.addWidget(widget, 0); ``` 我們創建了刻錄小部件的實例，并將其添加到水平框中。 ```java public void valueChanged(int val) { cur_width = val; widget.repaint(); } ``` 當滑塊的值更改時，我們將其存儲在`cur_width`變量中，然后重新繪制自定義窗口小部件。 ```java public int getCurrentWidth() { return cur_width; } ``` 定制小部件調用此方法以獲取實際的滑塊值。  圖：刻錄小部件 在 QtJambi 教程的這一部分中，我們演示了如何創建自定義窗口小部件。