Flutter

项目文件目录结构介绍

注：创建 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)) ) ), ) ); }

功能进阶