最新如何自定义炫酷浏览器主页_自定义主页，2024年最新鸿蒙教程来袭

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

我们选择相对定位，修改应用名然后创建即可。

因为我们是电脑端网页，所以这里在右上角选择相应分辨率的电脑。然后点击减号，让电脑可以显示整个布局。下面我们就可以开始写布局了。

3.2、布局

我们先简单了解一下工作台的界面：

最左侧是我们可以添加的控件，只需要点击即可添加。控件旁边的是控件的属性，右侧是已添加到页面上的控件。

因为这次的应用没有后台，所以我们只需关注前台即可。

我们先为页面添加整体的布局，整体布局是纵向的。因此我们添加一个列，并在列内添加3行：

左侧是列和行控件，右侧是添加后的层次关系。这时候它们带有默认背景颜色，我们把它去点，并把列的背景设置为黑色：

我们在属性设置面板就可以设置控件的属性了，点击清空就可以取消背景颜色。

为了方便观看，我们给右侧重命名。这里需要注意，实际布局和右侧是倒着来的。我们布局的标题在最上面，内容在最下面，而右侧是反过来的。

现在我们调整一下宽高，把内容的高设置为70%，其余两个设置为15%，设置的适合需要注意单位：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ONgSjZs-1621681846295)(file:///C:\Users\Administrator\AppData\Roaming\Tencent\Users\2930777518\TIM\WinTemp\RichOle\B62~YAT[B%N}@(Y0%]7S)]F5.png)

要是%而不是px。

3.3、标题

标题的布局很简单，只需添加一个文本框即可：

我们需要注意把行布局的对齐方式设置为居中，然后修改字体颜色即可。

3.4、搜索框

搜索框需要加3个东西，输入框、图标和按钮，位置分别为如下：

我们修改输入框的长度已经按钮和标签的大小。然后发现上面的搜索框不够美观，这个适合我们可以选择修改按钮的圆角：

我们先去掉左侧圆角，然后再修改圆角大小。就有了上面的效果，但是因为中间有个标签，我们需要设置一下：

我们修改左侧几个属性，就有了上面的效果。配色方面大家可以自己调节。这样我们搜索框就完成了。

3.5、第一栏布局

我们做好一个栏其余的可以直接复制粘贴。我们按照下面的方式添加控件：

然后再一个一个来完成内容。

为了显示不同颜色，我们需要多个文本框：

这里我们使用了三个文本，然后给行布局设置了左内边距。其余的选项我就不详细说了，按照上面的操作写即可。最好调整好后的效果如下：

现在我们可以开始添加事件了。

3.6、点击跳转

现在我们给每个栏目添加一个跳转：

选中我们要添加事件的控件，这里我选择了选项1，然后点击右侧的感叹号，再在左侧选择监听的事件，这里我们选择点击。

选择事件后，我们点击从对象树选择，然后选择前台，就可以选择下面的选项了：

我们选择打开外链，然后输入链接即可，你可以根据自己的爱好选择是否要在当前页打开。

现在我们就实现了跳转功能，其它的也是一样添加的，这里就不细说了。下一步就是要实现搜索框的功能了。

3.7、搜索功能

这里我们需要添加3个变量，我们直接在前台添加：

三个变量的含义分别是，百度搜索的请求地址，要搜索的词和，最终打开的页面。

其中百度的内容设置为：https://www.baidu.com/s?wd=

其余两个我们可以先不设置。

然后我们找到图标，给它添加一个清空输入框内容的事件：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

术提升。**

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！