Flutter项目快速搭建插件flutter_project_kit的使用

Flutter项目快速搭建插件flutter_project_kit的使用

flutter_project_kit（flutter_project_kit）是一个旨在简化和增强您的Flutter项目的综合包。它提供了可定制的路由、主题、按钮、通知栏、更多文本小部件等，可以加快开发速度，同时保持应用程序设计的吸引力和一致性。

功能

• 路由管理：通过可定制的导航流无缝管理路由。
• 主题管理：轻松切换浅色和深色主题，并完全自定义。
• 按钮：具有丰富样式和功能的预构建按钮。
• 通知栏：具有多种类型和自定义选项的美观通知栏。
• 更多文本：具有“查看更多”和“收起”功能的灵活且可定制的文本小部件。
• 扩展方法：有用的扩展方法，使您的代码更高效。

安装

在 pubspec.yaml 文件中添加 flutter_project_kit：

dependencies:
  flutter_project_kit: latest_version

然后运行以下命令：

flutter pub get

使用

1. 按钮

ProKitButton 小部件允许您创建各种具有自定义样式的按钮，包括图标、渐变等。

示例

ProKitButton(
  text: "点击我",
  onPressed: () {
    // 执行某些操作
  },
  buttonStyle: ProKitButtonStyle.gradient, // 渐变样式
  showIcon: true,  // 显示带有按钮的图标
  iconAsset: "assets/icons/custom_icon.svg", // 图标资产SVG文件路径
  buttonColor: Colors.blue, // 按钮背景颜色
  gradient: LinearGradient( // 渐变颜色
    colors: [Colors.red, Colors.orange],
  ),
)

其他按钮变化包括：

• 简单按钮：仅包含文本的基本按钮。
• 带图标的按钮：为UI提供更多信息的按钮。
• 自定义样式的按钮：通过修改文本样式、填充、阴影等来创建完全自定义的按钮。
• 自定义小部件图标按钮：用任何您想要的小部件替换图标。

2. 通知栏

使用 ProKitSnackBar 在您的应用中显示吸引人的、完全可定制的通知栏。您可以调整通知栏的类型、样式、位置等。

示例

_showSuccessSnackBar(BuildContext context) {
  showProKitSnackBar(
    context,
    title: "成功",
    message: "操作完成。",
    snackBarType: ProKitSnackBarType.bordered,
    notificationType: ProKitNotificationType.success,
  );
}

通知栏类型

• 带边框的通知栏：带有与消息类型匹配的边框的通知栏。
• 带颜色的通知栏：带有与消息类型（成功、错误、警告、帮助）匹配的纯背景色的通知栏。
• 自定义大小：修改通知栏的宽度和高度。
• 定位：在屏幕上的不同位置（如左上角、右上角、中心）显示通知栏。
• 自动关闭：设置通知栏在几秒后自动关闭或保持打开状态直到被用户手动关闭。

3. 更多文本

ProKitRichTextReadMore 小部件允许您截断长文本并添加“查看更多”和“收起”功能，同时还提供完整的样式和行为自定义。

示例

const ProKitRichTextReadMore(
  text: "这是演示查看更多功能的简短示例文本。",
  maxChars: 20, // 显示前的最大字符数
)

您可以进一步自定义小部件：

• 自定义查看更多/收起文本：更改展开/折叠时显示的文本。
• 自定义颜色：设置“查看更多”和“收起”文本的颜色。
• 下划线：启用或禁用“查看更多”和“收起”文本的下划线。
• 自定义动作：添加自定义行为，当点击“查看更多”或“收起”文本时触发。

4. 主题

通过内置的主题支持，无缝集成浅色和深色模式到您的应用中。您可以快速切换主题或根据品牌需求进行自定义。

5. 扩展方法

该包还包括各种扩展方法，可以简化您的Flutter开发。无论是字符串操作还是小部件定制，这些扩展都可以使您的代码更加简洁和易于维护。

入门指南

要开始使用，请导入包：

import 'package:flutter_project_kit/flutter_project_kit.dart';

从那里开始，在您的Flutter应用中使用由 flutter_project_kit 包提供的小部件和实用程序。探索上面提供的每个功能的示例。

贡献

如果您愿意贡献，请随时在GitHub仓库提交问题或拉取请求。

许可证

此包根据MIT许可证授权。

示例代码

以下是示例代码，展示了如何在实际项目中使用 flutter_project_kit 中的功能。

