Flutter UI组件库插件tdesign_mobile_flutter的使用

TDesign 是一个适配移动端的组件库，非常适合在 Flutter 技术栈项目中使用。

开始使用

首先，在你的 Flutter 项目中添加 tdesign_mobile_flutter 插件：

flutter pub add tdesign_mobile_flutter

使用示例

以下是一个简单的示例，展示了如何使用 tdesign_mobile_flutter 插件中的 TdButton 组件。

import 'package:flutter/material.dart';
import 'package:tdesign_mobile_flutter/tdesign_mobile_flutter.dart'; // 导入 TDesign 组件库

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TdScaffold( // 使用 TDesign 的 Scaffold
      body: Center( // 居中对齐
        child: TdButton( // 使用 TDesign 的 Button
          onPressed: () { // 按钮点击事件
            print("按钮被点击了！");
          },
          child: const Text('按钮'), // 按钮文本
        ),
      ),
    );
  }
}

代码解释

• 导入包：

  import 'package:tdesign_mobile_flutter/tdesign_mobile_flutter.dart';
  

  这行代码用于导入 tdesign_mobile_flutter 包，以便可以使用该组件库中的各种组件。

• 主函数：

  void main() {
    runApp(MyApp());
  }
  

  这是应用的入口点。runApp() 函数启动应用，并将根小部件设置为 MyApp。

• MyApp 类：

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: MyHomePage(),
      );
    }
  }
  

  MyApp 类继承自 StatelessWidget，它定义了应用的根小部件树。这里我们使用 MaterialApp 作为根小部件，并指定 MyHomePage 作为首页。

• MyHomePage 类：

  class MyHomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return TdScaffold(
        body: Center(
          child: TdButton(
            onPressed: () {
              print("按钮被点击了！");
            },
            child: const Text('按钮'),
          ),
        ),
      );
    }
  }