Flutter StatelessWidget 、StatefulWidget

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget。

1. StatelessWidget是无状态组件，状态不可变的widget
2. StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变。

通俗的讲： 如果我们想改变页面中的数据的话这个时候就需要用到StatefulWidget

StatefulWidget实现一个计数器的功能

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  // ignore: use_key_in_widget_constructors
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home:  HomePage(), 
      home: const Main(),
    );
  }
}

// 静态的没办法改变数据
class HomePage extends StatelessWidget {
  int _count = 0;

   HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            Text('$_count', style: const TextStyle(fontSize: 30),),
            const SizedBox(height: 100,),
            ElevatedButton(
              onPressed: (){
                _count++;
                print(_count);
              }, 
              child: const Text('增加'),
            )
          ],
        ),
      ),
    );
  }
}


class Main extends StatefulWidget {

  const Main({ Key? key }) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            Text('$_count', style: const TextStyle(fontSize: 30),),
            const SizedBox(height: 100,),
            ElevatedButton(
              onPressed: (){
                setState(() {
                  _count++;
                });
                print(_count);
              }, 
              child: const Text('增加'),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            _count--;
          });
          print(_count);
        }, 
        child: const Icon(Icons.remove),
      )
    );
  }
}

StatefulWidget实现一个动态列表

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  // ignore: use_key_in_widget_constructors
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home:  HomePage(), 
      home: const Main(),
    );
  }
}


class Main extends StatefulWidget {

  const Main({ Key? key }) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  final List<String> list = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter App'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            list.add('我是一个新增的列表');
          });
        }, 
        child: const Icon(Icons.add),
      ),
      body: ListView(
        children: list.map((e) => ListTile(title: Text(e))).toList(),
      ),
    );
  }
}