today_actions_card.dart 3.78 KB
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../controllers/today_controller.dart';

/// Figma: 每日行动 — 睡眠/健身/步数卡片,横向可滑动
class TodayActionsCard extends GetView<TodayController> {
  const TodayActionsCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标题
        const Padding(
          padding: EdgeInsets.only(bottom: 12),
          child: Text(
            '每日行动',
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w600,
              color: Color(0xFF0F0F11),
            ),
          ),
        ),
        // 横向滑动卡片列表
        SizedBox(
          height: 110,
          child: ListView.separated(
            scrollDirection: Axis.horizontal,
            itemCount: controller.dailyActions.length,
            separatorBuilder: (_, __) => const SizedBox(width: 12),
            itemBuilder: (_, i) {
              final item = controller.dailyActions[i];
              return _ActionCard(item: item);
            },
          ),
        ),
      ],
    );
  }
}

class _ActionCard extends StatelessWidget {
  final DailyActionItem item;

  const _ActionCard({required this.item});

  static const _brandColor = Color(0xFF845EEE);
  static const _h1 = Color(0xFF0F0F11);
  static const _h2 = Color(0xFF666666);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 140,
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题行
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                item.label,
                style: const TextStyle(
                  fontSize: 13,
                  color: _brandColor,
                  fontWeight: FontWeight.w500,
                ),
              ),
              const Icon(Icons.chevron_right, size: 16, color: _h2),
            ],
          ),
          const Spacer(),
          // 数值
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                item.value,
                style: const TextStyle(
                  fontSize: 26,
                  fontWeight: FontWeight.w700,
                  color: _h1,
                  height: 1,
                ),
              ),
              const SizedBox(width: 3),
              Padding(
                padding: const EdgeInsets.only(bottom: 2),
                child: Text(
                  item.unit,
                  style: const TextStyle(
                    fontSize: 12,
                    color: _h2,
                  ),
                ),
              ),
              if (item.subValue != null) ...[
                const SizedBox(width: 2),
                Text(
                  item.subValue!,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: _h1,
                    height: 1,
                  ),
                ),
                const SizedBox(width: 3),
                Padding(
                  padding: const EdgeInsets.only(bottom: 2),
                  child: Text(
                    item.subUnit ?? '',
                    style: const TextStyle(
                      fontSize: 12,
                      color: _h2,
                    ),
                  ),
                ),
              ],
            ],
          ),
        ],
      ),
    );
  }
}