Qyoto 中的小部件

{% raw %}

Qyoto 中的小部件

原文： http://zetcode.com/gui/csharpqyoto/widgets/

在 Qyoto C# 编程教程的这一部分中，我们将介绍 Qyoto 小部件。

小部件是 GUI 应用的基本构建块。多年来，几个小部件已成为所有 OS 平台上所有工具包中的标准。例如，按钮，复选框或滚动条。 Qyoto 有一组丰富的小部件，可以满足大多数编程需求。可以将更多专门的窗口小部件创建为自定义窗口小部件。

`QCheckBox`

QCheckBox是具有两种状态的窗口小部件：开和关。接通状态通过复选标记显示。它用来表示一些布尔属性。 QCheckBox小部件提供一个带有文本标签的复选框。

using System;
using QtCore;
using QtGui;
/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses QCheckBox
 * widget to show/hide the title
 * of the window.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */
public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "QCheckBox";
        SetupUI();
        Resize(250, 150);
        Move(300, 300);
        Show();
    }    
    public void SetupUI() 
    {       
        QCheckBox cb = new QCheckBox("Show Title", this);
        cb.Checked = true;
        cb.Move(50, 50);
        cb.StateChanged += ShowTitle;
    }
    [Q_SLOT]
    public void ShowTitle(int state) 
    {
        if (state == (int) CheckState.Checked) 
        {
            WindowTitle = "QCheckBox";
        } else {
            WindowTitle = "";
        }
    }
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

在我们的示例中，我们在窗口上放置了一个复选框。复选框显示/隐藏窗口的标题。

WindowTitle = "QCheckBox";

在构建窗口期间，我们为窗口设置标题。

QCheckBox cb = new QCheckBox("Show Title", this);

QCheckBox小部件已创建。构造器的第一个参数是其文本标签。第二个参数是父窗口小部件。

cb.Checked = true;

标题在应用的开始处可见。因此，也必须选中该复选框。我们通过Checked属性选中该复选框。

cb.StateChanged += ShowTitle;

我们将ShowTitle()方法插入StateChange事件。复选框的状态更改时，将发出事件。

[Q_SLOT]
public void ShowTitle(int state) 
{
   ...
}

方法定义之前带有Q_SLOT属性。此属性通知编译器有关自定义槽的信息。

if (state == (int) CheckState.Checked) 
{
    WindowTitle = "QCheckBox";
} else {
    WindowTitle = "";
}

根据复选框的状态，我们显示或隐藏窗口的标题。

281.md - 图1

图：QCheckBox

`QLabel`

QLabel小部件用于显示文本或图像。没有用户交互。

using System;
using QtCore;
using QtGui;
/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses QLabel to 
 * show lyrics of a song.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */
public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "You know I'm no Good";
        InitUI();
        Resize(250, 150);
        Move(300, 300);
        Show();
    }
    public void InitUI() 
    {
           string text = @"Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray
cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore
I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good";
        QLabel label = new QLabel(text, this);
        label.Font = new QFont("Purisa", 9);
        QVBoxLayout vbox = new QVBoxLayout();
        vbox.AddWidget(label);
        Layout = vbox;
    }
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

我们的示例在窗口中显示了歌曲的歌词。

string text = @"Meet you downstairs in the bar and heard
...

我们定义了多行文字。多行文本在 C# 语言中以@字符开头。

QLabel label = new QLabel(text, this);
label.Font = new QFont("Purisa", 9);

我们创建标签小部件并更改其字体。

QVBoxLayout vbox = new QVBoxLayout();
vbox.AddWidget(label);
Layout = vbox;

代替手动编码标签的位置和大小，我们将标签放入盒子布局中。

281.md - 图2

图：QLabel

`QLineEdit`

QLineEdit是一个小部件，允许输入和编辑单行纯文本。 QLineEdit小部件具有撤消/重做，剪切/粘贴和拖放功能。

using System;
using QtCore;
using QtGui;
/**
 * ZetCode Qyoto C# tutorial
 *
 * This program shows text
 * which is entered in a QLineEdit
 * widget in a QLabel widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */
