flutter create flutter_demo
VSCode环境安装插件
Flutter,
Dart,
Code Runner
Flutter项目启动方式有三种:冷启动,热启动(hotReload),热重载(hotRestart)。
冷启动:代码和Flutter框架都没有加载和运行,需要从磁盘加载到内存进行运行,过程比较久,通常需要1min-5min。 热启动 hotReload:重新运行widget中的build方法。 热重载 hotRestart:重新运行APP的main入口函数,重新运行一遍程序。 Material是什么 Material是google推出的套设计风格,或者叫设计规范。里面包含了很多设计规范,如:颜色,文字排版,响应动画与过度等。 在Flutter中高度集成Material风格的Widget。 Widget是什么 Flutter中万物皆Widget。在iOS或安卓中,我们的页面有很多种类:应用Application, 视图控制器ViewController, 视图View, Button按钮等。 但是在Flutter中,这些东西都是不同的Widget。 而在我们的APP中,所有能看到的内容几乎都是Widget, 甚至内边距设置都是使用Padding的Widget来做的。 Flutter项目的入口 Flutter项目的入口是lib/main.dart下的main函数。 在main函数内部,需要运行函数runApp(widget app);, runApp函数是Flutter提供的一个全局APP运行函数入口。runApp(widget app);
最简单的Flutter项目Demo
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(Text('Hello Flutter'));
}
此时报错:没有找到排版方向
原因是Flutter是面向全世界很多国家的,有的国家排版是从左往右,有的是从右往左。所以需要用户自己设置。 这里需要明确指定排版方向:TextDirection.ltr。 在Flutter中万物都是widget,所以如果要设置center, padding ,margin等都是写对应的widget。 修改报错后,如下:void main(List<String> args) {MaterialApp:采用了Google的Material设计设计规范的Widget,里面默认设置了文字排版方向等设置。 Scaffold:脚手架Widget, 用于快速搭建页面机构,提供了不同位置的命名可选参数。
runApp(
Center(
child:Text('Hello Flutter',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.red,
fontSize: 30,
),
)
)
);
}
import 'package:flutter/material.dart';StatelessWidget StatelessWidget:在运行过程中,组件内容是固定的,没有状态修改的。 Widget中没有数据改动,只使用固定的数据展示或者只使用从父Widget继承过来的Widget时,使用StatelessWidget。 继承StatelessWidget产生的子Widget需要重新build方法,并在build方法里返回要展示的widget。 build方法是无法主动调用的。只能在数据改动时系统来调用。 build方法调用时机: 1.当StatelessWidget第一次插入到Widget树时(第一次被创建时) 2.当父Widget发生改变时,子Widget需要被重新构建 3.当依赖的InheritedWidget的数据发送改变时,被重新调用。 StatefulWidget 在运行过程中,状态(data)会产生改变,导致页面展示内容发生改变。 如果想使用StatefulWidget创建有状态变化的Widget, 需要一个State对象一起来实现。 StatefulWidget内部无法写var属性, 因为它继承自Widget,Widget是被@immutable修饰,不可改变。所以它的状态改变要在别的类(State)中实现。 State:在创建的State子类中添加var属性,并将其与Widget状态绑定,当有新的状态改变时,需要调用setState((){})进行更新状态 Flutter的状态更新和React的机制一样,需要调用setState通知框架进行页面更新。 与Vue不同的是Vue实例使用的是双向绑定,内部对属性做了监听,无需手动调用setState进行通知更新。
/*
MaterialApp:采用了Google的Material设计设计规范的Widget,里面默认设置了文字排版方向等设置。
Scaffold:脚手架Widget, 用于快速搭建页面机构,提供了不同位置的命名可选参数。
debugShowCheckedModeBanner: 去掉右上角的debug条
*/
void main(List<String> args) {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home:Scaffold(
appBar: AppBar(title: Text('第一个Flutter程序'),),
body: Center(
child:Text('Hello Flutter',
style: TextStyle(
color: Colors.blue,
fontSize: 30,
),
)
),
)
)
);
}
/*声明式编程和命令式编程 iOS,安卓使用的是命令式编程,平时涉及到的是属性,成员变量。 vue, react, flutter是声明式编程,平时涉及到的是State状态,平时开发是只需要管好状态,显示内容有框架自动帮忙更新上去。 Flutter修饰符 @immutable修饰符表示Widget类是不可改变的,里面的属性都是final类型的。 required可选变量 必传修饰符, 用于表示命名可选变量为必传参数。
StatefulWidget内部无法写var属性, 因为它继承自Widget,Widget是被@immutable修饰,不可改变。所以它的状态改变要在别的类(State)中实现。
State:在创建的State子类中添加var属性,并将其与Widget状态绑定,当有新的状态改变时,需要调用setState((){})进行更新状态
Flutter的状态更新和React的机制一样,需要调用setState通知框架进行页面更新。
与Vue不同的是Vue实例使用的是双向绑定,内部对属性做了监听,无需手动调用setState进行通知更新。
*/
class PageContent extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return PageContentState();
}
}
class PageContentState extends State<PageContent> {
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('Hello World')
]
)
);
} }
@immutable
abstract class Widget extends DiagnosticableTree const Checkbox({
Key? key,
required this.value,
this.tristate = false,
required this.onChanged,
还木有评论哦,快来抢沙发吧~