Flutter：如何在Widget间动态共享数据并解决tableData访问问题

1. 明确BarGraph的数据源类型 #

首先确保BarGraph的tableData参数声明为**List<Post>**类型，而非dynamic或模糊类型，这样就能直接访问Post的title、likes、dislikes属性：

class BarGraph extends StatelessWidget {
  // 明确指定类型为List<Post>
  final List<Post> tableData;

  const BarGraph({super.key, required this.tableData});

  @override
  Widget build(BuildContext context) {
    // 直接访问tableData中Post的属性，无需空检查运算符
    return Column(
      children: tableData.map((post) {
        return Row(
          children: [
            Text(post.title),
            Text('点赞：${post.likes}'),
            Text('点踩：${post.dislikes}'),
            // 这里可以根据数据绘制图表逻辑
          ],
        );
      }).toList(),
    );
  }
}

2. 修改投票数时触发状态更新 #

在post_view的State类中，点击增减按钮修改_posts内的数据后，必须调用setState()触发Widget重建，这样BarGraph才能获取到最新的投票数据：

class _PostViewState extends State<PostView> {
  late List<Post> _posts;

  @override
  void initState() {
    super.initState();
    _posts = Post.generateData();
  }

  // 点赞递增逻辑
  void _addLike(int index) {
    setState(() {
      _posts[index].likes++;
    });
  }

  // 点踩递增逻辑
  void _addDislike(int index) {
    setState(() {
      _posts[index].dislikes++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DataTable(
          columns: const [
            DataColumn(label: Text('标题')),
            DataColumn(label: Text('操作')),
          ],
          rows: _posts.asMap().entries.map((entry) {
            final index = entry.key;
            final post = entry.value;
            return DataRow(cells: [
              DataCell(Text(post.title)),
              DataCell(Row(
                children: [
                  IconButton(
                    icon: const Icon(Icons.thumb_up),
                    onPressed: () => _addLike(index),
                  ),
                  IconButton(
                    icon: const Icon(Icons.thumb_down),
                    onPressed: () => _addDislike(index),
                  ),
                ],
              )),
            ]);
          }).toList(),
        ),
        // 直接传递更新后的_posts给BarGraph
        BarGraph(tableData: _posts),
      ],
    );
  }
}

3. 避免空检查运算符滥用 #

• 确保Post.generateData()返回非空的List<Post>，比如默认返回至少一条测试数据，避免_posts为空。
• 如果担心数据为空，在BarGraph中提前处理空列表情况：

@override
Widget build(BuildContext context) {
  if (tableData.isEmpty) {
    return const Center(child: Text('暂无数据'));
  }
  // 正常绘制图表逻辑
  ...
}

核心逻辑说明 #

Post是可变对象，修改其likes/dislikes属性后，_posts列表的引用并未改变，但内部数据已更新。通过setState()触发重建，BarGraph会重新读取_posts的最新数据，从而实现动态图表效果。

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