Flutter入门篇——有状态组件

StatefulWidget

StatefulWidget：可以让状态生效。
State：管理状态。

创建一个类，继承它，就是一个有状态的组件。
抽象方法：返回子组件。

子组件需要是State。

class HelloWorld extends StatefulWidget {
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    return HelloWorldState();
  }
}

创建一个类，继承State<xxx>，就是一个状态类。
xxx需要是父组件StatefulWidget。

状态类中，可以定义状态，显示状态，更新状态。

class HelloWorldState extends State<HelloWorld> {
    
    
  //定义状态
  int count = 0;

  @override
  Widget build(BuildContext context) {
    
    
    return TextButton(
      //更新状态
      onPressed: add,
      child: Center(
          child: Text(
        //显示状态
        '$count',
        textScaleFactor: 8,
      )),
    );
  }

  //定义更新
  void add() {
    
    
    setState(() {
    
    
      count++;
    });
  }
}

由于TextButton是material中的，需要由MaterialApp包裹。

计数器全部代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("计数器")),
        body: HelloWorld(),
      ),
    );
  }
}

class HelloWorld extends StatefulWidget {
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    return HelloWorldState();
  }
}

class HelloWorldState extends State<HelloWorld> {
    
    
  //定义状态
  int count = 0;

  @override
  Widget build(BuildContext context) {
    
    
    return TextButton(
      //更新状态
      onPressed: add,
      child: Center(
          child: Text(
        //显示状态
        '$count',
        textScaleFactor: 8,
      )),
    );
  }

  //定义更新
  void add() {
    
    
    setState(() {
    
    
      count++;
    });
  }
}

效果：