如何在Flutter中实现随机操作及每次启动显示随机城市与时间

要实现这个需求，核心是每次应用启动/回到前台时，随机选城市并计算其当地时间，步骤如下：

1. 准备城市与时区数据 #

先定义包含城市名称和IANA时区标识的列表，确保时间计算准确：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:timezone/timezone.dart' as tz;
import 'package:timezone/data/latest.dart' as tz;

// 初始化时区数据，在App启动时调用
void initTimeZones() {
  tz.initializeTimeZones();
}

final List<Map<String, String>> cityList = [
  {'name': '阿姆斯特丹', 'timeZone': 'Europe/Amsterdam'},
  {'name': '海牙', 'timeZone': 'Europe/Amsterdam'},
  {'name': '东京', 'timeZone': 'Asia/Tokyo'},
  {'name': '纽约', 'timeZone': 'America/New_York'},
];

2. 随机逻辑与时间计算 #

在页面中通过生命周期监听，实现冷启动/前台切换时的随机刷新：

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

  @override
  State<RandomCityPage> createState() => _RandomCityPageState();
}

class _RandomCityPageState extends State<RandomCityPage> with WidgetsBindingObserver {
  String _cityName = '';
  String _localTime = '';
  final Random _random = Random();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _refreshCityAndTime();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // 应用从后台回到前台时重新随机
    if (state == AppLifecycleState.resumed) {
      _refreshCityAndTime();
    }
  }

  void _refreshCityAndTime() {
    // 随机选城市
    final selectedCity = cityList[_random.nextInt(cityList.length)];
    final city = selectedCity['name']!;
    final location = tz.getLocation(selectedCity['timeZone']!);
    
    // 获取并格式化当地时间
    final tzTime = tz.TZDateTime.now(location);
    final formattedTime = '${tzTime.hour.toString().padLeft(2, '0')}:${tzTime.minute.toString().padLeft(2, '0')}';

    setState(() {
      _cityName = city;
      _localTime = formattedTime;
    });
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          '$_cityName $_localTime',
          style: const TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

补充说明 #

• 需在pubspec.yaml中添加依赖以处理时区：

  dependencies:
    timezone: ^0.9.2
  

• 如果只需要冷启动时随机，去掉WidgetsBindingObserver相关逻辑，保留initState里的_refreshCityAndTime()即可。

内容的提问来源于stack exchange，提问作者serkan