Flutter 学习： StatelefulWidget 有状态

一.复习上一节

1.RaisedButton按钮组件
RaisedButton(child: , onPressed: () {})

2.Wrap 流布局组件
Wrap( child: [] )

二.有状态组件StatelefulWidget

• Flutter中组件类型

在Flutter中字定一个组件其实就是一个类，这个需要继承StatelelessWidget/StatelefulWidget 组件。

• StatelelessWidget 是无状态组件，状态不可改变的。
• StatelefulWidget 是有状态组件，持有的状态可能在widget生命周期改变，通俗的讲如果我们想改变页面中的数据的话这个时候就需要用到StatelefulWidget

• 实现一个计数器

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

void main() {
  runApp(MyContent());
}

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(appBar: AppBar(title: Text("标题")), body: HomePage()));
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State<HomePage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Text("当前数组${this.count}"),
        RaisedButton(
          child: Text("按钮"),
          onPressed: () {
            setState(() {
              count++;
            });
          },
        )
      ],
    );
  }
}

• 注意

• 更新UI数据StatelessWidget无法实现需要用StatefulWidget
• 有状态组件先继承StatefulWidget 然后写在一个组件继承State 主要是为了能够调用setSate()方法。
• onPressed中更新UI数据 必须卸载setState(){}中

• 效果图

  
  计数器gif.gif

三.有状态组件实现动态列表

• State类中代码

class MyButtonWidget extends State<HomePage> {
  int count = 0;
  List list = new List();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      child: ListView(
        children: <Widget>[
          RaisedButton(
            child: Text("点击增加条目"),
            onPressed: () {
              setState(() {
                list.add("新增数据${++count}");
              });
            },
          ),
          Column(
            children: this.list.map((value) {
              return Text(value);
            }).toList(),
          )
        ],
      ),
    );
  }
}

• 注意

• Column嵌套listview 会展示不出来
• ListView不能嵌套ListView
• listview可以嵌套Column

• 效果图

  
  动态列表.gif

四.总结

• 有状态组件写法

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
            child: Text("点击增加条目"),
            onPressed: () {
              setState(() {
             
              });
            },
          );
  }
}