You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中ThemeData的ColorScheme在ListView.separated中不生效的原因

Flutter ListView.separated中ColorScheme切换主题不更新的问题

我在Flutter移动端应用中使用明暗主题的ColorScheme,该配置在所有组件中都能正常工作,唯独在ListView.separated中出现问题——首次渲染颜色正常,但切换主题后颜色不会更新。

我的ListView代码如下:

ListView.separated(
  itemCount: itemsList.length,
  separatorBuilder: (BuildContext context, int index) =>
      const SizedBox(
        height: 4.0,
      ),
  itemBuilder: (BuildContext context, int index) {
    return InkWell(
      onTap: () {
        Provider.of<PlayerManager>(context, listen: false)
            .play(index: index);
      },
      child: SizedBox(
        height: 48,
        child: Card(
          color: index.isEven
              ? Theme.of(context).colorScheme.surfaceVariant
              : null,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 6.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      itemsList[index]
                          .number
                          .toString()
                          .padLeft(3),
                      style: Theme.of(context)
                          .textTheme
                          .displaySmall!
                          .copyWith(
                              color: Theme.of(context)
                                  .colorScheme
                                  .onSurfaceVariant),
                    ),
                    const SizedBox(
                      width: 16,
                    ),
                    SizedBox(
                      width: 282,
                      child: Text(itemsList[index].name,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: Theme.of(context)
                              .textTheme
                              .displaySmall!
                              .copyWith(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .onSurfaceVariant)),
                    ),
                    const SizedBox(
                      width: 8,
                    ),
                  ],
                ),
              ),
              Provider.of<PlayerManager>(context)
                              .buttonState ==
                          ButtonState.playing &&
                      Provider.of<PlayerManager>(context)
                              .currentItemIndex ==
                          index
                  ? Padding(
                      padding:
                          const EdgeInsets.only(right: 2.0),
                      child: MyAnimatedIcon(
                        icon: Icons.play_circle,
                        color: Theme.of(context)
                            .colorScheme
                            .primary,
                        backgroundColor: Theme.of(context)
                            .colorScheme
                            .primary
                            .withOpacity(0.7),
                        iconSize: 28,
                        animationMagnifier: 1.14,
                      ),
                    )
                  : Padding(
                      padding:
                          const EdgeInsets.only(right: 8.0),
                      child: Icon(
                        Icons.play_arrow,
                        size: 24,
                        color: Theme.of(context)
                            .colorScheme
                            .onSurfaceVariant,
                      ),
                    ),
            ],
          ),
        ),
      ),
    );
  }),

我曾尝试通过Provider判断深色模式来切换ColorScheme的颜色:

Provider.of<ProfileManager>(context).darkMode ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.secondary

但这种方式无效。有趣的是,改用具体颜色(如Colors.yellow/Colors.blue)时却能正常工作,但这会放弃ColorScheme的所有优势。

最终我找到了解决方案:将itemBuilder中的代码提取为独立的ListItem组件,此时ColorScheme可以正常工作,切换明暗主题时颜色也会随之更新。

我想知道为什么直接在ListView中使用ColorScheme会失效?

内容的提问来源于stack exchange,提问作者tmp

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 01:50:15