我们这一次主要是使用比较傻瓜式的开发模式,就是鼠标的点和拖……
设计功能
首先我们要设计一下这个浏览器需要什么功能和按键:
- 上网
- 前进
- 后退
- 刷新
- 收藏
首先是第一个,那么就需要使用到QWebView这个模块,打开Qt,新建一个工程,我一直想做一个浏览器,于是将名字定为F2T,构建好工程,双击ui文件,进入设计界面开始傻瓜开发模式。先拖一个QGridLayout作为布局,然后拖动QLineEdit、QWebView、QPushButton、QLabel到布局上,并且在控件上填上相应的文字,可以直接双击修改或者添加文字,或者在右侧选中对象修改显示文字,并且,设置对象的名字:
然后应该就像个浏览器一样了:
添加槽
通过右击按钮添加单击的槽,这里不一一讲述,以“Go”按钮为例。右击该按钮,选择
选择诸多槽中的“clicked()”,然后跳转到了该函数的编写,在其中添加如下代码:
void Dialog::on_go_btn_clicked()
{
//前进按钮
QString ads = ui->adsline->text();
address_correct(ads);
if(ads == "")
{
ui->adsline->setText(tr("http://"));
return;
}
ui->adsline->setText(ads);
if(ads != access_record.back())
access_record.push_back(ads);
ui->view->load(QUrl(ads));
ui->view->show();
}
这一部分代码首先获取地址栏(adsline),然后通过函数address_correct纠正一下,将其中的空格去掉,并且如果地址非空。代码如下:
void Dialog::address_correct(QString &ads)
{
ads.trimmed();
if(!ads.startsWith("http://",Qt::CaseSensitive))
{
ads = "http://" + ads;
}
}
接下来判断是否该地址为空,如果为空,则在地址栏添加“http://”,然后不做任何事情,结束函数;如果有地址非空,则在地址栏显示处理后的地址,然后判断是否该地址为上一次同一个地址,如果不是,则将地址存在访问记录中,然后通过view将网页显示出来。
依次构建完这些槽,然后运行。可以得到:
在地址栏中输入“www.baidu.com”,然后或者回车,或者点击“Go”,可以得到:
此时我们完成了网页的在地址栏打开。
链接跳转
此时我们实现的和上一次差不多,然后我们要加入新的跳转功能,首先我们要开启QWebView的单机跳转功能,在类的构造函数中添加:
ui->view->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);
开启跳转功能,然后重载构造函数:
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
ui(new Ui::Dialog)
{
ui->setupUi(this);
this->setWindowTitle(tr("F2T v1.0.0.0.1 by CRC"));//window title
//F2T_initialize();
ui->view->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);
}
Dialog::Dialog(const QUrl &arg1, QWidget *parent ) :
QDialog(parent),
ui(new Ui::Dialog)
{
//
ui->setupUi(this);
this->setWindowTitle(tr("F2T v1.0.0.0.1 by CRC"));
ui->view->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);
ui->view->load(arg1);
ui->view->show();
QString ads = arg1.toString();
access_record.push_back(ads);
}
用来实现新网页的打开,此时在view中添加槽函数,添加方式和原来的一样,函数处理代码如下:
void Dialog::on_view_linkClicked(const QUrl &arg1)
{
Dialog *newdia = new Dialog(arg1,0);
newdia->show();
}
此时实现了跳转功能,至此,一个基本的浏览器就实现了,可以点击网页实现打开新网页:
单击“优酷”的搜索链接,可以通过打开新网页,跳转到这个链接上: