Flutter样式管理插件xtyle的使用

Xtyle

Xtyle 意味着 “多语言样式”。

作为设计需求，经常会有不同字体的需求，包括英语和本地语言。

此包允许你为不同类型的字符（包括英语、数字、英数混合字符、韩语、表情符号等）使用不同的字体。

开始使用

在 pubspec.yaml 文件中添加 xtyle：

dependencies:
  xtyle:

示例

在 main.dart 中初始化 Xtyle：

import 'package:xtyle/xtyle.dart';

void main() {
  ...
  Xtyle.init(
    configuration: XtyleConfig.korean(
      fontFamilyKor: 'SpoqaHanSansNeo', // 韩文字体
      defaultFontFamily: 'DancingScript', // 默认字体
    ),
  );
  runApp(const MyApp());
}

使用 XtyleText 小部件代替 Text 小部件：

XtyleText(
  'Hello안녕123한글과English',
  style: Theme.of(context).textTheme.bodyMedium,
),

支持的语言映射

• 韩语
• 英语（含大小写）
• 数字
• 英数混合字符
• 表情符号
• （其他语言将被支持。如有需要，请创建问题或提交PR并附上正则表达式）

完整示例代码

以下是完整的示例代码，展示了如何在应用中使用 Xtyle。

import 'package:flutter/material.dart';
import 'package:xtyle/xtyle.dart';

void main() {
  Xtyle.init(
    configuration: XtyleConfig.korean(
      fontFamilyKor: 'SpoqaHanSansNeo',
      defaultFontFamily: 'DancingScript',
    ),
  );
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Xtyle Example',
      theme: ThemeData(
        fontFamily: 'Roboto',
        useMaterial3: true,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.black,
          foregroundColor: Colors.white,
        ),
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Xtyle Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController textEditingController = 
      TextEditingController(text: 'XYZ마트 파격Sale행사 60%!\n🎁 환Welcome영 🎁');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
        child: Container(
          height: MediaQuery.of(context).size.height,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                child: Column(
                  children: [
                    Text(
                      '👇 Type something 👇',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                    const SizedBox(height: 24),
                    TextFormField(
                      controller: textEditingController,
                      maxLines: 5,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                      ),
                      onChanged: (_) => setState(() {}),
                    ),
                  ],
                ),
              ),
              Row(
                children: [
                  Expanded(
                    child: _TextWidget(
                      label: 'Flutter Text Widget',
                      child: Text(
                        textEditingController.text,
                        maxLines: 5,
                        overflow: TextOverflow.ellipsis,
                        style: Theme.of(context).textTheme.bodyMedium,
                      ),
                    ),
                  ),
                  const SizedBox(width: 24),
                  Expanded(
                    child: _TextWidget(
                      label: 'XtyleText Widget',
                      child: XtyleText(
                        textEditingController.text,
                        maxLines: 5,
                        overflow: TextOverflow.ellipsis,
                        style: Theme.of(context).textTheme.bodyMedium,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _TextWidget extends StatelessWidget {
  final String label;
  final Widget child;
  const _TextWidget({
    Key? key,
    required this.label,
    required this.child,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          label,
          style: Theme.of(context).textTheme.titleMedium,
        ),
        Container(
          width: double.maxFinite,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4.0),
            border: Border.all(),
          ),
          margin: const EdgeInsets.symmetric(vertical: 16.0),
          padding: const EdgeInsets.all(16.0),
          child: child,
        ),
      ],
    );
  }
}