Flutter中点击悬浮按钮向ListView添加新用户的实现方法

1. 先定义用户数据模型 #

创建user.dart文件，存储用户基础信息：

class User {
  final String name;
  final String email;

  User({required this.name, required this.email});
}

2. 修改user_page.dart，管理列表状态并实现对话框 #

将UserPage改为StatefulWidget，维护用户列表并实现弹出输入对话框的逻辑：

import 'package:flutter/material.dart';
import 'user_list.dart';
import 'user.dart';

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

  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  final List<User> _users = [];

  void _showAddUserDialog() {
    final nameCtrl = TextEditingController();
    final emailCtrl = TextEditingController();

    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title: const Text('添加新用户'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: nameCtrl,
              decoration: const InputDecoration(labelText: '用户名'),
            ),
            TextField(
              controller: emailCtrl,
              decoration: const InputDecoration(labelText: '邮箱'),
              keyboardType: TextInputType.emailAddress,
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          ElevatedButton(
            onPressed: () {
              if (nameCtrl.text.trim().isNotEmpty && emailCtrl.text.trim().isNotEmpty) {
                setState(() {
                  _users.add(User(
                    name: nameCtrl.text.trim(),
                    email: emailCtrl.text.trim(),
                  ));
                });
                Navigator.pop(context);
              }
            },
            child: const Text('添加'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('用户列表')),
      body: UserList(users: _users),
      floatingActionButton: FloatingActionButton(
        onPressed: _showAddUserDialog,
        child: const Icon(Icons.add),
      ),
    );
  }
}

3. 修改userList.dart，接收列表并构建ListView #

让UserList接收外部传入的用户列表，根据列表状态渲染UI：

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

class UserList extends StatelessWidget {
  final List<User> users;

  const UserList({super.key, required this.users});

  @override
  Widget build(BuildContext context) {
    if (users.isEmpty) {
      return const Center(
        child: Text('还没有用户，点击右下角按钮添加吧'),
      );
    }

    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index) {
        final user = users[index];
        return ListTile(
          title: Text(user.name),
          subtitle: Text(user.email),
        );
      },
    );
  }
}

4. 确认main.dart入口配置 #

确保入口文件正确导航到UserPage：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '用户管理',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const UserPage(),
    );
  }
}

关键说明 #

• 状态更新：通过setState触发列表更新，Flutter会自动重绘ListView展示新用户。
• 输入校验：添加前检查输入是否为空，避免无效数据进入列表。
• 控制器使用：用TextEditingController获取输入内容，对话框关闭时会自动回收控制器资源。

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