Flutter技术咨询：如何实现页面间课程数据传递与保存

作为刚入门应用开发的新手，你要解决的核心问题是跨页面共享用户选择的课程数据，下面我会以React为例（其他框架思路完全通用），一步步帮你落地实现：

1. 搭建全局状态管理（共享已选课程） #

因为两个页面是独立的组件，需要一个全局容器来存储用户添加的课程，避免页面切换后数据丢失。用React的Context API是新手友好且无需额外依赖的方案：

// src/context/CourseContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const CourseContext = createContext();

export function CourseProvider({ children }) {
  // 从localStorage读取已存课程，实现页面刷新不丢失数据
  const [myCourses, setMyCourses] = useState(() => {
    const saved = localStorage.getItem('myCourses');
    return saved ? JSON.parse(saved) : [];
  });

  // 监听课程变化，自动同步到localStorage
  useEffect(() => {
    localStorage.setItem('myCourses', JSON.stringify(myCourses));
  }, [myCourses]);

  // 添加课程方法：先判断是否已报名，避免重复添加
  const addCourse = (course) => {
    const isAlreadyAdded = myCourses.some(item => item.code === course.code);
    if (!isAlreadyAdded) {
      setMyCourses(prev => [...prev, course]);
    }
  };

  return (
    <CourseContext.Provider value={{ myCourses, addCourse }}>
      {children}
    </CourseContext.Provider>
  );
}

// 自定义Hook，方便组件快速调用全局状态
export function useCourseContext() {
  return useContext(CourseContext);
}

然后在根组件（比如App.js）里用这个Provider包裹所有页面，让全局状态生效：

// src/App.js
import { CourseProvider } from './context/CourseContext';
import CoursesPage from './pages/CoursesPage';
import MyCoursesPage from './pages/MyCoursesPage';
// 如果用路由的话，这里可以引入React Router的Routes/Route

function App() {
  return (
    <CourseProvider>
      {/* 这里可以添加路由导航，比如课程页和我的课程页的切换入口 */}
      <CoursesPage />
      <MyCoursesPage />
    </CourseProvider>
  );
}

export default App;

2. 课程页（Courses Page）添加点击报名逻辑 #

在课程页的卡片组件里，调用全局状态的addCourse方法，实现点击按钮添加课程：

// src/pages/CoursesPage.js
import { useCourseContext } from '../context/CourseContext';

function CoursesPage() {
  const { addCourse } = useCourseContext();
  // 假设这是从API获取的课程列表（实际开发中替换成真实接口请求）
  const courses = [
    { code: 'CS101', name: '计算机基础' },
    { code: 'MA202', name: '高等数学' },
    { code: 'EN303', name: '商务英语' }
  ];

  return (
    <div className="courses-container">
      <h2>全部课程</h2>
      <div className="course-grid">
        {courses.map(course => (
          <div key={course.code} className="course-card">
            <h3>{course.name}</h3>
            <p>课程代码：{course.code}</p>
            <button onClick={() => addCourse(course)}>
              报名课程
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default CoursesPage;

3. 我的课程页（My Courses Page）渲染已报名课程 #

在我的课程页里读取全局状态的myCourses，根据数据是否为空渲染不同内容：

// src/pages/MyCoursesPage.js
import { useCourseContext } from '../context/CourseContext';

function MyCoursesPage() {
  const { myCourses } = useCourseContext();

  return (
    <div className="my-courses-container">
      <h2>我的课程</h2>
      {myCourses.length === 0 ? (
        <p className="empty-tip">你还没有报名任何课程，快去课程页挑选吧！</p>
      ) : (
        <div className="my-course-list">
          {myCourses.map(course => (
            <div key={course.code} className="my-course-card">
              <h3>{course.name}</h3>
              <p>课程代码：{course.code}</p>
              {/* 后续可以添加"取消报名"按钮，对应在Context里实现removeCourse方法 */}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default MyCoursesPage;

额外优化小建议 #

• 取消报名功能：可以在我的课程页加“取消报名”按钮，在Context里新增removeCourse方法，通过课程代码过滤掉对应课程。
• API请求优化：实际从API获取课程时，添加loading状态和错误提示，提升用户体验。
• 样式美化：给卡片、按钮加一些基础样式，让页面更直观友好。

如果你的APP用的是Vue、Flutter等其他框架，核心逻辑完全一致：用全局状态管理共享数据，在课程页触发添加动作，在我的课程页读取并渲染数据。

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