一、Flutter 概述Flutter 是 Google 开源的一个用于构建高性能、高质量原生界面应用程序的软件开发工具包Flutter 目的是用一套代码同时为多个平台开发原生质量的应用程序二、Flutter 安装安装 Git在 VScode 中安装 Flutter 插件使用快捷键Ctrl Shift P打开命令面板输入Flutter: New Project并选择点击 【Download SDK】然后选择安装目录三、Flutter 创建项目1、命令行创建进入存放项目的父目录CMD 执行如下指令flutter create--platformsweb 【项目名称】注直接运行flutter create 【项目名称】Flutter 会默认生成全部 6 个主流平台的项目代码移动端2 个Androidandroid/、iOSios/桌面端3 个Windowswindows/、macOSmacos/、Linuxlinux/Web 端1 个Webweb/2、VScode 创建使用快捷键Ctrl Shift P打开命令面板输入Flutter: New Project并选择选择存放项目的父目录输入项目名称完成创建四、Flutter 运行项目打开lib/main.dart文件点击 main 函数上方的 【Run】 按钮执行指令flutter run -d chrome运行到 Chrome五、Flutter 项目结构六、runApp 与 WidgetrunApp 函数是 Flutter 内部提供的一个函数启动一个 Flutter 应用就是从调用这个函数开始的Widget 表示控件、组件、部件Flutter 中万物皆 WidgetFlutter 的默认 Material 库是 Google 公司推行的一套设计风格有很多的设计规范例如颜色、文字排版、动画等Material 为 Android、Web、i0S、HarmonyOS 多个平台提供统一的交互和视觉体验七、MaterialApp1、基本介绍整个应用 MaterialApp 包裹方便对整个应用的属性进行整体设计常见属性title用来展示窗口的标题内容可以不设置theme用来设置整个应用的主题home用来展示窗口的主体内容2、演示importpackage:flutter/material.dart;voidmain(ListStringargs){runApp(MaterialApp(title:My Flutter App,theme:ThemeData(scaffoldBackgroundColor:Colors.blue),home:Scaffold(),),);}注在控制台输入 r 可以进行热重载八、Scaffold1、基本介绍Scaffold 是用于构建 Material Design 风格页面的核心布局组件提供标准、灵活配置的页面骨架2、演示importpackage:flutter/material.dart;voidmain(ListStringargs){runApp(MaterialApp(title:My Flutter App,// theme: ThemeData(scaffoldBackgroundColor: Colors.blue),home:Scaffold(appBar:AppBar(centerTitle:true,title:Text(顶部区域)),body:Container(child:Center(child:Text(主体区域))),bottomNavigationBar:Container(height:80,child:Center(child:Text(底部区域)),),),),);}九、自定义组件概述自定义组件分为无状态组件和有状态组件十、无状态组件1、基本介绍创建一个新的类继承 StatelessWidget 类实现 build 方法build 方法返回一个 widget2、演示importpackage:flutter/material.dart;voidmain(ListStringargs){runApp(MyApp());}classMyAppextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:无状态组件,home:Scaffold(appBar:AppBar(centerTitle:true,title:Text(顶部区域)),body:Container(child:Center(child:Text(主体区域))),bottomNavigationBar:Container(height:80,child:Center(child:Text(底部区域)),),),);}}十一、有状态组件1、基本介绍有状态组件是构建动态交互界面的核心能够管理变化的内部状态当状态改变时组件会更新显示内容创建两个类第一个类继承 StatefulWidget 类主要接收和定义最终参数核心作用是创建 State 对象第二个类继承State第一个类名负责管理所有可变的数据和业务逻辑并实现 build 方法build 方法返回一个 widget2、演示importpackage:flutter/material.dart;voidmain(ListStringargs){runApp(MyApp());}classMyAppextendsStatefulWidget{overrideStateStatefulWidgetcreateState(){return_MyApp();}}class_MyAppextendsStateMyApp{overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:有状态组件,home:Scaffold(appBar:AppBar(centerTitle:true,title:Text(顶部区域)),body:Container(child:Center(child:Text(主体区域))),bottomNavigationBar:Container(height:80,child:Center(child:Text(底部区域)),),),);}}十二、快捷键创建组件创建无状态组件statelessW创建有状态组件statefulW十三、生命周期1、无状态组件1基本介绍无状态组件的唯一阶段build 方法当组件被创建或父组件状态变化导致其需要重新构建时build 方法会被调用2演示importpackage:flutter/material.dart;voidmain(ListStringargs){runApp(MyApp());}classMyAppextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){print(无状态组件 build);returnMaterialApp(title:无状态组件,home:Scaffold(appBar:AppBar(centerTitle:true,title:Text(顶部区域)),body:Container(child:Center(child:Text(主体区域))),bottomNavigationBar:Container(height:80,child:Center(child:Text(底部区域)),),),);}}运行输出结果如下无状态组件 build2、有状态组件1基本介绍2演示importpackage:flutter/material.dart;voidmain(ListStringargs){runApp(MyApp());}classMyAppextendsStatefulWidget{overrideStateStatefulWidgetcreateState(){print(有状态组件 createState);return_MyApp();}}class_MyAppextendsStateMyApp{overridevoidinitState(){print(有状态组件 initState);super.initState();}overridevoiddidChangeDependencies(){print(有状态组件 didChangeDependencies);super.didChangeDependencies();}overrideWidgetbuild(BuildContextcontext){print(有状态组件 build);returnMaterialApp(title:有状态组件,home:Scaffold(appBar:AppBar(centerTitle:true,title:Text(顶部区域)),body:Container(child:Center(child:Text(主体区域))),bottomNavigationBar:Container(height:80,child:Center(child:Text(底部区域)),),),);}overridevoiddidUpdateWidget(covariantMyAppoldWidget){print(有状态组件 didUpdateWidget);super.didUpdateWidget(oldWidget);}overridevoiddeactivate(){print(有状态组件 deactivate);super.deactivate();}overridevoiddispose(){print(有状态组件 dispose);super.dispose();}}运行输出结果如下有状态组件 createState 有状态组件 initState 有状态组件 didChangeDependencies 有状态组件 build