当前位置：首页 > news >正文

Flutter

news 来源：原创 2025/5/9 19:11:47

项目文件目录结构介绍

注：创建 Flutter 项目名称不要包含特殊字符，不要使用驼峰标识

// TODO

开发中运行一个 Flutter 三种启动方式：

Run 冷启动	从零开始启动
Hot Reload 热重载	执行 build 方法
Hot Restart 热重启	重新运行整个 APP

代码分析

// Dart 程序入口是 main 函数，Flutter 是 Dart 编写的，所以入口也是 main 函数
main(){
  /**
   * 1. runApp 函数 (Flutter 内部提供的一个函数)
   * 当启动一个 Flutter 应用程序时调用 runApp
   */
  runApp(
    /**
     * runApp入参：Widget
     *
     * 2 Widget(Flutter 中万物皆 Widget)
     * 整个应用程序中所看到的内容几乎都是 Widget，甚至是内边距的设置，
     * 需要使用一个叫 Padding 的 Widget 来做
     */
  );
}

改进页面样式

main() {
  runApp(
      /**
     * 需求：
     * 1 居中显示： 需要使用另外一个Widget，Center
     * 2 文字大一些： 需要给Text文本设置一些样式
     * 在 Text 小部件外层包装了一个 Center 部件，让 Text 作为其 child
     */
      Center(
          child: Text('Hello Flutter',
              textDirection: TextDirection.ltr,
              style: TextStyle(
                  fontSize: 28,
                  color: Colors.red
              )
          )
      )
  );
}

改进页面结构

main() {
  runApp(
      /**
       * 需求：添加导航栏
       * 最外层包裹一个 MaterialApp
       * title：Android 系统中打开多任务切换窗口时显示的标题；（可以不写）
       * home：应用启动时显示的页面，传入了一个 Scaffold
       *
       * Scaffold:
       * 直译:[脚手架]，作用:搭建页面的基本结构
       * 所以给 MaterialApp 的 home 属性传入了一个 Scaffold 对象，作为启动显示的 Widget
       * Scaffold 也有一些属性，如 appBar 和 body
       * appBar:用于设计导航栏，传入了一个 title 属性
       * body:页面的内容，传入了之前已经创建好的 Center 中包裹的一个 Text 的 Widget
       */
      MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Title'),
            ),
            body: Center(
            child: Text('Hello Flutter',
                textDirection: TextDirection.ltr,
                style: TextStyle(fontSize: 28, color: Colors.red))
            )
        ),
      )
  );
}

功能进阶