flutter08 - Widget

sobre Widget

concepto

Flutter casi todos los objetos son un widget, el concepto Widget Flutter más amplio, no sólo pueden representar elementos de interfaz de usuario, sino que también puede representar un número de componentes funcionales, tales como: medios para detectar un gesto de la GestureDetectorflash, para transferencia de datos es el tema de APP la Themeasí sucesivamente,

widget y Element

• Widget es en realidad Elementlos datos de configuración, árbol de configuración de widget es en realidad un árbol, y el árbol es la verdadera interfaz de usuario emitida por la Elementconstitución; sin embargo, como Elementse genera por Widget, por lo que hay correspondencia entre ellos, en la mayoría de las escenas, nos widget puede ser ampliamente considerado el árbol se refiere a un árbol o controles de interfaz de usuario de interfaz de usuario render árbol.
• objeto Widget puede corresponder a una pluralidad de Elementobjetos. Esto se entiende bien, de acuerdo con una configuración (Widget), puede crear varias instancias (elemento).

Widget ventana principal

@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;
  }
}

• Widgethereda de la clase de DiagnosticableTree, DiagnosticableTreea saber, "árbol de diagnóstico", la función principal es proporcionar información de depuración.
• Key: Este keyatributo es similar a React / Vue en el keypapel principal es decidir si la próxima buildvez multiplexación widget de edad, las condiciones de la decisión canUpdate()proceso.
• createElement(): Como se mencionó anteriormente, "puede corresponder a una pluralidad de Widget Element"; Flutter Marco de interfaz de usuario al construir el árbol, a llamar a este método para generar un nodo correspondiente Elementobjeto. Este método se conoce como aleteo marco implícito en nuestro proceso de desarrollo, básicamente, no pone en.
• debugFillProperties(...) método de replicación de la clase padre, sobre todo para establecer el diagnóstico de algunas de las características del árbol.
• canUpdate(...)Es un método estático, se utiliza principalmente en el árbol de widgets otra vez buildcuando la reutilización widget de edad, de hecho, en concreto, debería ser: ya sea con un nuevo objeto Widget para actualizar el árbol de UI de edad correspondiente Elementobjeto de configuración, a través de su código fuente podemos ver, siempre y cuando newWidgetcon oldWidgetel runtimeTypey keyutilizaremos de forma simultánea EQUAL newWidgetpara actualizar los Elementobjetos de configuración, de lo contrario se creará una nueva Element.

StatelessWidget

Papel: la escena no es necesario para mantener el estado, que por lo general se buildconstruye mediante una interfaz de usuario anidados Widget otros métodos, el proceso de construcción sería construir su Widget recursiva anidada.

Hereda de Widgetla clase, anular el createElement()método:

@override
StatelessElement createElement() => new StatelessElement(this);

Contexto

contexto es BuildContextuna instancia de una clase, representa un contexto del widget actual en el árbol del widget, cada uno correspondiente a un widget será un objeto de contexto (widget es un widget, ya que cada nodo de un árbol).

StatefulWidget

StatefulWidget se hereda de la clase Widget, y reescribiendo el método createElement (), la diferencia no es el mismo que objeto elemento devuelto; StatefulWidget añade además una nueva clase de interfaz createState ()

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);

  @override
  StatefulElement createElement() => new StatefulElement(this);

  @protected
  State createState();
}

• StatefulElementIndirecta heredados de Elementla clase con la correspondiente StatefulWidget (como datos de configuración). StatefulElementSe le puede llamar varias veces createState()para crear el estado (Estado) objetos.
• createState()Y con estado Widget para crear relacionadas con el estado, que se puede llamar varias veces en el ciclo de vida del widget con estado. Por ejemplo, cuando una pluralidad de posiciones inserta simultáneamente en el Stateful widget widget de árbol, marco Flutter llamará a este método para cada ubicación para generar un estado separado casos, de hecho, esencialmente una StatefulElementcorresponde a un ejemplo de Estado.

estado del ciclo de vida

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");
  }
}

Obtiene objetos de estado Widget en el árbol, y el llamado Bar en dos formas

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"),
                );
              },
            ),
          ],
        )
    );
  }
}

Por GlobalKeyla adquisición de Stateobjetos

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"),
                    );
                  },
                ),
              ],
            )),
      ),
    );
  }
}