Flutter for OpenHarmony天气卡片应用：用枚举与动画打造沉浸式多城市天气浏览体验

enum WeatherCondition {
  sunny, cloudy, rainy, stormy, snowy, foggy;

  String get icon => ...;
  String get description => ...;
  Color get backgroundColor => ...;
  Color get textColor => ...;
}

class CityWeather {
  final String name;
  final int temperature;
  final WeatherCondition condition;
  final int humidity;
  final double windSpeed;
}

AnimatedContainer(
  duration: const Duration(milliseconds: 400),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        condition.backgroundColor.withOpacity(0.7),
        condition.backgroundColor.withOpacity(0.95),
      ],
    ),
  ),
  // ...
)

shadows: [
  Shadow(color: Colors.black.withOpacity(0.1), offset: Offset(0, 2), blurRadius: 4)
]

onHorizontalDragEnd: (details) {
  if (details.primaryVelocity! > 0) _prevCity(); // 右滑
  else if (details.primaryVelocity! < 0) _nextCity(); // 左滑
}

import 'package:flutter/material.dart';

void main() {
  runApp(const WeatherCardApp());
}

class WeatherCardApp extends StatelessWidget {
  const WeatherCardApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '🌤️ 天气卡片',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: const Color(0xFFE6F4FF),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.transparent,
          foregroundColor: Colors.blue,
          elevation: 0,
        ),
      ),
      home: const WeatherCardScreen(),
    );
  }
}

// 天气类型枚举
enum WeatherCondition {
  sunny,
  cloudy,
  rainy,
  stormy,
  snowy,
  foggy;

  String get icon {
    switch (this) {
      case WeatherCondition.sunny:
        return '☀️';
      case WeatherCondition.cloudy:
        return '⛅';
      case WeatherCondition.rainy:
        return '🌧️';
      case WeatherCondition.stormy:
        return '⛈️';
      case WeatherCondition.snowy:
        return '❄️';
      case WeatherCondition.foggy:
        return '🌫️';
    }
  }

  String get description {
    switch (this) {
      case WeatherCondition.sunny:
        return '晴朗';
      case WeatherCondition.cloudy:
        return '多云';
      case WeatherCondition.rainy:
        return '小雨';
      case WeatherCondition.stormy:
        return '雷暴';
      case WeatherCondition.snowy:
        return '小雪';
      case WeatherCondition.foggy:
        return '雾';
    }
  }

  Color get backgroundColor {
    switch (this) {
      case WeatherCondition.sunny:
        return const Color(0xFFFFF8E1); // 淡黄
      case WeatherCondition.cloudy:
        return const Color(0xFFECEFF1); // 浅灰蓝
      case WeatherCondition.rainy:
        return const Color(0xFFE3F2FD); // 雨天蓝
      case WeatherCondition.stormy:
        return const Color(0xFFBBDEFB); // 雷暴深蓝
      case WeatherCondition.snowy:
        return const Color(0xFFE1F5FE); // 雪天冰蓝
      case WeatherCondition.foggy:
        return const Color(0xFFE0E0E0); // 雾天灰
    }
  }

  Color get textColor {
    switch (this) {
      case WeatherCondition.sunny:
        return const Color(0xFF5D4037); // 深棕
      case WeatherCondition.cloudy:
        return const Color(0xFF455A64); // 灰蓝
      case WeatherCondition.rainy:
        return const Color(0xFF0D47A1); // 深蓝
      case WeatherCondition.stormy:
        return const Color(0xFF01579B); // 更深蓝
      case WeatherCondition.snowy:
        return const Color(0xFF01579B);
      case WeatherCondition.foggy:
        return const Color(0xFF212121); // 纯黑
    }
  }
}

// 城市数据模型
class CityWeather {
  final String name;
  final int temperature;
  final WeatherCondition condition;
  final int humidity;
  final double windSpeed; // m/s

  CityWeather({
    required this.name,
    required this.temperature,
    required this.condition,
    required this.humidity,
    required this.windSpeed,
  });
}

class WeatherCardScreen extends StatefulWidget {
  const WeatherCardScreen({super.key});

  @override
  State<WeatherCardScreen> createState() => _WeatherCardScreenState();
}

