Flutter页面间数据传递及列表项状态更新实现咨询

你当前代码的核心问题是没有跟踪列表项的完成状态，也没在从详情页返回时通知主页更新对应项的UI。下面是具体修改方案：

关键修改点 #

• 将原字符串列表改成带状态的结构，记录每个项是否已完成
• 跳转详情页时传递对应项的索引，确保返回时能定位到要更新的项
• 通过Navigator.push的返回值接收详情页的完成信号，触发主页状态刷新
• 列表项根据完成状态动态显示文本

修改后的完整代码 #

主页（MyHomePage）

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 改用带状态的列表，记录每个项的标题和完成状态
  List<Map<String, dynamic>> test = [
    {"title": "one", "isDone": false},
    {"title": "two", "isDone": false},
    {"title": "three", "isDone": false},
    {"title": "four", "isDone": false},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: test.length,
        itemBuilder: (context, index) {
          // 传递标题、完成状态和点击回调到Item
          return Item(
            title: test[index]["title"],
            isDone: test[index]["isDone"],
            onTap: () async {
              // 等待详情页返回结果
              final result = await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Details(index: index),
                ),
              );
              // 如果返回true，更新对应项的完成状态并刷新UI
              if (result == true) {
                setState(() {
                  test[index]["isDone"] = true;
                });
              }
            },
          );
        },
      ),
    );
  }
}

列表项（Item）

// 改成无状态组件，状态由主页管理
class Item extends StatelessWidget {
  final String title;
  final bool isDone;
  final VoidCallback onTap;

  const Item({
    super.key,
    required this.title,
    required this.isDone,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: GestureDetector(
        onTap: onTap,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(title),
            // 根据isDone状态显示文本
            Text(isDone ? "Done" : ""),
          ],
        ),
      ),
    );
  }
}

详情页（Details）

class Details extends StatefulWidget {
  final int index; // 接收项的索引

  const Details({super.key, required this.index});

  @override
  State<Details> createState() => _DetailsState();
}

class _DetailsState extends State<Details> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("详情页"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("当前项：${widget.index + 1}"),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                // 返回true通知主页标记为完成
                Navigator.pop(context, true);
              },
              child: const Text("完成"),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明 #

1. 状态管理：用List<Map>存储每个项的标题和完成状态，确保状态集中在主页，方便统一更新
2. 跳转与返回：通过await Navigator.push等待详情页的返回值，点击"完成"按钮时返回true，主页收到后更新对应项的isDone并调用setState刷新UI
3. 列表项UI：Item组件根据传入的isDone动态显示"Done"或空字符串，无需自己维护状态

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