Flutter 之StatefulWidget有状态组件，text 使用系统默认Theme.of(context).textTheme.titleSmall样式，自定义组件之间传参使用、

1.text 使用默认使用系统标题 Theme.of(context).textTheme.titleSmall

// 使用系统样式
  Text(
  '默认使用系统的标题样式',
  style: Theme.of(context).textTheme.titleSmall,
),
const Text(
  '使用自定义标题样式',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
),

2.有状态组件基础使用

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;// 定义局部变量可以在 state 中使用更改

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                '$_count',
                style: Theme.of(context).textTheme.headline1,
              ),
              ElevatedButton.icon(
                onPressed: () {
                  setState(() {
                    _count++; // 修改值
                  });
                },
                icon: const Icon(Icons.add),
                label: const Text('增加'),
              ),
            ],
          ),
        ));
  }
}

3.state 拆分多个自定义组件，数据交互；

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _count = 0;
  // 自定义函数增加_count！
  _addCount() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.green[200],
          onPressed: () {},
          child: IconButton(
            onPressed: _addCount,
            icon: const Icon(Icons.add),
          ),
        ),
        appBar: AppBar(
          title: const Text('Flutter之state有状态组件的使用'),
        ),
        body: HomePage(_count, onclick: _addCount),
      ),
    );
  }
}

// ignore: must_be_immutable
class HomePage extends StatefulWidget {
  final int _count;
  void Function()? onclick; // 自定义组件接参方法
  HomePage(this._count, {Key? key, this.onclick}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                '${widget._count}',
                style: Theme.of(context).textTheme.headline1,
              ),
              ElevatedButton.icon(
                onPressed: widget.onclick,
                icon: const Icon(Icons.add),
                label: const Text('增加'),
              ),
            ],
          ),
        ));
  }
}

3.实现新增列表数据；

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List _list = []; // 自定义全局列表
  // 自定义方法实现增加
  _addList() {
    _list.add('我是第${_list.length + 1}条数据');
    setState(() {
      _list = _list;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.green[200],
          onPressed: () {},
          child: IconButton(
            onPressed: _addList,
            icon: const Icon(Icons.add),
          ),
        ),
        appBar: AppBar(
          title: const Text('Flutter之state有状态组件的使用'),
        ),
        body: HomePage(_list),
      ),
    );
  }
}

// ignore: must_be_immutable
class HomePage extends StatefulWidget {
  final List _list;
  const HomePage(this._list, {Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: widget._list.map((item) {
        return ListTile(title: Text('$item'));
      }).toList(),
    );
  }
}