public class QyotoApp : QWidget 
{
    QLabel label;
    public QyotoApp() 
    {
        WindowTitle = "QLineEdit";
        InitUI();
        Resize(250, 150);
        Move(400, 300);
        Show();
    }    
    public void InitUI() 
    {        
        label = new QLabel(this);
        QLineEdit edit = new QLineEdit(this);
        edit.TextChanged += OnChanged;
        edit.Move(60, 100);
        label.Move(60, 40);
    }
    [Q_SLOT]
    public void OnChanged(string text) 
    {
        label.Text = text;
        label.AdjustSize();
    }
    [STAThread]
    public static int Main(string[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

在我们的示例中，我们显示了两个小部件。行编辑和标签小部件。输入到行编辑中的文本显示在标签窗口小部件中。

QLineEdit edit = new QLineEdit(this);

QLineEdit小部件已创建。

edit.TextChanged += OnChanged;

当我们在行编辑中键入或删除某些文本时，将触发OnChanged()方法。该方法采用字符串参数。

[Q_SLOT]
public void OnChanged(string text) 
{
    label.Text = text;
    label.AdjustSize();
}

在OnChanged()方法中，我们将行编辑的内容设置为标签窗口小部件。 AdjustSize()方法确保所有文本都是可见的。

281.md - 图3

图：QLineEdit小部件

`ToggleButton`

切换按钮是设置了可检查标志的按钮。切换按钮是具有两种状态的按钮。已按下但未按下。通过单击可以在这两种状态之间切换。在某些情况下此功能非常合适。

using System;
using QtCore;
using QtGui;
/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses toggle buttons to
 * change the background colour of
 * a widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */
public class QyotoApp : QWidget 
{
    QWidget square;
    QColor col;
    QPushButton redb;
    QPushButton greenb;
    QPushButton blueb;
    public QyotoApp() 
    {
        WindowTitle = "Toggle buttons";
        InitUI();
        Resize(350, 240);
        Move(400, 300);
        Show();
    }
    private void InitUI() 
    {
        col = new QColor();
        redb = new QPushButton("Red", this);
        redb.Checkable = true;
        greenb = new QPushButton("Green", this);
        greenb.Checkable = true;
        blueb = new QPushButton("Blue", this);
        blueb.Checkable = true;
        redb.Toggled += OnToggled;
        greenb.Toggled += OnToggled;
        blueb.Toggled += OnToggled;
        square = new QWidget(this);
        square.StyleSheet = "QWidget { background-color: black }";
        redb.Move(30, 30);
        greenb.Move(30, 80);
        blueb.Move(30, 130);
        square.SetGeometry(150, 25, 150, 150);
    }
    [Q_SLOT]
    public void OnToggled(bool @checked) 
    {
        int red = col.Red;
        int green = col.Green;
        int blue = col.Blue;
        if (redb.Checked) 
        {
            red = 255;
        } else {
            red = 0;
        }
        if (greenb.Checked) 
        {
            green = 255;
        } else {
            green = 0;
        }
        if (blueb.Checked) 
        {
            blue = 255;
        } else {
            blue = 0;
        }
        col = new QColor(red, green, blue);
        string sheet = System.String.Format("QWidget {{ background-color: {0} }}", 
            col.Name());
        square.StyleSheet = sheet;
    }
    [STAThread]    
    public static int Main(string[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

在代码示例中，我们使用三个切换按钮来更改矩形小部件的颜色。

QWidget square;
QColor color;
QPushButton redb;
QPushButton greenb;
QPushButton blueb;

我们定义了五个对象。方形小部件是QWidget，它显示颜色。 color变量用于保存颜色值。这三个按钮是切换按钮，用于混合颜色值。

redb = new QPushButton("Red", this);
redb.Checkable = true;

我们创建一个QPushButton小部件。 Checkable属性将按钮更改为切换按钮。

redb.Toggled += OnToggled;
greenb.Toggled += OnToggled;
blueb.Toggled += OnToggled;

所有三个按钮都插入到一个方法调用中，即OnToggled()方法。

square = new QWidget(this);
square.StyleSheet = "QWidget { background-color: black }";

我们创建方形小部件。一开始是黑色的。在 Qyoto 中，我们使用样式表来自定义小部件的外观。

在OnToggled()方法内部，我们确定颜色值并将正方形小部件更新为新颜色。

int red = col.Red;
int green = col.Green;
int blue = col.Blue;

在这里，我们确定方形小部件的当前颜色。

if (redb.Checked) 
{
    red = 255;
} else {
    red = 0;
}

根据红色切换按钮的状态，更改颜色的红色部分。

col = new QColor(red, green, blue);

我们创建一个新的颜色值。

string sheet = System.String.Format("QWidget {{ background-color: {0} }}", 
    col.Name());

我们使用 C# Format方法创建适当的样式表。

square.StyleSheet = sheet;

正方形的颜色已更新。

281.md - 图4

图：开关按钮

`QComboBox`

QComboBox是一个小部件，允许用户从选项列表中进行选择。这是一个显示当前项目的选择小部件，可以弹出可选择项目的列表。组合框可能是可编辑的。它以占用最少屏幕空间的方式向用户显示选项列表。

using System;
using QtCore;
using QtGui;
/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses the QComboBox widget.
 * The option selected from the combo box is
 * displayed in the label widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */
public class QyotoApp : QWidget 
{    
    QLabel label;
    public QyotoApp() 
    {
        WindowTitle = "QComboBox";
        InitUI();
        Resize(250, 150);
        Move(300, 300);
        Show();
    }
    public void InitUI() 
    {       
        label = new QLabel("Ubuntu", this);
        QComboBox combo = new QComboBox(this);
        combo.AddItem("Ubuntu");
        combo.AddItem("Arch");
        combo.AddItem("Fedora");
        combo.AddItem("Red Hat");
        combo.AddItem("Gentoo");
        combo.Move(50, 30);
        label.Move(50, 100);
        combo.ActivatedString += OnActivated;
    }
    [Q_SLOT]
    public void OnActivated(string text) 
    {
        label.Text = text;
        label.AdjustSize();
    }
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

在我们的代码示例中，我们有两个小部件。组合框和标签小部件。从组合框中选择的选项显示在标签中。

label = new QLabel("Ubuntu", this);

这是一个标签，它将显示组合框中当前选择的选项。

QComboBox combo = new QComboBox(this);

我们创建QComboBox小部件的实例。

combo.AddItem("Ubuntu");
combo.AddItem("Arch");
combo.AddItem("Fedora");
combo.AddItem("Red Hat");
combo.AddItem("Gentoo");

组合框将填充值。

combo.ActivatedString += OnActivated;

当我们从组合框中选择一个选项时，将触发OnActivated()方法。

[Q_SLOT]
public void OnActivated(string text) 
{
    label.Text = text;
    label.AdjustSize();
}

在OnActivated()方法中，我们将标签小部件更新为从组合框中选择的当前字符串。

281.md - 图5

图：QComboBox小部件

在 Qyoto C# 教程的这一部分中，我们介绍了几个 Qyoto 小部件。

{% endraw %}