ウィジェットについて
コンセプト
ジェスチャーを検出するための手段：フラッタほぼすべてのオブジェクトは、ウィジェット、ウィジェットフラッタ概念広範であることが唯一のUI要素を表すことができない、それはまた、など、機能部品の数を表すことができるGestureDetectorAPPテーマデータ転送のために、ウィジェットTheme等々 、
ウィジェットと要素
- ウィジェットは、実際にある
Elementコンフィギュレーション・データ、ウィジェットの設定ツリーは、実際に木で、木がでレンダリングされた実際のUIであるElement憲法;しかし、Elementウィジェットによって生成されるので、それらの間の対応は、我々は、ほとんどの場面で、そこにありますウィジェットは広くツリーは、ツリーを指すと考えることができるか、UIのUIコントロールツリーをレンダリングします。 - ウィジェットオブジェクトは、複数の対応することができる
Elementオブジェクト。これはよく理解され、コンフィギュレーション（ウィジェット）に合わせて、あなたが複数のインスタンス（要素）を作成することができます。
メインウィンドウウィジェット
@immutable
abstract class Widget extends DiagnosticableTree {
const Widget({ this.key });
final Key key;
@protected
Element createElement();
@override
String toStringShort() {
return key == null ? '$runtimeType' : '$runtimeType-$key';
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;
}
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
}
Widgetクラスから継承するDiagnosticableTree、DiagnosticableTreeつまり「診断木」、主な役割は、デバッグ情報を提供することです。Key：このkey属性は反応するように似ている/でVueのkey主な役割は、次のかどうかを決定することですbuild時間が古いウィジェット、意思決定における条件多重canUpdate()プロセスを。createElement()：前述のように、「ウィジェットの複数に対応することができるElement」;フラッタフレームワークUIツリーを構築するときに、対応するノードを生成するために、このメソッドを呼び出しますElementオブジェクト。この方法は、当社の開発プロセスに内在する基本的に呼び出さないフラッターフレームワークと呼ばれています。debugFillProperties(...)親クラスの複製方法は、主に機能ツリーのいくつかの診断を設定します。canUpdate(...)静的メソッドであり、それは主に再度ウィジェットツリーで使用されbuild、対応する古いUIツリー更新する新しいウィジェットオブジェクトを有するかどうか：再利用古いウィジェットが、実際には、具体的には、でなければならない場合Element、そのソースコードを介してコンフィギュレーション・オブジェクトを私たちが見ることができる、限りnewWidgetとし、使用します同時に等しく更新するために、それ以外の場合は、新規に作成され、構成オブジェクトを。oldWidgetruntimeTypekeynewWidgetElementElement
StatelessWidget
役割：シーンは通常されている状態、維持する必要はありませんbuildネストされたUIウィジェット他の方法によって構築し、ビルドプロセスは、そのネストされた再帰的なウィジェットを構築することです。
継承されWidgetたクラス、オーバーライドするcreateElement()メソッドを：
@override
StatelessElement createElement() => new StatelessElement(this);
環境
コンテキストであるBuildContext（ウィジェットは、ツリーの各ノードのためのウィジェットである）ウィジェットツリー内の現在のウィジェットのコンテキストを表し、ウィジェットに対応するコンテキストオブジェクトになり、クラスのインスタンス。
StatefulWidget
StatefulWidgetはWidgetクラスから継承され、要素オブジェクトが返されるのcreateElement（）メソッドを書き換え、差は同じではない。StatefulWidgetはさらに、（createStateインタフェース新しいクラスを追加します）
abstract class StatefulWidget extends Widget {
const StatefulWidget({ Key key }) : super(key: key);
@override
StatefulElement createElement() => new StatefulElement(this);
@protected
State createState();
}
StatefulElement間接から継承されたElement（構成データなど）StatefulWidgetを対応するクラス。StatefulElement複数回呼び出されるcreateState()状態（ステート）オブジェクトを作成します。createState()ステートフル状態関連を作成するためのウィジェットと、それはステートフルウィジェットのライフサイクルで複数回呼び出すことができます。同時にステートフルに挿入された複数の位置ウィジェットツリーウィジェット場合、例えば、フラッタの枠組みは、本質的に、実際には、分離状態のインスタンスを生成するために、場所ごとにこのメソッドを呼び出すStatefulElement状態例に相当します。
状態のライフサイクル
import 'package:flutter/material.dart';
void main() => runApp(CounterWidget(
initValue: 10,
));
class CounterWidget extends StatefulWidget {
final int initValue;
const CounterWidget({Key key, this.initValue});
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter;
/**
* 第一次被调用
*/
@override
void initState() {
super.initState();
//初始化状态
_counter = widget.initValue;
print("生命周期:initState");
}
@override
Widget build(BuildContext context) {
print("生命周期:build");
return MaterialApp(
title: "计数器",
home: Scaffold(
appBar: AppBar(
title: Text("计数器"),
),
body: Center(
child: FlatButton(
child: Text("$_counter"),
//点击后计数器自增
onPressed: () => setState(() => ++_counter),
),
),
),
);
}
//在新旧widget的key和runtimeType同时相等时didUpdateWidget()就会被调用
@override
void didUpdateWidget(CounterWidget oldWidget) {
super.didUpdateWidget(oldWidget);
print("生命周期:didUpdateWidget");
}
//state对象从树中被移除时调用
@override
void deactivate() {
super.deactivate();
print("生命周期:deactivate");
}
//state对象从树中被永久移除时调用
//通常用来回收和释放资源
@override
void dispose() {
super.dispose();
print("生命周期:dispose");
}
//只有热重载时候会调用
@override
void reassemble() {
super.reassemble();
print("生命周期:reassemble");
}
//依赖对象发生变化时被调用
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("生命周期:didChangeDependencies");
}
}
国家ウィジェットは、ツリー内のオブジェクトを取得します、とスナックバー二つの方法を呼び出します
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "获取State对象",
home: Scaffold(
appBar: AppBar(
title: Text("获取State对象"),
),
body: GetState(),
),
);
}
}
class GetState extends StatefulWidget {
@override
_GetStateState createState() => _GetStateState();
}
class _GetStateState extends State<GetState> {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Builder(
builder: (context) {
return RaisedButton(
onPressed: () {
// 查找父级最近的Scaffold对应的ScaffoldState对象
ScaffoldState _scaffoldState =
context.ancestorStateOfType(TypeMatcher<ScaffoldState>());
//调用ScaffoldState的showSnackBar来弹出SnackBar
_scaffoldState.showSnackBar(
SnackBar(
content: Text("我是SnackBar"),
),
);
},
child: Text("点击显示SnackBar"),
);
},
),
Builder(
builder: (context) {
return RaisedButton(
onPressed: () {
// 直接通过of静态方法来获取ScaffoldState
ScaffoldState _scaffoldState =
Scaffold.of(context);
//调用ScaffoldState的showSnackBar来弹出SnackBar
_scaffoldState.showSnackBar(
SnackBar(
content: Text("我是SnackBar"),
),
);
},
child: Text("点击显示SnackBar"),
);
},
),
],
)
);
}
}
することによりGlobalKey取得Stateするオブジェクトを
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//定义
static GlobalKey<ScaffoldState> _globalKey = GlobalKey();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "获取State对象",
home: Scaffold(
key: _globalKey, //设置key
appBar: AppBar(
title: Text("获取State对象"),
),
body: Center(
child: Column(
children: <Widget>[
Builder(
builder: (context) {
return RaisedButton(
onPressed: () {
// 查找父级最近的Scaffold对应的ScaffoldState对象
_globalKey.currentState.openDrawer();
},
child: Text("点击显示SnackBar"),
);
},
),
],
)),
),
);
}
}
