Flutter入门与实战：HelloWorld进阶篇

在初步完成了Flutter应用HelloWorld之后，接下来我们将进一步完善，介绍一些常规处理，譬如，更换图标，设置启动页及添加菜单等等。

环境

操作系统：Windows10

Flutter版本：2.2.2 stable

Dart版本：2.13.3

开发工具：Android Studio Arctic Fox | 2020.3.1、 Visual Studio Code 1.58.2、Visual Studio 2019

替换图标

▶Android下面把res下面资源文件替换即可，类似Android原生的方式。

▶Windows下面则需要到对应目录，替换app_icon.ico（ico需要自行转换后替换）。

▶运行效果：

Android：

Windows：

修改启动页

自动生成的示例代码中，默认的启动页是白屏，可以修改配置文件设置为自定义内容。

▶打开Android目录下的res目录，修改drawable和drawable-v21下面的launch_background.xml文件，取消item注释，并修改颜色。其中颜色在values下面添加自定义颜色splashColor。

▶重新编译并运行，效果如下：

当然也可以采用其他方式，如原生修改，或者其他方式替代默认启动页等，这里暂不做介绍。

增加菜单

在之前添加的有状态组件的状态中，有默认的Scaffold组件，它包含了一个页面的基础结构，如导航栏appBar，底部导航栏bottomNavigationBar，页面容器body，悬浮按钮floatingActionButton，drawer抽屉菜单等。接下来，我们将增加菜单示例，包括抽屉菜单等。

▶增加导航栏菜单

▶增加抽屉菜单

▶增加底部导航栏

1.添加页面控制类_pageController及页面信息_pages，并在initState重载函数初始化。其中late关键字的含义是延迟初始化，避免编译报错。

2.添加底部导航栏并处理响应，通过页面控制类_pageController控制跳转。

▶效果图

延伸

▶在Flutter框架中，界面相关的可谓一切皆组件，一般在编写界面代码过程中会涉及到child嵌套的问题，譬如一个组件是另外一个组件的child，而当前组件也存在child。

▶组件嵌套其实可以看做一棵树，不断的延展，最后完成界面绘制。缺点可能是代码比较长，某些地方看起来比较冗余。一般的建议就是，简单界面可以直接添加代码，复杂的则使用函数封装一下。

▶Flutter里面比较有意思的一点是，如果设置某个参数为null或者不填，则使用默认值。对于可点击的控件，如果不添加onTap或者onPressed响应函数，则不会有响应效果，如水波纹。