Flutter自定义本地化实现：应用内选择语言切换文本方案

1. 统一管理语言资源文件 #

为每种目标语言创建独立的键值对配置文件（推荐JSON格式），用统一的键名对应不同语言的文本内容，确保切换时无需修改UI逻辑：

• locales/en.json（英语）：

  {
    "welcome": "Welcome",
    "settings": "Settings",
    "logout": "Logout"
  }
  

• locales/gu.json（古吉拉特语）：

  {
    "welcome": "સ્વાગત છે",
    "settings": "સેટિંગ્સ",
    "logout": "લોગઆઉટ"
  }
  

• locales/hi.json（印地语）：

  {
    "welcome": "स्वागत है",
    "settings": "सेटिंग्स",
    "logout": "लॉगआउट"
  }
  

2. 实现全局语言管理模块 #

创建一个单例类或全局状态容器，负责加载语言资源、管理当前语言、提供文本获取方法，并触发UI更新通知：

class LanguageManager {
  constructor() {
    // 优先从本地存储读取用户上次选择的语言，默认英语
    this.currentLang = localStorage.getItem('selectedLang') || 'en';
    this.languageData = {};
  }

  // 加载指定语言的资源文件
  async loadLanguage(langCode) {
    try {
      const response = await fetch(`./locales/${langCode}.json`);
      this.languageData = await response.json();
      this.currentLang = langCode;
      // 持久化用户选择
      localStorage.setItem('selectedLang', langCode);
      // 触发语言变更事件，通知UI更新
      window.dispatchEvent(new CustomEvent('languageChanged'));
    } catch (err) {
      console.error('加载语言资源失败:', err);
    }
  }

  // 根据键名获取当前语言的文本，找不到时返回键名本身作为 fallback
  getText(key) {
    return this.languageData[key] || key;
  }
}

// 全局实例，供全应用调用
const langManager = new LanguageManager();

3. 绑定UI与动态更新 #

页面元素不直接写死文本，通过langManager.getText()获取内容，并监听语言变更事件实现自动更新：

// 更新所有需要多语言的UI元素
function updateAppText() {
  document.getElementById('welcome-title').textContent = langManager.getText('welcome');
  document.getElementById('settings-link').textContent = langManager.getText('settings');
  document.getElementById('logout-btn').textContent = langManager.getText('logout');
}

// 监听语言变更，自动刷新UI
window.addEventListener('languageChanged', updateAppText);

// 绑定语言选择按钮的点击事件
document.getElementById('lang-en').addEventListener('click', () => langManager.loadLanguage('en'));
document.getElementById('lang-gu').addEventListener('click', () => langManager.loadLanguage('gu'));
document.getElementById('lang-hi').addEventListener('click', () => langManager.loadLanguage('hi'));

// 应用初始化时加载默认语言
langManager.loadLanguage(langManager.currentLang).then(updateAppText);

4. 框架适配（可选） #

如果使用React、Vue等框架，可以结合框架特性简化实现：

• Vue：将langManager集成到全局状态，用$t(key)方法在模板中获取文本，配合响应式变量自动更新UI。
• React：用Context提供语言管理实例，在组件中订阅语言变化，通过useState或useContext触发重渲染。

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