# Qyoto 中的小部件

> 原文： [http://zetcode.com/gui/csharpqyoto/widgets/](http://zetcode.com/gui/csharpqyoto/widgets/)

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

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

## `QCheckBox`

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

```cs
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();
    }
}

```

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

```cs
WindowTitle = "QCheckBox";

```

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

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

```

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

```cs
cb.Checked = true;

```

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

```cs
cb.StateChanged += ShowTitle;

```

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

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

```

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

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

```

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

![QCheckBox](img/8e9ef64d097662895e6e3c99c85c66f3.jpg)

图：`QCheckBox`

## `QLabel`

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

```cs
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();
    }
}

```

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

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

```

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

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

```

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

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

```

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

![QLabel](img/6c784c58e55185077f2b0882ba05638f.jpg)

图：`QLabel`

## `QLineEdit`

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

```cs
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();
    }
}

```

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

```cs
QLineEdit edit = new QLineEdit(this);

```

`QLineEdit`小部件已创建。

```cs
edit.TextChanged += OnChanged;

```

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

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

```

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

![QLineEdit widget](img/3cdf9dcea3e30436695845f821d789c8.jpg)

图：`QLineEdit`小部件

## `ToggleButton`

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

```cs
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();
    }
}

```

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

```cs
QWidget square;
QColor color;

QPushButton redb;
QPushButton greenb;
QPushButton blueb;

```

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

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

```

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

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

```

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

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

```

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

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

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

```

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

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

```

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

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

```

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

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

```

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

```cs
square.StyleSheet = sheet;

```

正方形的颜色已更新。

![Toggle buttons](img/718ec801c7205fd01727ac30e2b097c7.jpg)

图：开关按钮

## `QComboBox`

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

```cs
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();
    }
}

```

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

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

```

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

```cs
QComboBox combo = new QComboBox(this);

```

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

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

```

组合框将填充值。

```cs
combo.ActivatedString += OnActivated;

```

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

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

```

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

![QComboBox widget](img/7690da8a257c1bdee1041c7b87707903.jpg)

图：`QComboBox`小部件

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