TextTr

简介

TextTr 组件是 Flutter Text 组件的便捷封装，它使用 Nylo Website 的本地化系统自动翻译其内容。

无需编写：

Text("hello_world".tr())

您可以编写：

TextTr("hello_world")

这使您的代码更简洁、可读性更强，尤其是在处理大量翻译字符串时。

基本用法

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      TextTr("welcome_message"),

      TextTr(
        "app_title",
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
    ],
  );
}

该组件将在您的语言文件（例如 /lang/en.json）中查找翻译键：

{
  "welcome_message": "Welcome to our app!",
  "app_title": "My Application"
}

字符串插值

使用 arguments 参数将动态值注入翻译中：

TextTr(
  "greeting",
  arguments: {"name": "John"},
)

在您的语言文件中：

{
  "greeting": "Hello, {{name}}!"
}

输出：Hello, John!

多个参数

TextTr(
  "order_summary",
  arguments: {
    "item": "Coffee",
    "quantity": "2",
    "total": "\$8.50",
  },
)

{
  "order_summary": "You ordered {{quantity}}x {{item}} for {{total}}"
}

输出：You ordered 2x Coffee for $8.50

样式构造函数

TextTr 提供了命名构造函数，自动从主题中应用文本样式：

displayLarge

TextTr.displayLarge("page_title")

使用 Theme.of(context).textTheme.displayLarge 样式。

headlineLarge

TextTr.headlineLarge("section_heading")

使用 Theme.of(context).textTheme.headlineLarge 样式。

bodyLarge

TextTr.bodyLarge("paragraph_text")

使用 Theme.of(context).textTheme.bodyLarge 样式。

labelLarge

TextTr.labelLarge("button_label")

使用 Theme.of(context).textTheme.labelLarge 样式。

样式构造函数示例

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextTr.headlineLarge("welcome_title"),
      SizedBox(height: 16),
      TextTr.bodyLarge(
        "welcome_description",
        arguments: {"app_name": "MyApp"},
      ),
      SizedBox(height: 24),
      TextTr.labelLarge("get_started"),
    ],
  );
}

参数

TextTr 支持所有标准的 Text 组件参数：

对比