Fluent Design System for Flutter

一个基于 Fluent Design 的 Flutter 设计系统包。此包提供了一组可重用的小部件、颜色方案、排版和样式，遵循 Fluent Design 指南。它旨在让开发者更容易创建美观且一致的用户界面，使其在平台上感觉原生。

开始使用

要使用此包，请在 pubspec.yaml 文件中添加 fluent_design_system 作为依赖项。例如：

dependencies:
  fluent_design_system: ^1.0.0

然后运行 flutter packages get 来安装包。

使用

要使用此包提供的小部件、颜色、排版或样式，请在 Dart 代码中导入包。例如：

import 'package:fluent_design_system/fluent.dart';
import 'package:flutter/material.dart';
import 'package:fluent_design_system/design_system.dart';

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

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

  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: FluentDesignSystem.themeData, // 使用 Fluent Design 系统的主题数据
      home: const MyHomePage(title: 'Flutter Demo'),
    );
  }
}

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

  // 这个小部件是你的应用程序的主页。它是有状态的，意味着
  // 它有一个包含影响外观的字段的状态对象（定义如下）。

  // 此类是状态的配置。它保存由父级（在这个例子中是 App 小部件）提供的值（在这里是标题），并
  // 由 State 的构建方法使用。小部件子类中的字段总是标记为“final”。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用 setState 告诉 Flutter 框架某些事情已经改变在这个状态中，
      // 这会导致它重新运行下面的构建方法，以便显示可以反映更新后的值。
      // 如果我们不调用 setState() 而直接改变 _counter，则不会重新运行构建方法，
      // 因此什么也不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用 setState 时都会重新运行此方法，例如上面的 _incrementCounter 方法。
    //
    // Flutter 框架经过优化，以快速重新运行构建方法，
    // 因此你可以重建任何需要更新的内容，而不是必须逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从由 App.build 方法创建的 MyHomePage 对象中获取值，
        // 并将其用于设置我们的应用栏标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局小部件。它接受单个子元素并将它放置在其父元素的中间。
        child: Column(
          // Column 也是一个布局小部件。它接受一组子元素并垂直排列它们。
          // 默认情况下，它会根据其子元素水平调整自身大小，并尝试与父元素一样高。
          //
          // 调用“调试绘制”（在控制台中按“p”，选择 Android Studio 中的“切换调试绘制”操作，
          // 或 Visual Studio Code 中的“切换调试绘制”命令）可以看到每个小部件的线框图。
          //
          // Column 有许多属性来控制它的大小及其子元素的位置。
          // 在这里我们使用 mainAxisAlignment 来垂直居中子元素；主轴是垂直轴，因为 Columns 是垂直的（交叉轴是水平的）。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: kHeadingTextStyle, // 使用 Fluent Design 提供的标题样式
            ),
          ],
        ),
      ),
      floatingActionButton: PrimaryButton(
        onPressed: _incrementCounter,
        tooltip: '点击增加按钮',
        label: '增加',
        child: const Icon(Icons.add), // 使用图标作为按钮内容
      ), // 这个尾随的逗号使构建方法的自动格式化更美观。
    );
  }
}