Flutter入门|(二)Widget

Widget

Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时,widget会重新构建UI,Flutter会对比前后变化的不同, 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

给我的感觉,万物皆为Widget。Android xml中的layout是Widget,ViewGroup是Widget,View也是Widget…

一个最简单的Android app是在是在activity.main.xml中定义一个”hello world”;一个最简单的Flutter应用也是一样,只需一个widget即可!代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

runApp()方法类似于程序的入口,给定的是一个widget的根。一般这个widget都会指定一个无状态的StatelessWidget或者是有状态的StatefulWidget
无状态的StatelessWidget只能用来展示信息,不能有动作(用户交互);有状态的StatefulWidget可以通过改变状态使得 UI 发生变化,它可以包含用户交互。

按照Flutter中文网的学习引导,我们刚开始接触的Widget就是StatelessWidgetStatefulWidget,下面来做一个初步的讲解。

StatelessWidget

A widget that does not require mutable state.
译为:不需要可变状态的控件。

  • Stateless widgets 是不可变的, 这意味着它们的属性不能改变 – 所有的值都是最终的。
  • StatelessWidget一共只有三个方法:
  // 构造方法
  const StatelessWidget({ Key key }) : super(key: key);
  
  // createElement方法复写Widget方法,一般不需要使用
  @override
  StatelessElement createElement() => StatelessElement(this);

  // 用户界面的构建,描述此控件显示到用户界面部分。
  @protected
  Widget build(BuildContext context);

StatelessWidget 的使用非常简单,我们只需要继承 StatelessWidget,然后实现 build 方法就可以了。 demo示例代码如下:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

StatefulWidget

A widget that has mutable state.
译为:具有可变状态的控件。

  • Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
    • 一个 StatefulWidget类。
    • 一个 State类。 StatefulWidget类本身是不变的,但是 State类在widget生命周期中始终存在。
  • StatefulWidget一共只有三个方法:
  // 构造方法
  const StatefulWidget({ Key key }) : super(key: key);
  
  // createElement方法复写Widget方法,一般不需要使用
  @override
  StatefulElement createElement() => StatefulElement(this);

  // 在视图树中的给定位置为这个控件创建可变状态。
  @protected
  State createState();

StatefulWidget 用起来麻烦一些,它除了需要继承自StatefulWidget,还需要一个 State。demo示例代码如下:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new RandomWords(),
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

总结

从代码层面来看,貌似 StatelessWidgetStatefulWidget 差别不是很大,都是在 MyApp 的 build() 方法里返回一个Widget对象,只不过 StatefulWidget 需要额外设置实现一个 createState() 方法而已。实际上,两者的区别非常大。 StatelessWidget 整个生命周期里都不会改变,所以 build 方法只会执行一次。而 StatefulWidget 只要状态改变,就会调用 build() 方法重新创建 UI。

    原文作者:Typist夫少
    原文地址: https://blog.csdn.net/jackzhang_0522/article/details/86265937
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