[TOC] # Fluent UI for Flutter ## 1. 简介 `fluent_ui` 是一个基于 [Microsoft Fluent Design System](https://learn.microsoft.com/en-us/windows/apps/design/) 的 Flutter UI 组件库，提供与 Windows 原生应用一致的用户界面风格。 该库专为在 Windows 桌面平台上构建原生体验的 Flutter 应用而设计，也支持其他平台（部分功能受限）。 **特点：** - 完整还原 Windows 11 风格控件（按钮、菜单、导航栏、命令栏等） - 支持深色模式、自适应大小、响应式布局 - 面向桌面优先体验，适合企业级工具或后台 UI GitHub: [https://github.com/bdlukaa/fluent_ui](https://github.com/bdlukaa/fluent_ui) Pub: [https://pub.dev/packages/fluent_ui](https://pub.dev/packages/fluent_ui) --- ## 2. 安装 在你的 `pubspec.yaml` 文件中添加： ```yaml dependencies: fluent_ui: ^4.8.7 # 请根据 pub.dev 最新版本选择 ``` 代码 ``` 3. 示例 以下是一个基本示例，展示 Fluent UI 应用框架和按钮使用方式： dart 复制 编辑 import 'package:fluent_ui/fluent_ui.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return FluentApp( debugShowCheckedModeBanner: false, title: 'Fluent UI Demo', theme: ThemeData( brightness: Brightness.light, accentColor: Colors.blue, ), home: const HomePage(), ); } } class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { return NavigationView( content: ScaffoldPage( header: const PageHeader(title: Text('Fluent UI 示例')), content: Center( child: FilledButton( onPressed: () { showDialog( context: context, builder: (_) => const ContentDialog( title: Text('提示'), content: Text('你点击了按钮'), actions: [CloseButton()], ), ); }, child: const Text('点击我'), ), ), ), ); } } ```