基于Flutter开发双页面表单：列表展示与注册功能需求

下面是满足需求的完整可运行代码，直接就能在Flutter环境中运行：

import 'package:flutter/material.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 ProjectListPage(),
    );
  }
}

// 已注册项目列表页
class ProjectListPage extends StatefulWidget {
  const ProjectListPage({super.key});

  @override
  State<ProjectListPage> createState() => _ProjectListPageState();
}

class _ProjectListPageState extends State<ProjectListPage> {
  final List<String> _registeredProjects = [];

  void _goToRegisterPage() async {
    // 跳转注册页并接收返回的新项目名称
    final newProject = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const RegisterPage()),
    );
    // 验证返回内容有效性后更新列表
    if (newProject != null && newProject.isNotEmpty) {
      setState(() {
        _registeredProjects.add(newProject);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('已注册项目')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 列表说明文本
            const Text(
              '以下是所有已注册的项目：',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 16),
            // 项目列表区域
            Expanded(
              child: _registeredProjects.isEmpty
                  ? const Center(child: Text('暂无已注册项目'))
                  : ListView.builder(
                      itemCount: _registeredProjects.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          leading: const Icon(Icons.folder),
                          title: Text(_registeredProjects[index]),
                        );
                      },
                    ),
            ),
            // 跳转注册页按钮
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _goToRegisterPage,
                child: const Text('注册新项目'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 项目注册页
class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final _projectNameController = TextEditingController();

  void _saveProject() {
    final projectName = _projectNameController.text.trim();
    if (projectName.isNotEmpty) {
      // 将项目名称返回给列表页
      Navigator.pop(context, projectName);
    } else {
      // 提示用户输入内容
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请输入项目名称')),
      );
    }
  }

  @override
  void dispose() {
    _projectNameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('注册新项目')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 页面用途说明文本
            const Text(
              '请输入新项目名称，点击保存完成注册：',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 16),
            // 项目名称输入框
            TextField(
              controller: _projectNameController,
              decoration: const InputDecoration(
                labelText: '项目名称',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            // 返回与保存按钮组
            Row(
              children: [
                OutlinedButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text('返回'),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: ElevatedButton(
                    onPressed: _saveProject,
                    child: const Text('保存注册'),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

核心功能说明 #

• 列表页：
  • 顶部显示明确的列表说明文本
  • 空列表状态下显示友好提示，有数据时用ListView.builder高效渲染列表项
  • 通过Navigator.push跳转注册页，并接收返回的新项目名称更新列表
• 注册页：
  • 顶部清晰说明页面用途
  • 用TextField搭配TextEditingController管理输入内容
  • 两个按钮分别实现返回上一页、验证输入并保存注册项的功能
• 数据传递：用Flutter原生的Navigator返回值机制实现跨页面数据传递，适合这种简单场景

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