Flutter中点击FAB添加书籍分类的实现及状态管理方案

因为你当前用的是无状态组件，没法维护动态变化的列表数据，所以最简单直接的方式是把组件改成有状态组件，用Flutter自带的StatefulWidget来管理状态，完全能满足这个需求。具体步骤如下：

核心思路 #

• 将原无状态的Panel组件转为StatefulWidget
• 在状态类中维护一个存储书籍分类的列表
• 点击FAB时更新列表并调用setState()触发UI刷新
• 把ListView的内容和这个列表绑定，实现动态渲染

完整代码示例 #

方案1：添加到主体的ListView #

import 'package:flutter/material.dart';

class Panel extends StatefulWidget {
  const Panel({super.key});

  @override
  State<Panel> createState() => _PanelState();
}

class _PanelState extends State<Panel> {
  // 存储书籍分类的列表，初始为空
  final List<String> _bookCategories = [];

  // FAB点击时调用的添加方法
  void _addBookCategory() {
    // 这里可以替换成你实际要添加的分类，示例用随机分类
    const categories = ['小说', '科技', '历史', '文学', '传记'];
    setState(() {
      _bookCategories.add(categories[DateTime.now().millisecond % categories.length]);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('书籍分类')),
      body: ListView.builder(
        itemCount: _bookCategories.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_bookCategories[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.orange,
        onPressed: _addBookCategory,
        child: const Icon(Icons.add),
      ),
    );
  }
}

方案2：添加到抽屉内的ListView #

如果要把分类放到抽屉里，只需要把ListView移到Drawer组件中即可，状态管理逻辑完全不变：

import 'package:flutter/material.dart';

class Panel extends StatefulWidget {
  const Panel({super.key});

  @override
  State<Panel> createState() => _PanelState();
}

class _PanelState extends State<Panel> {
  final List<String> _bookCategories = [];

  void _addBookCategory() {
    const categories = ['小说', '科技', '历史', '文学', '传记'];
    setState(() {
      _bookCategories.add(categories[DateTime.now().millisecond % categories.length]);
    });
    // 添加后关闭抽屉（如果抽屉是打开状态）
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('书籍分类')),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              child: Text('书籍分类'),
            ),
            ..._bookCategories.map((category) => ListTile(title: Text(category))),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.orange,
        onPressed: _addBookCategory,
        child: const Icon(Icons.add),
      ),
    );
  }
}

说明 #

• 这里用的是Flutter最基础的状态管理方式，适合这种简单的单组件状态变化场景
• setState()会通知Flutter框架重新构建UI，从而更新ListView的内容
• 如果后续需要在多个组件间共享这个分类列表，可以考虑用Provider或Riverpod这类状态管理库，但当前场景用StatefulWidget足够

内容的提问来源于stack exchange，提问作者user23902522