class _WeatherCardScreenState extends State<WeatherCardScreen> {
  // 预设 6 个虚拟城市天气（覆盖所有天气类型）
  static final List<CityWeather> _cities = [
    CityWeather(
        name: '杭州',
        temperature: 28,
        condition: WeatherCondition.sunny,
        humidity: 60,
        windSpeed: 2.3),
    CityWeather(
        name: '成都',
        temperature: 22,
        condition: WeatherCondition.cloudy,
        humidity: 75,
        windSpeed: 1.8),
    CityWeather(
        name: '广州',
        temperature: 31,
        condition: WeatherCondition.rainy,
        humidity: 85,
        windSpeed: 3.1),
    CityWeather(
        name: '武汉',
        temperature: 33,
        condition: WeatherCondition.stormy,
        humidity: 90,
        windSpeed: 5.7),
    CityWeather(
        name: '哈尔滨',
        temperature: -5,
        condition: WeatherCondition.snowy,
        humidity: 50,
        windSpeed: 4.2),
    CityWeather(
        name: '重庆',
        temperature: 25,
        condition: WeatherCondition.foggy,
        humidity: 88,
        windSpeed: 0.9),
  ];

  int _currentIndex = 0;

  void _nextCity() {
    setState(() {
      _currentIndex = (_currentIndex + 1) % _cities.length;
    });
  }

  void _prevCity() {
    setState(() {
      _currentIndex = (_currentIndex - 1 + _cities.length) % _cities.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    final city = _cities[_currentIndex];
    final condition = city.condition;

    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '今日天气',
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.transparent,
      ),
      body: GestureDetector(
        onHorizontalDragEnd: (details) {
          if (details.primaryVelocity! > 0) {
            _prevCity(); // 右滑 → 上一个
          } else if (details.primaryVelocity! < 0) {
            _nextCity(); // 左滑 → 下一个
          }
        },
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 400),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                condition.backgroundColor.withOpacity(0.7),
                condition.backgroundColor.withOpacity(0.95),
              ],
            ),
          ),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 城市名
                  Text(
                    city.name,
                    style: TextStyle(
                      fontSize: 36,
                      fontWeight: FontWeight.bold,
                      color: condition.textColor,
                      shadows: [
                        Shadow(
                          color: Colors.black.withOpacity(0.1),
                          offset: const Offset(0, 2),
                          blurRadius: 4,
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 12),

                  // 天气图标 + 描述
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        condition.icon,
                        style: const TextStyle(fontSize: 64),
                      ),
                      const SizedBox(width: 16),
                      Text(
                        condition.description,
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.w500,
                          color: condition.textColor.withOpacity(0.9),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 24),

                  // 温度
                  Text(
                    '${city.temperature}°',
                    style: TextStyle(
                      fontSize: 80,
                      fontWeight: FontWeight.bold,
                      color: condition.textColor,
                      height: 0.9,
                    ),
                  ),
                  const SizedBox(height: 16),

                  // 湿度 & 风速
                  Wrap(
                    spacing: 24,
                    runSpacing: 12,
                    alignment: WrapAlignment.center,
                    children: [
                      _buildDetailItem('💧 湿度', '${city.humidity}%'),
                      _buildDetailItem('💨 风速', '${city.windSpeed}m/s'),
                    ],
                  ),

                  const Spacer(),

                  // 切换指示器
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(_cities.length, (index) {
                      return Container(
                        width: 8,
                        height: 8,
                        margin: const EdgeInsets.symmetric(horizontal: 4),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: index == _currentIndex
                              ? Colors.white
                              : Colors.white.withOpacity(0.5),
                        ),
                      );
                    }),
                  ),
                  const SizedBox(height: 24),
                ],
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _nextCity,
        backgroundColor: Colors.white,
        foregroundColor: Colors.blue,
        child: const Icon(Icons.navigate_next, size: 32),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  Widget _buildDetailItem(String label, String value) {
    final city = _cities[_currentIndex];
    return Column(
      children: [
        Text(
          label,
          style: TextStyle(
            fontSize: 16,
            color: city.condition.textColor.withOpacity(0.8),
          ),
        ),
        Text(
          value,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: city.condition.textColor,
          ),
        ),
      ],
    );
  }
}