项目文件目录结构介绍
注:创建 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)))),));
}
功能进阶