今天,我们就来一起阅读一下Flutter
项目初始化后的代码!
AS
创建一个新的Flutter
工程,我们会得到一个默认的计数器应用示例
dart
代码主要在lib/main.dart
中
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,),
home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
import 'package:flutter/material.dart';
后面使用的一些widget
就是从这里来的,所以可以理解为一个UI 组件库
。
void main() => runApp(MyApp());
Flutter
或者说dart
是main
函数为应用程序的入口的。main
函数中调用的runApp
方法,它的功能是启动Flutter
应用。runApp
它接受一个Widget
参数
Widget
参数呢?
App.jsx
,App.vue
很类似的一个东西
main
函数使用了js
中的匿名函数写法,这种简写比较潇洒
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//应用名称
title: 'Flutter Demo',
theme: ThemeData(
//蓝色主题
primarySwatch: Colors.blue,
),
//应用首页路由
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
MyApp
类代表Flutter
应用,它继承了StatelessWidget
类,那么,它作为子类就是一个StatelessWidget
类呗
StatelessWidget
StatefulWidget
React
中的受控组件和非受控组件
Vue
Vue2
props
来控制就是受控了
React
去setState
或者调用useStata
去更新
Vue3
ref
和reactive
包裹的是受控组件Flutter
中,几乎都是widget
,包括一些css
的样式都是以widget
的形式提供的
css
快啊
Flutter
的样式控制应该更加容易理解
Flutter
在构建页面时,会调用组件的build
方法,widget
的主要工作是提供一个build()
方法
widge
组件MaterialApp
是Material库
中提供的一个常用的基础的Widget
,通过它可以设置应用的名称,主题,语言,首页及路由列表等。
home
是应用的首页,它也是一个什么啊?
widget
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
...
}
Stateful widget
至少由两个类组成:
StatefulWidget
类
State
类,StateWidget
类本身是不变的,但是State
类中持有的状态在widget
生命周期中可能会发生变化
MyHomePage
类中没有build
方法,这个前面说的每个widget
都有一个build方法好像不同
\_MyHomePageState
方法中
下面,我们来康康这个类里面包含了那些东西吧!
比如这个初始化项目是一个计数器,所以状态就是一个count
int _counter = 0; //用于记录按钮点击的总次数
void _incrementCounter() {
setState(() {
_counter++;
});
}
当按钮点击,就调用这个函数,改变状态会使用setState
方法,这个和React
的类组件汇总改变状态的方式很像
Flutter
对这个方法做了优化,不需要去修改每个widget
,源码还没有了解过
UI
界面的build
方法
MyHomePage
第一次创建时,\_MyHomePageState
类也会被创建,当初始化完成后,Flutter
框架会调用widget
的build
方法来构建widget
树
cssdom
树,渲染树一个道理吧Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Scaffold
是Material库
中提供的页面脚手架,它提供了默认的导航栏,标题和包含主屏幕widget树
的body
属性。路由默认都是通过Scaffold
创建
Center
组件,它可以将子组件移动到屏幕中心
Center
自组件是一个Column组件
,它可以将所有自组件沿屏幕垂直方向依次排列
\_counter
状态的数值
floatingActionButton
是页面右下角的带+
的按钮,它的onPressed
属性接受一个回调函数,就是onClick
,呵呵
setState
引起页面变化rebuild
达到有状态!!!
state
自治提高效率
StatefulWidget
,那需要把state
传进入,就变得麻烦了
state
状态公开,但是这样就很danger
了build
放在里面,会给继承带来麻烦
build