我如何使用参数小部件轻松本地化？

Question

当我将本地化文本嵌入到我设计的小部件中时，它无需热重载即可工作。但是，

当我设计一个自定义小部件并使用参数 headlineText: (LocaleKeys.landing_welcome_headline).tr() 发送它时，数据在热重载之前不会更改。是的，它们不在同一棵树上，而且它们的上下文也不同。

这是我的本地化课程

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:rezyonapp/core/constants/enums/locales.dart';

@immutable
final class ProductLocalization extends EasyLocalization {
  ProductLocalization({super.key, required super.child})
      : super(
          supportedLocales: _supportedItems,
          path: _translationPath,
          useOnlyLangCode: true,
        );

  static final List<Locale> _supportedItems = [
    Locales.tr.locale,
    Locales.en.locale,
  ];

  static const String _translationPath = "asset/translations";

  /// change project language by using locales
  static Future<void> updateLanguage({
    required BuildContext context,
    required Locales value,
  }) =>
      context.setLocale(value.locale);
}

下面的代码不会改变我的屏幕，直到我热重载

 CarouselWidget(
                              headlineText: (LocaleKeys.landing_welcome_headline).tr(),
                              bodyText: (LocaleKeys.landing_welcome_body).tr(),
                              languageWidget: Consumer<DropdownService>(
                                builder: (context, value, child) => Container(
                                  child: DropdownButtonFormField<String>(
                                    decoration: InputDecoration(
                                      focusedBorder: UnderlineInputBorder(
                                          borderSide: BorderSide(color: ProjectColors.mainProjectColorMetallicSeaweed)),
                                      prefixIcon: const Icon(Icons.language),
                                    ),
                                    isExpanded: true,
                                    value: value.selectedCountry,
                                    icon: const Icon(Icons.arrow_downward),
                                    elevation: 30,
                                    style: TextStyle(color: ProjectColors.mainProjectColorMetallicSeaweed),
                                    onChanged: (String? v) {
                                      value.setCountryValue(v);
                                      if (v == "Türkçe") {
                                        ProductLocalization.updateLanguage(context: context, value: Locales.tr);
                                      } else {
                                        ProductLocalization.updateLanguage(context: context, value: Locales.en);
                                      }
                                    },
                                    items: value.countryDropwnList.map<DropdownMenuItem<String>>((String value) {
                                      return DropdownMenuItem<String>(
                                        value: value,
                                        child: Text(value),
                                      );
                                    }).toList(),
                                  ),
                                ),
                              ),
                            ),

下面的代码立即在我的屏幕上更改

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

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
          side: BorderSide(
            color: ProjectColors.mainProjectColorMetallicSeaweed,
          )),
      onPressed: () async {},
      child: Text(
        ((LocaleKeys.landing_button_save).tr()),
        style: Theme.of(context)
            .textTheme
            .bodyMedium
            ?.copyWith(color: ProjectColors.mainProjectColorMetallicSeaweed, fontWeight: FontWeight.w600),
      ),
    );
  }
}

这个问题有什么解决办法吗？

Answer 1

我会分享对我有帮助的答案。

在构建方法中，调用rebuildAllChildren函数并向其传递上下文：

@override
Widget build(BuildContext context) { 
  rebuildAllChildren(context);
  return ...
}

void rebuildAllChildren(BuildContext context) {
  void rebuild(Element el) {
    el.markNeedsBuild();
    el.visitChildren(rebuild);
  }
  (context as Element).visitChildren(rebuild);
}

这将拜访所有儿童并将他们标记为需要重建。如果您将此代码放在小部件树中最顶层的小部件中，它将重建所有内容。

您可以在此处

查看更多详细信息和其他答案