【Flutter 2-4】Flutter手把手教程UI布局和Widget——Statelesswidget与Statefulwidget

作者 | 弗拉德

来源 | 弗拉德

Statelesswidget

如果一个Widget从初始化到使用再到销毁，整个过程中都不需要修改其UI的样式，例如纯展示页面，我们就用Statelesswidget。常见的Statelesswidget有：Text、Icon、ImageIcon、Dialog等。可以看到这些往往都是一些展示类的，不需要改变其状态的控件。

使用Statelesswidget更轻量，更节省内存资源。初始化Statelesswidget的时候不会附带一些动态更新UI的方法，这样也会提升我们软件的性能。

需要注意的是：

在iOS开发中，初始化一个Label并命名为la，改变它的文字内容，会调用la.text = @"new text"，我们可以理解为Label不是Statelesswidget的，因为它的text属性被改变了。那Flutter的Text为什么又是Statelesswidget的呢？因为Flutter中一切Widget都是 “配置文件”，当我们修改文本之后，Flutter会帮助我们重新初始化一个Text，而不是修改当前的Text对象，这是与原生开发不一样的地方。

Statefulwidget

Statefulwidget是可变的Widget，在我们的开发中会大量使用Statefulwidget。它实现了一个setState方法，当我们调用这个方法的时候，该Statefulwidget会被重新渲染，注意是重新被渲染，而不是局部更新。

当我们调用setState时，Flutter在收到该消息后，会重新调用其build方法重新构建这个widget，从而达到更新UI的目的。

来看如下代码：

  

class  StatefulWidgetDemoPage  extends  StatefulWidget {

@override

_StatefulWidgetDemoPageState  createState() => _StatefulWidgetDemoPageState();

}

  

class  _StatefulWidgetDemoPageState  extends  State<StatefulWidgetDemoPage> {

@override

Widget  build(BuildContext context) {

return  Scaffold(

floatingActionButton: FloatingActionButton(

onPressed: () {

setState(() {});

},

child: Icon(Icons.add),

),

appBar: AppBar(

title: Text("StatefuleWidget Demo"),

centerTitle: true,

backgroundColor: Colors.blue,

),

body: Column(

children: [

Container(

width: 100,

height: 100,

margin: EdgeInsets.all(10),

/// 颜色一个随机值

color: _randomColor(),

),

],

),

);

}

  

/// 获取一个随机的颜色值

_randomColor() {

return  Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),

Random().nextInt(255));

}

}

我们定义了一个生成随机颜色的方法_randomColor()，它会返回一个Color对象，然后我们又定义了一个Container，Container的初始化参数color的值是_randomColor()的返回值。然后我们在FloatingActionButton的onPressed的方法中调用一下setState方法，这个时候Flutter会重新绘制StatefulWidgetDemoPage，所以每次点击按钮，我们可以看到Container的颜色都是不一样的。

一切都是Widget

在Flutter中我们看到的UI元素都是由Widget生成的，包括手势，在Flutter中也是Widget。Widget并不是我们看到的UI元素，我们实际看到的UI元素叫Element，Widget是Element的配置数据。

我们写了大量的Widget经Flutter处理渲染生成了Element来展示在手机屏幕上。所以当我们调用setState方法的时候，我们只是更新了配置数据，Flutter依照更新后的配置数据来生成新的Element来达到渲染UI的目的。

注意

一个 Widget可以对应多个Elememt对象，这等同与一个配置文件可以生成多个实例对象一样。

想体验以上的示例的运行效果，可以到[我的Github仓库]github.com/Johnson8888/learn_flutter项目flutter_app->lib->routes->statefulwidget_page.dart查看，并且可以下载下来运行并体验。