import 'package:flutter/material.dart';
import 'package:flutter_project_kit/project_kit_app.dart';
import 'package:flutter_project_kit/routes/routes.dart';
import 'package:flutter_project_kit/theme/app_theme_model.dart';
import 'package:flutter_project_kit/util/screen_util.dart';
import 'package:flutter_project_kit/widgets/pro_kit_button.dart';
import 'package:flutter_project_kit/widgets/pro_kit_svg.dart';
import 'package:flutter_project_kit/snack_bar/snack_bar.dart';
import 'package:flutter_project_kit/snack_bar/snackbar_enum.dart';
import 'package:flutter_project_kit/widgets/pro_kit_readmore.dart';
import 'package:flutter_project_kit/consumers/theme_consumer.dart';
import 'package:flutter_project_kit/provider/app_theme_provider.dart';
import 'package:flutter_project_kit/theme/app_theme.dart';
import 'package:flutter_project_kit/widgets/pro_kit_text.dart';

final customDarkThemeModel = ProKitThemeModel(
    scaffold: Colors.black,
    text: Colors.white,
    appBarBackground: Colors.green,
    button: Colors.red,
    tabBarBackground: Colors.white);

final customLightThemeModel = ProKitThemeModel(
    scaffold: Colors.white,
    text: Colors.deepOrange,
    appBarBackground: Colors.yellow,
    button: Colors.yellow,
    tabBarBackground: Colors.black);

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ProKitApp(
      customDarkTheme: customDarkThemeModel,
      customLightTheme: customLightThemeModel,
      home: const ProKitPackageExample()
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const ProKitText(
          text: 'ProKit Package 导航',
          size: 20,
          weight: FontWeight.bold,
        ),
      ),
      body: GridView.count(
        crossAxisCount: 2, // 2 cards per row
        padding: const EdgeInsets.all(16.0),
        children: [
          _buildCard(
            context,
            title: 'ProKit Button 示例',
            description: '探索各种按钮类型和功能。',
            screen: const ProKitButtonExampleScreen(),
          ),
          _buildCard(
            context,
            title: '通知栏演示',
            description: '查看如何使用通知栏显示消息。',
            screen: const SnackBarExample(),
          ),
          _buildCard(
            context,
            title: '富文本更多文本',
            description: '了解如何使用富文本和更多文本选项。',
            screen: const ReadMoreTextExample(),
          ),
          _buildCard(
            context,
            title: '主题屏幕',
            description: '使用各种选项自定义您的应用主题。',
            screen: const ThemeChangeExample(),
          ),
          _buildCard(
            context,
            title: '文本示例',
            description: '探索不同的文本样式和字体。',
            screen: const ProKitTextExample(),
          ),
          _buildCard(
            context,
            title: '导航示例',
            description: '演示如何在屏幕之间导航。',
            screen: const NavigationExample(),
          ),
          _buildCard(
            context,
            title: '响应式主屏幕',
            description: '查看应用如何适应各种屏幕尺寸。',
            screen: const ResponsiveNessExample(),
          ),
        ],
      ),
    );
  }

  Widget _buildCard(BuildContext context, {
    required String title,
    required String description,
    required Widget screen,
  }) {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      margin: const EdgeInsets.all(8.0),
      child: InkWell(
        onTap: () {
          ProKitNavigator.pushNamed(screen);
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ProKitText(
                text: title,
                size: 18,
                weight: FontWeight.bold,
              ),
              const SizedBox(height: 10),
              ProKitText(
                text: description,
                size: 14,
                color: Colors.grey[600],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit Button 示例'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 100.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ProKitButton(
                text: "点击我",
                onPressed: () {
                  // 执行某些操作
                },
                buttonStyle: ProKitButtonStyle.gradient,
                showIcon: false,
                iconAsset: "assets/icons/custom_icon.svg",
                buttonColor: Colors.blue,
                gradient: const LinearGradient(
                  colors: [Colors.red, Colors.orange],
                ),
              ),
              SizedBox(height: 20.h),
              // 示例 1: 简单按钮
              ProKitButton(
                text: '简单按钮',
                buttonColor: Colors.blue,
                textStyle: const TextStyle(color: Colors.blue),
                buttonStyle: ProKitButtonStyle.outlined,
                onPressed: () {
                  print('简单按钮按下');
                },
              ),
              SizedBox(height: 20.h),

              /// 示例 2: 带图标的按钮
              ProKitButton(
                text: '带图标的按钮',
                buttonColor: Colors.green,

                buttonStyle: ProKitButtonStyle.flat,
                showIcon: true,
                iconAsset: 'assets/icons/sample_icon.svg', // 图标路径
                iconColor: Colors.white,
                onPressed: () {
                  print('带图标的按钮按下');
                },
              ),
              const SizedBox(height: 20),

              // 示例 3: 自定义样式的按钮
              ProKitButton(
                text: '自定义样式的按钮',
                buttonColor: Colors.red,

                buttonStyle: ProKitButtonStyle.iconButton,
                textStyle: const TextStyle(fontSize: 18, color: Colors.white),
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                borderRadius: BorderRadius.circular(10),
                elevation: 5,
                onPressed: () {
                  print('自定义样式的按钮按下');
                },
              ),
              const SizedBox(height: 20),

              /// 示例 4: 带自定义小部件图标的按钮
              ProKitButton(
                text: '自定义图标的按钮',
                buttonColor: Colors.purple,

                buttonStyle: ProKitButtonStyle.raised,
                showIcon: true,
                customIconWidget: const ProKitSvg(assetName: "assetName"),
                onPressed: () {
                  print('带自定义图标的按钮按下');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit 通知栏网格示例'),
      ),
      body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.count(
            crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,
            /// 3 列用于大屏幕，2 列用于小屏幕
            childAspectRatio: MediaQuery.of(context).size.width > 600 ? 4 : 2.5,
            /// 根据屏幕宽度调整比例以获得更好的文本可见性
            crossAxisSpacing: 8.0,
            /// 列间距
            mainAxisSpacing: 8.0,
            /// 行间距
            children: _buildSnackBarGridItems(context),
          )),
    );
  }

  /// 构建显示通知栏的网格项列表
  List<Widget> _buildSnackBarGridItems(BuildContext context) {
    return [
      _gridSnackBarItem(
        context: context,
        label: "显示带边框的成功通知栏",
        onPressed: () => _showSuccessSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带边框的错误通知栏",
        onPressed: () => _showErrorSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带边框的警告通知栏",
        onPressed: () => _showWarningSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带边框的帮助通知栏",
        onPressed: () => _showHelpSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带边框的自定义大小通知栏",
        onPressed: () => _showCustomSizeSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带边框的居中通知栏",
        onPressed: () => _showCenteredSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带颜色的成功通知栏",
        onPressed: () => _showColoredSuccessSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带颜色的错误通知栏",
        onPressed: () => _showColoredErrorSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带颜色的警告通知栏",
        onPressed: () => _showColoredWarningSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "显示带颜色的帮助通知栏",
        onPressed: () => _showColoredHelpSnackBar(context),
      ),
    ];
  }

  /// 辅助方法用于创建每个通知栏的网格项
  Widget _gridSnackBarItem({
    required BuildContext context,
    required String label,
    required VoidCallback onPressed,
  }) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.blueGrey[50], // 背景颜色
          borderRadius: BorderRadius.circular(8.0), // 圆角
          border: Border.all(color: Colors.blueAccent), // 边框样式
        ),
        child: Center(
          child: Text(
            label,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600),
          ),
        ),
      ),
    );
  }

  /// 显示带边框的成功通知栏
  void _showSuccessSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "成功",
      message: "操作完成。",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.success,
    );
  }

  /// 显示带边框的错误通知栏
  void _showErrorSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "错误",
      message: "发生错误。",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.failure,
      snackBarPosition: ProKitSnackBarPosition.topRight,
    );
  }

  /// 显示带边框的警告通知栏
  void _showWarningSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "警告",
      message: "这是一条警告消息。",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.warning,
      color: Colors.deepOrange,
      autoCloseDuration: const Duration(seconds: 5),
    );
  }

  /// 显示带边框的帮助通知栏
  void _showHelpSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "帮助",
      message: "需要帮助吗？",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.help,
      customIcon: const Icon(Icons.help_outline, color: Colors.blue),
      titleTextStyle: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
      messageTextStyle: const TextStyle(
        fontSize: 14,
        color: Colors.blue,
      ),
    );
  }

  /// 显示带边框的自定义大小通知栏
  void _showCustomSizeSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "自定义大小",
      message: "此通知栏具有自定义宽度和高度。",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.success,
      width: 300,
      height: 100,
    );
  }

  /// 显示带边框的居中通知栏
  void _showCenteredSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "居中通知栏",
      message: "此通知栏显示在屏幕中央。",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.help,
      autoClose: false,
      snackBarPosition: ProKitSnackBarPosition.center,
    );
  }

  /// 显示带颜色的成功通知栏
  void _showColoredSuccessSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "成功",
      message: "操作完成。",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.success,
    );
  }

  /// 显示带颜色的错误通知栏
  void _showColoredErrorSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "错误",
      message: "发生错误。",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.failure,
      snackBarPosition: ProKitSnackBarPosition.topRight,
    );
  }

  /// 显示带颜色的警告通知栏
  void _showColoredWarningSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "警告",
      message: "这是一条警告消息。",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.warning,
      color: Colors.deepOrange,
      autoCloseDuration: const Duration(seconds: 5),
    );
  }

  /// 显示带颜色的帮助通知栏
  void _showColoredHelpSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "帮助",
      message: "需要帮助吗？",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.help,
      customIcon: const Icon(Icons.help_outline, color: Colors.white),
      titleTextStyle: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
      messageTextStyle: const TextStyle(
        fontSize: 14,
        color: Colors.white70,
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const sampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';

    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit 更多文本示例'),
      ),
      body: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 基本用法，最少需要的选项
              const ProKitRichTextReadMore(
                text: "这是演示更多文本功能的简短示例文本。",
                maxChars: 20,
              ),

              // 自定义文本样式、对齐方式和溢出
              const ProKitRichTextReadMore(
                text: "这是稍微长一点的示例文本，演示了小部件中的对齐方式和溢出属性。",
                maxChars: 40,
                textStyle: TextStyle(fontSize: 16, color: Colors.black),
                align: TextAlign.justify,
                overflow: TextOverflow.ellipsis,
              ),

              // 自定义“查看更多”和“收起”文本
              const ProKitRichTextReadMore(
                text: "在这里，我们使用自定义文本用于‘查看更多’和‘收起’。现在显示的是‘显示更多’而不是‘查看更多’。",
                maxChars: 50,
                readMoreText: "显示更多",
                showLessText: "隐藏",
              ),

              // 自定义“查看更多”和“收起”文本颜色
              const ProKitRichTextReadMore(
                text: "此示例演示了如何自定义‘查看更多’和‘收起’文本的颜色以匹配您的应用主题。",
                maxChars: 30,
                readMoreColor: Colors.orange,
                showLessColor: Colors.purple,
              ),

              // 控制“查看更多”和“收起”文本的下划线
              const ProKitRichTextReadMore(
                text: "使用 underlineReadMore 和 underlineShowLess 属性控制是否为‘查看更多’和‘收起’文本添加下划线。",
                maxChars: 60,
                underlineReadMore: false,  // 不为“查看更多”文本添加下划线
                underlineShowLess: true,   // 为“收起”文本添加下划线
              ),

              // 添加自定义点击功能
              ProKitRichTextReadMore(
                text: "此示例包括一个自定义动作，当点击‘查看更多’或‘收起’时触发。您可以提供任何您喜欢的功能。",
                maxChars: 50,
                onTap: () {
                  print("自定义点击动作触发！");
                },
              ),
            ],
          )

      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ProKitTheme.cT.scaffold,
      appBar: AppBar(
        title: const Text('ProKit 主题切换示例'),
      ),
      body: ProKitThemeConsumer(
        builder: (context, themeMode) {
          bool isDark = themeMode == ThemeMode.dark;

          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "当前主题: ${isDark ? "暗色" : "亮色"}",
                  style: TextStyle(color: isDark ? Colors.white : Colors.black),
                ),
                ElevatedButton(
                  onPressed: () {
                    ProKitThemeProvider.state(context).setTheme(
                      theme: isDark ? ThemeMode.light : ThemeMode.dark,
                    );
                  },
                  child: const Text("切换主题"),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKitText 使用示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 1. 简单文本
              const ProKitText(
                text: "简单文本示例",
                size: 18,
                weight: FontWeight.bold,
                color: Colors.black,
              ),

              const SizedBox(height: 20),

              // 2. 下划线文本
              const ProKitText(
                text: "带下划线的文本示例",
                isUnderlined: true,
                color: Colors.red,
                size: 16,
              ),

              const SizedBox(height: 20),

              // 3. 可点击的富文本段落
              ProKitText(
                textSpans: [
                  const ProKitTextSpan(
                    text: "这是一个 ",
                    style: TextStyle(color: Colors.black),
                  ),
                  ProKitTextSpan(
                    text: "可点击的 ",
                    style: const TextStyle(
                      color: Colors.blue,
                      decoration: TextDecoration.underline,
                    ),
                    onTap: () {
                      print("可点击文本段落已点击！");
                    },
                  ),
                  const ProKitTextSpan(
                    text: "部分在富文本中。",
                    style: TextStyle(color: Colors.black),
                  ),
                ],
              ),

              const SizedBox(height: 20),

              // 4. 可选文本
              const ProKitText(
                text: "可选文本示例: 您可以选中此文本！",
                selectable: true,
                size: 14,
                weight: FontWeight.w400,
                color: Colors.green,
              ),

              const SizedBox(height: 20),

              // 5. 具有多个样式的富文本及点击事件
              ProKitText(
                textSpans: [
                  const ProKitTextSpan(
                    text: "探索 ",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                  const ProKitTextSpan(
                    text: "Flutter ",
                    style: TextStyle(
                      color: Colors.orange,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const ProKitTextSpan(
                    text: "通过 ",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                  ProKitTextSpan(
                    text: "ProKitText",
                    style: const TextStyle(
                      color: Colors.blue,
                      decoration: TextDecoration.underline,
                      fontSize: 16,
                    ),
                    onTap: () {
                      print("Flutter ProKitText 已点击！");
                    },
                  ),
                  const ProKitTextSpan(
                    text: " 进行灵活且丰富的文本样式处理！",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                ],
              ),

              const SizedBox(height: 20),

              // 6. 自定义文本样式，带有字母间距和字体族
              const ProKitText(
                text: "自定义字体族和字母间距",
                size: 20,
                weight: FontWeight.w500,
                family: 'Roboto',
                letterSpacing: 2.0,
                color: Colors.purple,
              ),

              const SizedBox(height: 20),

              // 7. 处理长文本溢出
              const ProKitText(
                text: "这是一段非常长的文本示例，如果文本超过此小部件的最大行数，则应正确溢出。",
                size: 16,
                color: Colors.black87,
                overflow: TextOverflow.ellipsis,
                lines: 2, // 限制为两行，超出部分用省略号表示
              ),

              const SizedBox(height: 20),

              // 8. 具有自定义装饰的文本
              const ProKitText(
                text: "带删除线的文本示例",
                textStyle: TextStyle(
                  fontSize: 16,
                  color: Colors.red,
                  decoration: TextDecoration.lineThrough,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit 导航示例'),
      ),
      body: Column(
        children: [
          ProKitButton(
            text: '导航示例 1',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pushNamed(const SnackBarExample(), animationType: NavigateAnimType.rightToLeft);
            },
          ),
          ProKitButton(
            text: '导航示例 2',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pushAndReplace(const SnackBarExample(), animationType: NavigateAnimType.topToBottom);
            },
          ),
          ProKitButton(
            text: '导航示例 3',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pushAndRemoveUntil(const SnackBarExample(), animationType: NavigateAnimType.bottomToTop);
            },
          ),
          ProKitButton(
            text: '返回数据的弹出示例',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pop('来自第三屏的数据');
            },
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化 SizeConfig 以获取屏幕尺寸
    SizeConfig.init(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('响应式设计示例'),
      ),
      body: const ProKitResponsive(
        mobile: MobileView(),
        tablet: TabletView(),
        desktop: DesktopView(),
        largeMobile: LargeMobileView(),
        extraLargeScreen: ExtraLargeView(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 80.w, // 屏幕宽度的80%
        height: 30.h, // 屏幕高度的30%
        color: Colors.blue,
        child: const Center(child: Text('移动视图', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 60.w, // 屏幕宽度的60%
        height: 40.h, // 屏幕高度的40%
        color: Colors.green,
        child: const Center(child: Text('平板视图', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 50.w, // 屏幕宽度的50%
        height: 50.h, // 屏幕高度的50%
        color: Colors.orange,
        child: const Center(child: Text('桌面视图', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 70.w, // 屏幕宽度的70%
        height: 35.h, // 屏幕高度的35%
        color: Colors.purple,
        child: const Center(child: Text('大手机视图', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 50.w, // 屏幕宽度的50%
        height: 50.h, // 屏幕高度的50%
        color: Colors.red,
        child: const Center(child: Text('超大视图', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}