Flutter UI设计插件sfac_design_flutter的使用

SniperFactory 设计系统设计工具包

设计系统是一个整合所有与设计相关元素的系统。SniperFactory 的设计系统旨在开发人员和设计师共同创建，目标是为应用程序/网页开发提供所有已设计的组件。

您可以在此页面上查看使用方法：文档
与我们一起在 SniperFactory 学习。

支持的组件

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  sfac_design_flutter: ^1.0.0

导入

在 Dart 文件中导入以下库：

import 'package:sfac_design_flutter/sfac_design_flutter.dart';

如何使用

下面是一个使用 SFAccordion 的简单示例：

SFAccordion(
  title: Text('开发经验不足可以参加吗？'),
  content: Text('当然可以。Flutter 移动应用开发课程从零开始，逐步引导你学习。'),
)

完整示例

下面是一个包含多个组件的完整示例：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sfac_design_flutter/sfac_design_flutter.dart';
import 'package:sfac_design_flutter/widgets/searchfield/searchfield.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SFAC Widget',
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 头部信息
                Row(
                  children: [
                    const SFAvatar(
                      backgroundColor: Colors.white,
                    ),
                    const SizedBox(
                      width: 8,
                    ),
                    Text(
                      'SniperFactory 设计系统',
                      style: SFTextStyle.b2B18(),
                    )
                  ],
                ),
                
                // Badge 示例
                const SFCard(
                  margin: EdgeInsets.symmetric(vertical: 4),
                  title: Text('Badge'),
                  verticalSpacing: 8,
                  content: Row(
                    children: [
                      SFBadge(
                        child: Text(
                          'primary',
                        ),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      SFBadge(
                        status: SFBadgeStatus.secondary,
                        child: Text(
                          'secondary',
                        ),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      SFBadge(
                        status: SFBadgeStatus.outline,
                        child: Text(
                          'outline',
                        ),
                      ),
                      SizedBox(
                        width: 4,
                      ),
                      SFBadge(
                        status: SFBadgeStatus.destructive,
                        child: Text(
                          'destructive',
                        ),
                      ),
                    ],
                  ),
                ),
                
                // 按钮示例
                SFCard(
                  margin: const EdgeInsets.symmetric(vertical: 4),
                  verticalSpacing: 8,
                  title: const Text('Button'),
                  content: Column(
                    children: [
                      SFButton(
                        onPressed: () {},
                        child: const Text('primary'),
                      ),
                      const SizedBox(height: 8),
                      SFButton(
                        status: SFButtonStatus.secondary,
                        onPressed: () {},
                        child: const Text('secondary'),
                      ),
                      const SizedBox(height: 8),
                      SFButton(
                        status: SFButtonStatus.outline,
                        onPressed: () {},
                        child: const Text('outline'),
                      ),
                      const SizedBox(height: 8),
                      SFButton(
                        status: SFButtonStatus.destructive,
                        onPressed: () {},
                        child: const Text('destructive'),
                      ),
                      const SizedBox(height: 8),
                      SFButton(
                        status: SFButtonStatus.link,
                        onPressed: () {},
                        child: const Text('link'),
                      ),
                      const SizedBox(height: 8),
                      SFButton(
                        status: SFButtonStatus.disabled,
                        onPressed: () {},
                        child: const Text('disabled'),
                      ),
                      const SizedBox(height: 8),
                      SFButton(
                        status: SFButtonStatus.asChild,
                        onPressed: () {},
                        child: const Text('asChild'),
                      ),
                    ],
                  ),
                ),
                
                // 搜索字段示例
                const SFCard(
                  margin: EdgeInsets.symmetric(vertical: 4),
                  title: Text('搜索字段'),
                  content: SFSearchField(),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}