接着上一篇文章，我们今天来制作一下有道词典的导航栏
新建一个ui类ExploreWidget，继承自QWidget。在ui有道词典主界面，将导航栏提升为ExploreWidget。
1 创建导航按钮
根据这个按钮的样式，很容易想到这个按钮应该使用QToolButton控件（因为可以方便的设置文字和图片在一起），一般情况下，推荐创建一个专门的自定义控件继承自QToolButton。但这里小豆君为了省事，就将它写在了一个接口里。
在ExploreWidget类中添加一个私有函数createExploreButton()，本例是为了展示使用样式表使用方法，有兴趣的朋友也可以使用绘图等方法来制作按钮。
/* * 创建导航栏按钮 */ QToolButton *ExploreWidget::createExploreButton( const QString& text, const QIcon& icon) { QToolButton* btn = new QToolButton(); //设置按钮图标 btn->setIcon(icon); //设置按钮文字 btn->setText(text); //设置按钮固定高度为40像素 btn->setFixedHeight(40); //设置按钮在文字的右侧，还可以传递其他的枚举值来设置按钮和文字的位置 btn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); //设置按钮样式，具体用法可查看我前面的样式表文章， //也可以帮助文档搜索Qt Style Sheet btn->setStyleSheet(QString( "QToolButton:checked, \ QToolButton:hover{ \ border-left:2px solid rgb(244, 76, 76);\ border-right:none;border-top:none;border-bottom:none;\ background-color:rgb(244, 76, 76, 50);\ color:rgb(244, 76, 76) ;\ }")); //设置图标的大小 btn->setIconSize(QSize(10, 10)); //因为当选择不同的导航栏按钮，在右侧会弹出相对应的内容， //所以将按钮设置为可选择，以提示当前内容所属类别 btn->setCheckable(true); }
2 为每个按钮提供文字和图标
/* * 获取按钮文字和图标的hash结构, * 这里使用列表而不是hash表的原因是， * 每个按钮都是有序的 */ QList<QPair<QString, QIcon> > ExploreWidget::getButtonTextAndIcons() const { QList<QPair<QString, QIcon> > ret; ret << qMakePair(QStringLiteral("查词 "), QIcon(":/image/dict.png")); ret << qMakePair(QStringLiteral("翻译 ") , QIcon(":/image/trans.png")); ret << qMakePair(QStringLiteral("例句 ") , QIcon(":/image/example.png")); ret << qMakePair(QStringLiteral("百科 ") , QIcon(":/image/wiki.png")); ret << qMakePair(QStringLiteral("单词本 ") , QIcon(":/image/wordbook.png")); ret << qMakePair(QStringLiteral("人工翻译 ") , QIcon(":/image/manual-trans.png")); ret << qMakePair(QStringLiteral("设置 ") , QIcon(":/image/settings.png")); ret << qMakePair(QStringLiteral("满意度调查 ") , QIcon(":/image/survey.png")); return ret; }
3 初始化工具栏
/* *初始化导航栏，导航栏使用QToolBar工具条控件为主控件 */ void ExploreWidget::initExplore() { //第一步 创建每个导航栏按钮 QList<QPair<QString, QIcon> > pairList = getButtonTextAndIcons(); QToolBar* tool = new QToolBar(this); QButtonGroup* btnGroup = new QButtonGroup(this); for (int i = 0; i < pairList.size(); ++i) { QPair<QString, QIcon> pair = pairList.at(i); QToolButton* btn = createExploreButton(pair.first, pair.second); //每个button都可以设置一个id，这里将索引设置为id btnGroup->addButton(btn, i); tool->addWidget(btn); if (i == 3) { tool->addSeparator(); } } //第二步 导航栏被点击时，发出点击信号 btnGroup->button(0)->setChecked(true); connect(btnGroup, SIGNAL(buttonClicked(int)), this, SIGNAL(sigShowWidget(int))); //第三步 设置工具栏 tool->setOrientation(Qt::Vertical);//按钮垂直排列 tool->layout()->setSpacing(20); ui->verticalLayout->insertWidget(0, tool, 1); }
最后在构造函数中调用initExplore()即可
好了，让我们编译运行一下程序吧。
好的，有道词典的导航栏就做好了，有的朋友可能提出词典的样式虽然做好了，但如果这个样式看腻了，想要更换一个新鲜的，那该怎么做呢，如果按照程序这样的写法改起来就会很繁琐，下篇文章小豆君就给大家介绍如何有效的管理样式，并且实现换肤功能，敬请期待吧。
更多分享请关注微信公众号：小豆君Qt分享，只要关注，便可加入小豆君的C++\Qt交流群，一起学习，并且获得本节源码。
