Flutter学习笔记（9）--组件Widget

如需转载，请注明出处：flutter学习笔记（9）--组件widget

在flutter中，所有的显示都是widget，widget是一切的基础，我们可以通过修改数据，再用setstate设置数据（调用setstate()来通知框架，框架会再次调用state的构建方法来更新用户界面），flutter会自动通过绑定的数据更新widget，所以你需要做的就是实现widget界面，并且和数据绑定起来。

widget分为有状态statefulwidget和无状态statelesswidget两种，在flutter中，widget仅支持一帧，理解起来就是一次性绘制整个界面，无状态就是指当绘制完这一帧后，保持在这一帧的状态下不会变化，而有状态的widget当数据更新时，其实是绘制了新的widget，只是state实现了跨帧的数据同步保存。

上面简单的说了有状态和无状态两种widget，那么我们该怎么选择在什么时机有哪种widget呢？举两个简单的例子说明一下

1.在app的启动页面，我们需要展示一张启动图，但是展示过后，我们不需要这张图片发生任何的改变，保持在这一帧的状态下就可以了，这时候，我们就可以选择无状态statelesswidget

2.在一个页面里面，有一个text和一个button，需求是点击button后，text的内容需要发生变化，也就是说根据用户交互或在网络请求下，页面需要发生变化，需要重新绘制，这种情况下，我们就需要有状态的statefulwidget。

如果还是有一点不理解的话，那就记住一个规则：如果一个widget发生了变化（例如用户交互、网络请求更新页面），那么它就是有状态的，反之，如果widget绘制完之后，不会发生任何变化，那么它就是无状态的。

上面我们已经讲了无状态和有状态的widget，接下来具体讲一下这两种的实现方式：

• 无状态statelesswidget

 继承statelesswidget，通过build返回一个布局好的组件

import 'package:flutter/material.dart';

void main() => runapp(demowidget());


class demowidget extends statelesswidget {

  @override
  widget build(buildcontext context) {
    return materialapp(
      title: '无状态widget',
      home: scaffold(
        appbar: appbar(
          title: text('无状态widget demo'),
        ),
        body: center(
          child: text('这是一个无状态的demo'),
        ),
      ),
    );
  }
}

 

• 有状态statefulwidget

import 'package:flutter/material.dart';

void main() => runapp(sampleapp());


class sampleapp extends statelesswidget {
  // this widget is the root of your application.
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'sample app',
      theme: new themedata(
        primaryswatch: colors.blue,
      ),
      home: new sampleapppage(),
    );
  }
}

class sampleapppage extends statefulwidget {
  sampleapppage({key key}) : super(key: key);

  @override
  _sampleapppagestate createstate() => new _sampleapppagestate();
}

class _sampleapppagestate extends state<sampleapppage> {
  // default placeholder text
  string texttoshow = "i like flutter";

  @override
  widget build(buildcontext context) {
    return new scaffold(
      appbar: new appbar(
        title: new text("sample app"),
      ),
      body: new center(child: new text(texttoshow)),
      floatingactionbutton: new floatingactionbutton(
        onpressed: _updatetext,
        tooltip: 'update text',
        child: new icon(icons.update),
      ),
    );
  }

  void _updatetext() {
    setstate(() {
      // update the text
      texttoshow = "flutter is awesome!";
    });
  }
}

 下一章节：flutter学习笔记（10）--基础知识