零基础学Flutter之Widget简介及使用

Widget 简介

上一章我们简单的实现了一个hello world的小案例 ,其中我们知道项,启动会执行main方法,main方法调用了 runApp方法,其中runApp方法参数就是一个Widget对象,从这里我们得知如要写一个页面就需要一个Widget对象

什么是Widget

那么Widget对象到底是个什么玩意呢
我们看看官方是如何解释的:

• Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface. Widgets can be inflated into elements, which manage the underlying render tree.
  说的是 Widget是Flutter框架中的核心层次结构类,Widget是属于用户页面的不可变类型,Widget可以扩充成元素(Elements),这些元素(Elements)用树的呈现进行管理.

什么是Elements

上面我们说了Widget可以扩充成元素(Elements),而管理元素(Elements)是用树进行呈现管理,那么也就是说Elements是树的一个节点,创建Widget是会对应创建一个Element,然后将该元素(Element)插入树中,如之后Widget发生了什么变化,只会将其与旧的Widget进行比较,并且相应的进行更新元素(Element),重要的是Widget发生变化,Element是不会重建,只会更新,这里我们不做深究,知道这些就足够了.

Stateless Widget

StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget。我们看一个简单的例子：

class Demo extends StatelessWidget {
  Demo(
      {Key key,
      @required this.text,
      this.color,
      this.textDirection: TextDirection.ltr})
      : super(key: key);

  final String text;
  final Color color;
  final TextDirection textDirection;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: color,
        child: Text(
          text,
          textDirection: textDirection,
        ),
      ),
    );
  }
}

上面的代码,实现了一个显示字符串的Demo组件(Widget)
然后我们可以通过如下方式使用它:

class DemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Demo(text: "test demo");
  }
}

void main() => runApp(DemoPage());

Stateless Widget 一般用于静态组件

Stateful Widget

和Stateless Widget一样,Stateful Widget也是继承Widget类,并重写了createElement()方法,不同的是返回的Element对象并不相同;另外
Stateful Widget类中添加了一个新的接口createState(),我们看一个简单的例子:

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return Demo(text: "test demo");
  }
}

void main() => runApp(DemoPage());

Stateful Widget 一般用于动态组件

State

一个Stateful Widget类会对应一个State类,State表示与其对应的Stateful Widget要维护的状态,State中的保存的状态信息可以:

• 在Widget build时可以被同步读取.
• 在Widget生命周期中可以被改变,当State被改变时,可以手动调用setState()方法通知Flutter framework状态发生改变,Flutter framework在收到消息后,会重新调用其build方法重新渲染页面,从而达到更新UI的目的.

State属性

• widget，它表示与该State实例关联的widget实例，由Flutter framework动态设置。注意，这种关联并非永久的，因为在应用声明周期中，UI树上的某一个节点的widget实例在重新构建时可能会变化，但State实例只会在第一次插入到树中时被创建，当在重新构建时，如果widget被修改了，Flutter framework会动态设置State.widget为新的widget实例
• context，它是BuildContext类的一个实例，表示构建widget的上下文，它是操作widget在树中位置的一个句柄，它包含了一些查找、遍历当前Widget树的一些方法。每一个widget都有一个自己的context对象。

State生命周期

initialize(初始化)
initState->didChangeDependencies->build
heavy load(热重载)
reassemble->didUpdateWidget->build
remove(移除)组件
reassemble->deactive->dispose
我们看看回调函数:

• initState：当Widget第一次插入到Widget树时会被调用。
• didChangeDependencies：当State对象的依赖发生变化时会被调用。
• build：它主要是用于构建Widget子树
• reassemble：此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。
• didUpdateWidget：在widget重新构建时调用。
• deactivate：当State对象从树中被移除时，会调用此回调。
• dispose：当State对象从树中被永久移除时调用；通常在此回调中释放资源。

交流学习入口

点击链接加入群聊零基础学Flutter
下一篇:零基础学Flutter之Widget基础组件Text