Flutter UI组件库插件 tdesign_flutter 的使用

Tencent TDesign 是一个适用于移动项目的 Flutter UI 组件库。

Features

• 提供符合 TDesign 设计风格的 Flutter UI 组件库
• 支持根据应用设计风格自定义主题
• 提供常用图标库并支持自定义替换
• 按照 TDesign 规范定义颜色组，可以在 TDColors 中查看，便于组件适应 TDesign 规范
• 颜色值声明类可以添加默认颜色，并实时查看颜色值的默认显示效果

Notice

• 主题样式（如颜色、字体大小、字体样式、圆角、阴影等）可以通过 JSON 文件配置。通过 TDTheme.of(context) 或 TDTheme.defaultData() 获取主题数据。建议所有组件使用 TDTheme.of(context)，只有不需要跟随本地主题的组件可以使用 TDTheme.defaultData()。
• 颜色、字体、圆角等的使用示例：

TDTheme.of(context).brandNormalColor
TDTheme.defaultData().fontBodyLarge

• TDesign 的图标不跟随主题，全部为 ttf 格式，使用示例：

Icon(TDIcons.activity)

• 示例代码位于 example/lib/page/

SDK 依赖版本

• dart: “>=2.19.0 <4.0.0”
• flutter: “>=3.7.0”

其他技术栈实现

• Desktop Vue 3 实现：web-vue-next
• Desktop React 实现：web-react
• 小程序实现：miniprogram

Feedback

开源协议

TDesign 采用 MIT LICENSE

致谢

TDesign Flutter 依赖以下组件库，感谢作者的开源贡献：

• flutter_easyrefresh
• flutter_swiper
• flutter_slidable
• image_picker

示例代码

以下是一个完整的示例代码，展示了如何使用 tdesign_flutter 插件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:tdesign_flutter/src/util/log.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'base/example_route.dart';
import 'base/intl_resource_delegate.dart';
import 'config.dart';
import 'home.dart';

void main() {
  Log.setCustomLogPrinter((level, tag, msg) => print('[$level] $tag ==>> $msg'));
  runApp(const MyApp());

  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  ));

  exampleMap.forEach((key, value) {
    value.forEach((model) {
      examplePageList.add(model);
    });
  });
  sideBarExamplePage.forEach(examplePageList.add);
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late TDThemeData _themeData;
  Locale? locale = const Locale('zh');

  @override
  void initState() {
    super.initState();
    _themeData = TDThemeData.defaultData();
  }

  @override
  Widget build(BuildContext context) {
    // 使用多套主题
    TDTheme.needMultiTheme();
    // 适配3.16的字体居中前,先禁用字体居中功能
    // kTextForceVerticalCenterEnable = false;
    var delegate = IntlResourceDelegate(context);
    return MaterialApp(
      title: 'TDesign Flutter Example',
      theme: ThemeData(extensions: [_themeData], colorScheme: ColorScheme.light(primary: _themeData.brandNormalColor)),
      home: PlatformUtil.isWeb ? null : Builder(
        builder: (context) {
          // 设置文案代理,国际化需要在MaterialApp初始化完成之后才生效,而且需要每次更新context
          TDTheme.setResourceBuilder((context) => delegate..updateContext(context), needAlwaysBuild: true);
          return MyHomePage(
            title: AppLocalizations.of(context)?.components ?? '',
            locale: locale,
            onLocaleChange: (locale){
              setState(() {
                this.locale = locale;
              });
            },
            onThemeChange: (themeData) {
              setState(() {
                _themeData = themeData;
              });
            },
          );
        },
      ),
      // 设置国际化处理
      locale: locale,
      supportedLocales: AppLocalizations.supportedLocales,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      onGenerateRoute: TDExampleRoute.onGenerateRoute,
      routes: _getRoutes(),
    );
  }

  Map<String, WidgetBuilder> _getRoutes() {
    if (PlatformUtil.isWeb) {
      return {for (var model in examplePageList) model.name: (context) => model.pageBuilder.call(context, model)}
        ..putIfAbsent('/', () => (context) => const MyHomePage(title: 'TDesign Flutter 组件库'));
    } else {
      return const {};
    }
  }
}

这个示例代码展示了如何初始化和配置 tdesign_flutter 插件，包括设置日志、系统 UI 样式、主题数据、国际化处理等。希望对你有所帮助！