official_theme_grid.dart 2.32 KB
import 'package:doublefeel_flutter/core/util/size_extensions.dart';
import 'package:flutter/material.dart';

import '../models/watch_theme_models.dart';
import 'watch_theme_character_avatar.dart';
import 'watch_theme_colors.dart';
import 'watch_theme_section_card.dart';

class OfficialThemeGrid extends StatelessWidget {
  const OfficialThemeGrid({
    super.key,
    required this.themes,
    required this.selectedIndex,
    required this.onThemeTap,
  });

  final List<WatchThemeItem> themes;
  final int selectedIndex;
  final ValueChanged<int> onThemeTap;

  @override
  Widget build(BuildContext context) {
    return WatchThemeSectionCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const WatchThemeSectionTitle('官方主题'),
          SizedBox(height: 22.dp),
          GridView.builder(
            shrinkWrap: true,
            padding: EdgeInsets.zero,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: themes.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 21,
              crossAxisSpacing: 19,
            ),
            itemBuilder: (context, index) {
              final theme = themes[index];
              return GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => onThemeTap(index),
                child: Column(
                  children: [
                    WatchThemeCharacterAvatar(
                      size: 88,
                      selected: index == selectedIndex,
                      assetPath: theme.infoList.firstOrNull?.assetPath,
                    ),
                    SizedBox(height: 8),
                    Text(
                      theme.title,
                      textAlign: TextAlign.center,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: WatchThemeColors.textPrimary,
                        fontSize: 12.dp,
                        fontWeight: FontWeight.w400,
                        height: 1.25,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}