读前须知:此篇文章基本上是Widget - State - Context - InheritedWidget的翻译并且删减了部分我个人觉得没有意义的文字,保留下来的部分也不会逐字逐句精确翻译,所以其实强烈推荐阅读英文原文。
正文开始:
Widget, State 和Context是每一个flutter开发者必须要完全理解的概念,但是具体来说要理解哪些知识呢?这篇文章会就以下几个知识点进行讲解:
1: Stateful和Stateless widget的差别
2:什么是Context
3: 什么是State以及怎么使用
4:一个context和他的state之间的关系
5:InheritedWidget以及在在Widget树里面怎么传递信息
6:rebuild的概念
接下来文章会按照以下结构去展开:
imageflutter基础概念架构图(属本人做)
一:基本概念
1:什么是Widget
Widget即组件。在flutter里面几乎万物都是Widget,跟我们常说的component是同一个概念。
2: 什么是Widget tree
Widget按照树形结构组合的产物就是Widget tree。这个Widget tree的每个节点上又是一个Widget。包含其他组件的组件叫做父组件,被其他组件包含的组件叫做子组件。比如下面一段代码:
"
@override
Widget build(BuildContext){
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
"
3:什么是Context
4:Widget的分类
Stateless Widget
Stateful Widget
5: 什么是State
6:State和Context之间的关系
7:StatefulWidget的生命周期(lifecycle)
initState()
didChangeDependencies()
build()
dispose()
8: StatelessWidget和StatefulWidget之间的抉择
9:StatefulWidget的2个组成部分
10:Widget的唯一标识-key
二:如何获取State
1:获取组件本身的State
2:获取之间子组件的State
3:获取祖先组件的State
祖先组件需要暴露自己的State
祖先组件的Widget State需要暴露一些getters/setters
子组件本身要获取祖先组件的State的reference
4:InheritedWidget
什么是InheritedWidget
子组件如果获取InheritedWidget的数据
组件之间如何交互
1:示例代码
**2:代码执行逻辑讲解 **
注册一个组件等候通知
时间流
3:如何在保证部分组件能获取InheritedWidget数据的情况下不重新build
网友评论