Flutter 的第一个程序

93 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第25天,点击查看活动详情

关于冷启动、热重载、热重启的相关概念

  • 冷启动:APP 从来没有打开过,从零开始启动APP,这个过程非常耗时
  • 热重载(Hot Reload):只是执行 build() 方法
  • 热重启(Hot Restart):重新运行整个APP

在 Android Studio 中

截屏2022-06-22 上午10.42.23.png


Flutter 入口文件与入口函数

每一个 Flutter 项目的 lib 目录中,都会有一个 main.dart 文件,这个文件就是 Flutter 入口文件

文件中涉及的方法:

  • main() 是 dart 的入口函数,Flutter 是 Dart 写的,所以入口同样也是 main() 函数
  • runApp() 是 Flutter 内部函数,启动 Flutter 应用程序时需要调用 runApp() 函数
void main() {
    runApp( /*Widget*/ );
}

也可以简写
void main() => runApp( /*Widget*/ );

关于 Widget

  • 在 Flutter 中,Widget 可以理解为组件、控件

  • 在整个 Flutter 项目中,你所能看到的内容几乎全是 Widget,可谓是万物皆为 Widget

  • Text 组件为例

    • Text 继承自 StatelessWidgetStatelessWidget 继承自 Widget。因此,可以将 Text 组件传入到 runApp() 函数中

    • 先设置其内容、方向及文字大小和颜色,之后在控件 Text 外面包一个组件 Center(), 将 Text 设置为 child

    截屏2022-06-22 下午10.59.34.png


关于 Material 库

  • Material 是 Google 公司推行的一套设计规范,比如颜色、文字排版及响应动画等等

  • 在 Flutter 中,可以直接使用这些 Widget 来创建应用程序

  • Text 组件为例,使用 Material 库中封装好的组件完成界面结构

    截屏2022-06-22 下午11.58.27.png

    代码分析

    • 关于 MaterialAPP()

      在最外层使用 MaterialAPP(),表示整个程序都会采用 Material 风格。设置其 home 属性

      • home : 该程序启动时显示的页面,此处传入了一个 Scaffold
    • 关于 Scaffold()

      Scaffold() 也被叫作脚手架,作用是搭建页面的基本结构。此处对其俩个属性进行设置

      • appBar: 设置导航栏。可以设置其 title

      • body: 设置页面的内容,将 Center 下的 Text 设置为页面内容