Flutter项目的创建
- 创建Flutter项目通常由两种方式：
- 通过命令行创建，终端执行
flutter create xxx
- 通过开发工具创建，例如Android Studio；
Hot Reload 与 Hot Restart
- 运行一个Flutter项目的方式有：
- 冷启动：一切从零开始，启动过程很慢；
- 热启动即Hot Reload：最主要是执行build方法，启动非常快，快捷键为：
command + \；
- 热重启即Hot Restart：重新运行整个App，快捷键为：
command + shift + \；
Widget
- 基本认识：在Flutter中
万物皆为Widget；
- 在iOS或Android开发中，所涉及到的Application，View Controller，Activity，View，UI控件等等这些元素，在Flutter中都是不同的Widget，也就是说在Flutter整个应用程序中，我们所看到的内容几乎都是Widget，甚至是
内边距的设置，我们也需要使用一个叫Padding的Widget来实现；
- Flutter入口main函数，执行
void runApp(Widget app)函数，此函数是在Flutter系统库material.dart中，需要提供一个Widget参数，我们可以传入material.dart库中定义的Widget；
- 在Flutter中Widget可分为有状态的和无状态的：
-
StatefulWidget：有状态的Widget，需要保存状态，并且可能出现状态的改变；
-
StatelessWidget：无状态的Widget，这种Widget仅仅是做一些展示的工作而已；
StatelessWidget
- StatelessWidget无状态；
- 其数据通常是直接写死的，放在StatelessWidget中的数据，必须定义为final；
- 从parent Widget中传入的 而一旦传入就不可以修改；
- 继承自StatelessWidget的Widget子类，必须实现
build方法，因为StatelessWidget是一个抽象类；
- Flutter在拿到我们自己创建的StatelessWidget时，就会执行
build方法，我们需要在build方法中告诉Flutter，我们的Widget需要渲染什么元素；
- StatelessWidget不会主动去执行
build方法，当我们使用的数据发生改变时，build方法会被重新执行；
-
build方法在以下情况下会被执行：
- 当我们的StatelessWidget第一次被插入到Widget树中时，也就是第一次被创建时；
- 当我们的父Widget发生改变时，子Widget会被重新创建；
- 如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；
main函数自定义入口Widget
import 'package:flutter/material.dart';
main(){
//1.runApp函数 在flutter/material.dart系统库中
runApp(
Center(
child: Text(
"Hello World!!!",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 30,
color: Colors.orange
),
),
)
);
}
- main函数中必须调用
void runApp(Widget app) ；
-
Center是一个Widget，Text也是一个Widget；
MaterialApp
-
Material是Google公司推行的一套设计风格，里面有很多的设计规范，比如颜色，文字的排版，响应动画与过度，填充等等；
- 在Flutter中高度集成了
Material风格的Widget；
- 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用；
import 'package:flutter/material.dart';
main(){
//1.runApp函数 在flutter/material.dart系统库中
runApp(
MaterialApp(
home: Center(
child: Text(
"Hello World!!!",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 30,
color: Colors.orange
),
),
),
)
);
}
-
MaterialApp是一个Widget，即具有Material设计风格的Widget；
- 案例代码：
import 'package:flutter/material.dart';
main(){
//1.runApp函数 在flutter/material.dart系统库中
runApp(
MaterialApp(
//去除右上角的debug标签
debugShowCheckedModeBanner: true,
home: Scaffold(
appBar: AppBar(
title: Text("第一个Flutter程序"),
),
body: Center(
child: Text(
"Hello World!!!",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 30,
color: Colors.orange
),
),
),
)
)
);
}
-
debugShowCheckedModeBanner: false：可去除右上角的debug标签；
-
Scaffold俗酥称为脚手架，可选参数appBar设置页面导航栏，可选参数body设置页面主体内容，界面效果如下：
image.png
代码重构
import 'package:flutter/material.dart';
main() => runApp(SFMyApp());
///组件化开发
class SFMyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
//去除右上角的debug标签
debugShowCheckedModeBanner: false,
home: SFHomePage()
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("第一个Flutter程序"),
),
body: SFContentBody()
);
}
}
class SFContentBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
"Hello World!!!",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 30,
color: Colors.red
),
),
);
}
}
- 将整个App的元素，分别抽取出来，定义成单独的Widget，例如App，首页，首页的主体内容，代码的结构变得更加清晰，属于
组件化的思想；
- 抽取出来的元素 全部都继承自
StatelessWidget，可以看出所有的元素都可看成Widget，即万物皆为Widget；
项目案例
-
@require：是一种注解，表示命名可选参数是必须要传参的；
-
StatelessWidget与StatefulWidget均继承自Widget，而abstract class Widget extends DiagnosticableTree是@immutable即不可变的，那么在Widget内部定义变量是错误的；
- 如果要监听Widget中的状态数据，要创建
StatefulWidget，在StatefulWidget也是不能定义变量的，这时引入一个继承自State的子类，即状态管理类，在状态管理类中我们可以定义变量，记录Widget的状态数据变化；
import 'package:flutter/material.dart';
main() => runApp(SFMyApp());
///组件化开发
class SFMyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
//去除右上角的debug标签
debugShowCheckedModeBanner: false,
home: SFHomePage()
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("第一个Flutter程序"),
),
body: SFContentBody()
);
}
}
///可以创建状态管理类 来管理状态
class SFContentBody extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return SFContentBodyState();
}
}
///这里可以定义状态
class SFContentBodyState extends State<SFContentBody> {
//用来记录Checkbox的选中状态
var flag = true;
@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(
value: flag,
onChanged: (value){
setState(() {
flag = value;
});
},
),
Text(
"同一协议",
style: TextStyle(
fontSize: 20
)
)
],
),
);
}
}
-
SFContentBodyState：继承自State，专门用来管理SFContentBody这个组件的状态的；
- 最终实现的效果如下：
image.png
网友评论