自定义分类卡片列表滚动时出现异常视觉效果的问题求助

大家好，我最近在开发一个分类卡片列表功能，为了实现自定义图片显示和圆角边框效果，没有使用Flutter自带的Card组件，而是选择用Container搭建基础布局，配合Ink和InkWell实现点击水波纹效果。

但现在遇到了一个奇怪的视觉问题：列表滚动时，卡片组件像是被拆分开来一样出现异常的视觉分解，尤其是从分类详情页返回主列表页的时候，这个问题在真机的release构建版本中表现得特别明显。

我的实现代码如下： #

1. 分类页面主组件

class CategoriesScreen extends ConsumerWidget {
  const CategoriesScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final categoriesNavigationKey = ref.read(categoriesNavigationKeyProvider);
    return PopScope(
      canPop: false,
      onPopInvokedWithResult: (route, result) => categoriesNavigationKey.currentState!.maybePop(),
      child: Navigator(
        key: categoriesNavigationKey,
        initialRoute: '/',
        onGenerateRoute: (settings) {
          if (settings.name != null) {
            final String routeName = settings.name!;
            if (routeName == '/categoryDetails') {
              return CupertinoPageRoute<void>(
                settings: settings,
                builder: (context) => CategoryDetailsScreen(
                  category: Category.fromJson(
                    settings.arguments as Map<String, dynamic>,
                  ),
                ),
              );
            }
          }
          return CupertinoPageRoute<void>(
            settings: settings,
            builder: (context) => const _CategoriesList(),
          );
        },
      ),
    );
  }
}

2. 分类列表组件

class _CategoriesList extends ConsumerWidget {
  const _CategoriesList();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final textTheme = Theme.of(context).textTheme;
    final categoriesScreenController = ref.watch(categoriesControllerProvider);
    return categoriesScreenController.maybeWhen(
      orElse: () {
        return Center(child: CircularProgressIndicator());
      },
      data: (categories) {
        return Scrollbar(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(24.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                spacing: 16,
                children: [
                  Text("Toutes nos catégories", style: textTheme.titleLarge),
                  for (final category in categories) CategoryItem(category: category),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

3. 分类卡片组件

class CategoryItem extends ConsumerWidget {
  final Category category;
  final BorderRadius _borderRadius = const BorderRadius.all(
    Radius.circular(16),
  );

  const CategoryItem({super.key, required this.category});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Ink(
      decoration: BoxDecoration(
        borderRadius: _borderRadius,
        color: Theme.of(context).colorScheme.surface,
        boxShadow: kElevationToShadow[3],
      ),
      child: InkWell(
        onTap: () => ref
            .read(categoriesNavigationKeyProvider)
            .currentState
            ?.pushNamed('/categoryDetails', arguments: category.toJson()),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              clipBehavior: Clip.antiAlias,
              width: double.infinity,
              decoration: BoxDecoration(borderRadius: _borderRadius),
              child: Image.memory(
                category.image,
                fit: BoxFit.cover,
                height: 200,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(22),
              child: Text(
                category.name,
                style: Theme.of(
                  context,
                ).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题现象 #

在真机的release版本中，列表滚动（尤其是从详情页返回主列表路由时），卡片的视觉效果会出现分解，明明是一个完整的组件，却看起来像是被拆成了几个部分。

想请教各位，我是不是在代码实现中遗漏了什么关键配置？还是这属于Flutter引擎或框架层面的问题？

内容来源于stack exchange