# Qyoto 中的自定義小部件 > 原文： [http://zetcode.com/gui/csharpqyoto/customwidget/](http://zetcode.com/gui/csharpqyoto/customwidget/) 在 Qyoto C# 編程教程的這一部分中，我們將展示如何創建自定義窗口小部件。 大多數工具包通常僅提供最常用的窗口小部件，例如按鈕，文本窗口小部件，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 程序員必須自己創建此類小部件。 他們使用工具箱提供的繪圖工具來完成此任務。 有兩種可能性。 程序員可以修改或增強現有的小部件。 或者，他可以從頭開始創建自定義窗口小部件。 在本章中，我們將創建兩個自定義窗口小部件。 刻錄小部件和 Led 小部件。 ## 刻錄小部件 在下一個示例中，我們將創建一個自定義刻錄小部件。 可以在 Nero 或 K3B 之類的應用中看到此小部件。 該小部件將從頭開始創建。 `burning.cs` ```cs using System; using QtCore; using QtGui; public class Burning : QWidget { const int PANEL_HEIGHT = 30; const int DISTANCE = 19; const int LINE_WIDTH = 5; const int DIVISIONS = 10; const float FULL_CAPACITY = 700f; const float MAX_CAPACITY = 750f; QColor redColor = new QColor(255, 175, 175); QColor yellowColor = new QColor(255, 255, 184); QWidget parent; String[] num = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; public Burning(QWidget parent) { this.parent = parent; MinimumHeight = PANEL_HEIGHT; } protected override void OnPaintEvent(QPaintEvent pe) { QPainter ptr = new QPainter(this); DrawWidget(ptr); ptr.End(); } void DrawWidget(QPainter ptr) { QyotoApp burn = (QyotoApp) parent; float slid_width = burn.GetCurrentWidth(); float width = Size.Width; float step = width / DIVISIONS; float till = (width / MAX_CAPACITY) * slid_width; float full = (width / MAX_CAPACITY) * FULL_CAPACITY; if (slid_width > FULL_CAPACITY) { ptr.Pen = yellowColor; ptr.Brush = yellowColor; ptr.DrawRect(new QRectF(0, 0, full, PANEL_HEIGHT)); ptr.Pen = redColor; ptr.Brush = redColor; ptr.DrawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT)); } else { if (slid_width > 0) { ptr.Pen = yellowColor; ptr.Brush = yellowColor; ptr.DrawRect(new QRectF(0, 0, till, PANEL_HEIGHT)); } } ptr.Pen = new QColor(90, 90, 90); ptr.SetBrush(BrushStyle.NoBrush); ptr.DrawRect(0, 0, Size.Width-1, PANEL_HEIGHT-1); QFont newFont = ptr.Font; newFont.PointSize = 7; ptr.Font = newFont; QFontMetrics metrics = new QFontMetrics(newFont); for (int i = 1; i <= num.Length; i++) { ptr.DrawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH)); int w = metrics.Width(num[i-1]); ptr.DrawText(new QPointF(i*step-w/2, DISTANCE), num[i-1]); } } } ``` 在這個文件中，我們創建了刻錄小部件。 ```cs public class Burning : QWidget { ... ``` 自定義窗口小部件基于`QWidget`類。 ```cs const int PANEL_HEIGHT = 30; const int DISTANCE = 19; const int LINE_WIDTH = 5; const int DIVISIONS = 10; const float FULL_CAPACITY = 700f; const float MAX_CAPACITY = 750f; ``` 這些是重要的常數。 `PANEL_HEIGHT`定義自定義窗口小部件的高度。 `DISTANCE`是比例尺上的數字與其父邊框頂部之間的距離。 `LINE_WIDTH`是垂直線的寬度。 `DIVISIONS`是秤的數量。 `FULL_CAPACITY`是媒體的容量。 達到目標后，就會發生過度刻錄。 這通過紅色可視化。 `MAX_CAPACITY`是介質的最大容量。 ```cs String[] num = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; ``` 我們使用這些數字來構建刻錄小部件的比例。 ```cs protected override void OnPaintEvent(QPaintEvent pe) { QPainter ptr = new QPainter(this); DrawWidget(ptr); ptr.End(); } ``` 自定義窗口小部件的圖形委托給`DrawWidget()`方法。 ```cs QyotoApp burn = (QyotoApp) parent; ``` 我們檢索對父窗口小部件的引用。 ```cs float slid_width = burn.GetCurrentWidth(); ``` 我們使用它來獲取當前選定的滑塊值。 ```cs float width = Size.Width; ``` 我們得到小部件的寬度。 自定義窗口小部件的寬度是動態的。 用戶可以調整大小。 ```cs float till = (width / MAX_CAPACITY) * slid_width; float full = (width / MAX_CAPACITY) * FULL_CAPACITY; ``` 我們使用`width`變量進行轉換。 在比例尺值和自定義小部件的度量之間。 請注意，我們使用浮點值。 我們在繪圖中獲得了更高的精度。 ```cs ptr.Pen = redColor; ptr.Brush = redColor; ptr.DrawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT)); ``` 這三行畫出紅色矩形，表示過度燃燒。 ```cs ptr.DrawRect(0, 0, Size.Width-1, PANEL_HEIGHT-1); ``` 這是小部件的周長。 外部矩形。 ```cs ptr.DrawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH)); ``` 在這里，我們畫出小的垂直線。 ```cs QFontMetrics metrics = new QFontMetrics(newFont); ... int w = metrics.Width(num[i-1]); ptr.DrawText(new QPointF(i*step-w/2, DISTANCE), num[i-1]); ``` 在這里，我們在比例尺上繪制數字。 為了精確定位數字，我們必須獲得字符串的寬度。 `main.cs` ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * In this program, we create * a custom Burning widget. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { const int MAX_CAPACITY = 750; QSlider slider; QWidget widget; int cur_width; public QyotoApp() { WindowTitle = "The Burning Widget"; InitUI(); Resize(370, 200); Move(300, 300); Show(); } void InitUI() { slider = new QSlider(Qt.Orientation.Horizontal , this); slider.Maximum = MAX_CAPACITY; slider.SetGeometry(50, 50, 130, 30); slider.ValueChanged += OnValueChanged; QVBoxLayout vbox = new QVBoxLayout(this); QHBoxLayout hbox = new QHBoxLayout(); vbox.AddStretch(1); widget = new Burning(this); hbox.AddWidget(widget, 0); vbox.AddLayout(hbox); Layout = vbox; } [Q_SLOT] void OnValueChanged(int val) { cur_width = val; widget.Repaint(); } public int GetCurrentWidth() { return cur_width; } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 這是主文件。 在這里，我們創建滑塊小部件并使用我們的自定義小部件。 ```cs widget = new Burning(this); hbox.AddWidget(widget, 0); ``` 我們創建了刻錄小部件的實例，并將其添加到水平框中。 ```cs [Q_SLOT] void OnValueChanged(int val) { cur_width = val; widget.Repaint(); } ``` 當滑塊的值更改時，我們將其存儲在`cur_width`變量中，然后重新繪制自定義窗口小部件。 ```cs public int GetCurrentWidth() { return cur_width; } ``` 定制小部件調用此方法以獲取實際的滑塊值。  圖：刻錄小部件 ## Led 小部件 Led 小部件是一個燈泡，可以將其設置為不同的顏色。 在我們的例子中是紅色，綠色，橙色和黑色。 該自定義窗口小部件僅使用 SVG 圖像創建。 有四個 SVG 圖像。 每個用于 Led 小部件的一種狀態。 要編譯該示例，我們需要引用`qyoto-qtsvg.dll`庫。 例如，在我們的系統上，我們將`-r`：`/usr/local/lib/mono/qyoto/qyoto-qtsvg.dll`添加到了編譯選項。 `led.cs` ```cs using System; using QtCore; using QtGui; using QtSvg; public class Led : QWidget { string[] cols; int col; public Led(QWidget parent) { const int GREEN = 1; col = GREEN; SetMinimumSize(50, 50); SetMaximumSize(50, 50); cols = new string[] { "red.svg", "green.svg", "orange.svg", "black.svg" }; } public void SetColour(int newColour) { col = newColour; Update(); } protected override void OnPaintEvent(QPaintEvent e) { QPainter ptr = new QPainter(this); DrawCustomWidget(ptr); ptr.End(); } void DrawCustomWidget(QPainter ptr) { QSvgRenderer srnd = new QSvgRenderer(); srnd.Load(cols[col]); srnd.Render(ptr); } } ``` 在`led.cs`類中，我們構建了自定義窗口小部件。 ```cs const int GREEN = 1; col = GREEN; ``` 當一切正常時，`GREEN`常量指示 Led 小部件的狀態。 顏色變量定義窗口小部件的當前狀態。 ```cs SetMinimumSize(50, 50); SetMaximumSize(50, 50); ``` 這兩條線強制窗口小部件具有恒定的大小。 SVG 圖像的大小為`50x50`。 ```cs cols = new string[] { "red.svg", "green.svg", "orange.svg", "black.svg" }; ``` 我們將 SVG 圖像文件名存儲在`cols`數組中。 ```cs public void SetColour(int newColour) { col = newColour; Update(); } ``` `SetColour()`方法將`col`變量設置為新值。 我們調用`Update()`方法重繪 Led 小部件以反映新狀態。 ```cs void DrawCustomWidget(QPainter ptr) { QSvgRenderer srnd = new QSvgRenderer(); srnd.Load(cols[col]); srnd.Render(ptr); } ``` 在`DrawCustomWidget()`方法中，我們使用`QSvgRenderer`類顯示 SVG 圖像。 `main.cs` ```cs using Qyoto; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * This program creates a custom Led * widget. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { const int RED = 0; const int GREEN = 1; const int ORANGE = 2; const int BLACK = 3; Led led; public QyotoApp() { WindowTitle = "Led widget"; SetupUI(); Resize(250, 150); Move(300, 300); Show(); } public void SetupUI() { QVBoxLayout vbox = new QVBoxLayout(); QHBoxLayout hbox = new QHBoxLayout(); led = new Led(this); hbox.AddWidget(led); vbox.AddStretch(1); vbox.AddLayout(hbox); vbox.AddStretch(1); QHBoxLayout hbox2 = new QHBoxLayout(); QPushButton pb1 = new QPushButton("Normal", this); QPushButton pb2 = new QPushButton("Warning", this); QPushButton pb3 = new QPushButton("Emergency", this); QPushButton pb4 = new QPushButton("Off", this); hbox2.AddWidget(pb1); hbox2.AddWidget(pb2); hbox2.AddWidget(pb3); hbox2.AddWidget(pb4); vbox.AddLayout(hbox2); Connect(pb1, SIGNAL("clicked()"), this, SLOT("OnClicked()")); Connect(pb2, SIGNAL("clicked()"), this, SLOT("OnClicked()")); Connect(pb3, SIGNAL("clicked()"), this, SLOT("OnClicked()")); Connect(pb4, SIGNAL("clicked()"), this, SLOT("OnClicked()")); Layout = vbox; } [Q_SLOT] public void OnClicked() { QPushButton sender = (QPushButton) this.Sender(); string text = sender.Text; if (text == "Normal") { led.SetColour(GREEN); } else if (text == "Warning") { led.SetColour(ORANGE); } else if (text == "Emergency") { led.SetColour(RED); } else if (text == "Off") { led.SetColour(BLACK); } } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 這是`main.cs`文件。 我們連續有四個按鈕，窗口中央有一個 Led 小部件。 這四個按鈕控制 Led 小部件的狀態。 Led 小部件有四個狀態。 正常，警告，緊急和關閉。 ```cs led = new Led(this); hbox.AddWidget(led); ``` 我們創建 Led 小部件的實例并將其放入水平框中。 ```cs else if ( text == "Warning") { led.SetColour(ORANGE); } ``` 如果單擊警告按鈕，則 LED 小部件的顏色將變為橙色。 更準確地說，將加載并顯示一個新的橙色 SVG 圖像。  圖：Led 小部件顯示“關閉”狀態 在 Qyoto C# 教程的這一部分中，我們演示了如何創建自定義窗口小部件。