Flutter中如何让导入的自定义DropDown组件实现多语言切换？

1. 移除全局状态，改用组件内部状态 #

全局的dropdownValue会导致多个组件实例共享同一状态，引发逻辑混乱，将其移到_DropDownState类内部：

class DropDown extends StatefulWidget {
  const DropDown({Key? key}) : super(key: key);

  @override
  State<DropDown> createState() => _DropDownState();
}

class _DropDownState extends State<DropDown> {
  // 将状态变量移到组件内部
  String dropdownValue = 'English';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      icon: const Icon(
        Icons.language,
        color: scTealColor,
      ),
      value: dropdownValue,
      elevation: 16,
      style: smBodyStyle,
      underline: Container(
        height: 2,
        color: scTealColor,
      ),
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue = newValue ?? "";
          Locale newLocale = dropdownValue == 'French' 
              ? const Locale('fr') 
              : const Locale('en');
          // 明确获取EasyLocalizations实例更新语言
          EasyLocalizations.of(context)?.setLocale(newLocale);
        });
      },
      items: <String>['English', 'French']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

2. 确保父页面监听Locale变化 #

页面需要感知语言切换事件才能触发重建，保证本地化文本更新。可以通过两种方式实现：

方式一：在StatelessWidget中依赖Locale #

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 获取当前Locale，让页面感知变化
    final locale = EasyLocalizations.of(context)?.locale ?? const Locale('en');
    return Scaffold(
      appBar: AppBar(title: Text(tr('page_title'))),
      body: const Padding(
        padding: EdgeInsets.all(25),
        child: DropDown(),
      ),
    );
  }
}

方式二：在StatefulWidget中监听依赖变化 #

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 语言变化时强制页面重建
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(tr('page_title'))),
      body: const Padding(
        padding: EdgeInsets.all(25),
        child: DropDown(),
      ),
    );
  }
}

3. 更解耦的方案：通过回调让父组件处理语言切换 #

把语言切换逻辑从组件抽离，通过回调传递给父页面，避免上下文依赖，提升组件通用性：

class DropDown extends StatefulWidget {
  // 定义语言切换回调
  final Function(Locale) onLocaleChanged;
  final Locale initialLocale;

  const DropDown({
    Key? key,
    required this.onLocaleChanged,
    required this.initialLocale,
  }) : super(key: key);

  @override
  State<DropDown> createState() => _DropDownState();
}

class _DropDownState extends State<DropDown> {
  late String dropdownValue;

  @override
  void initState() {
    super.initState();
    // 根据初始语言设置默认选项
    dropdownValue = widget.initialLocale.languageCode == 'fr' 
        ? 'French' 
        : 'English';
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      icon: const Icon(
        Icons.language,
        color: scTealColor,
      ),
      value: dropdownValue,
      elevation: 16,
      style: smBodyStyle,
      underline: Container(
        height: 2,
        color: scTealColor,
      ),
      onChanged: (String? newValue) {
        if (newValue == null) return;
        setState(() {
          dropdownValue = newValue;
        });
        Locale newLocale = newValue == 'French' 
            ? const Locale('fr') 
            : const Locale('en');
        // 调用父组件的回调处理语言切换
        widget.onLocaleChanged(newLocale);
      },
      items: <String>['English', 'French']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

父页面使用示例：

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final easyLoc = EasyLocalizations.of(context)!;
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: DropDown(
          initialLocale: easyLoc.locale,
          onLocaleChanged: (locale) {
            easyLoc.setLocale(locale);
          },
        ),
      ),
    );
  }
}

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