Flutter中一切皆Widget

Widget是组件视觉效果的封装,是UI界面的载体,而build方法则是Flutter框架构建UI界面的实现

在build方法中,通常会通过对基础Widget进行相应的UI配置,或是组合各类基础Widget的方式进行UI的定制化操作。

StatefulWidget和StatelessWidget是Widget的两个子类

StatelessWidget

Flutter中的StatelessWidget是一个不需要更改状态的Widget,即StatelessWidget没有需要管理的内部状态,是一个无状态的Widget

AboutDialog、CircleAvatar、Text等都是StatelessWidget的子类

StatefulWidget

StatefulWidget是可变状态的Widget,即StatefulWidget依赖的数据在Widget生命周期中可能会频繁的发生变化。使用setState方法管理StatefulWidget的状态的改变

setState方法是Flutter已数据驱动视图更新的关键函数,它会通知Flutter框架有状态发生了改变,而当Flutter框架收到通知后,会执行Widget的build方法,根据新的状态重建此Widget

注意:状态的更改一定要配合使用setState方法。通过setState方法的调用,Flutter会在底层标记Widget的状态,进而触发Widget重建

Widget只是视图的“配置信息”,是数据的映射

在使用Widget时,该如何选择使用StatefulWidget还是StatelessWidget呢

在Flutter中,Widget是有状态的还是无状态的,取决于他们依赖于状态的变化
  • 有状态:用户交互或数据改变会导致Widget改变
  • 无状态:一个Widget是最终态的或不可改变的
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }}class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  ...  @override  Widget build(BuildContext context) {    ...  }}

从以上代码可以看出:StatelessWidget中有一个build方法返回Widget;而StatefulWidget中并没有一个build方法返回Widget,而是多了一个createState方法返回_MyHomePageState对象,而build方法则包含在_MyHomePageState这个类中

已同步更新至微信公众号,欢迎关注“Android小白营”