原文地址：itnext.io/flutter-bui…

原文作者：xuanhantan.medium.com/

发布时间：2021年6月2日 - 6分钟阅读

来源于微软设计

流畅设计是微软设计漂亮的Windows程序的解决方案。在2021年的谷歌I/O大会上，Flutter终于扩大了对Windows UWP的支持，这就要求设计好的Windows应用程序。在这篇文章中，我将告诉你如何用Flutter创建一个基本的Fluent Design应用程序。

本指南对Win32和UWP Flutter应用的效果最好。如果你还没有设置你的UWP Flutter应用程序，请按照我的其他指南来做。

添加所需软件包

第一步是安装bdlukaa的fluent_ui包。

在你的应用程序的文件夹内的命令行中，输入以下命令。

flutter pub add fluent_ui

现在，是时候开始创建我们的Fluent Design应用程序了!

FluentApp

在main.dart中，导入fluent_ui包。

import 'package:fluent_ui/fluent_ui.dart';

然后，在build函数中创建一个FluentApp widget。这是你的Fluent应用程序的基础。

return FluentApp();

你的代码现在应该是这样的。

import 'package:fluent_ui/fluent_ui.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyAppState();
  }
}
class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FluentApp();
  }
}

与MaterialApp类似，FluentApp也有一个主题属性，它接受一个ThemeData()，让你定制你的应用程序的外观。你也可以使用darkTheme属性来设置一个单独的黑暗主题。

ThemeData()的一些关键属性是accentColor，它是高亮元素的颜色，以及scaffoldBackgroundColor，它是你应用程序的背景颜色。当然，还有许多其他属性，如iconTheme、buttonTheme和contentDialogTheme，允许你分别定制图标、按钮和对话框的外观。

下面是一个在FluentApp中使用主题的例子。

return FluentApp(
      theme: ThemeData(
          scaffoldBackgroundColor: Colors.white,
          accentColor: Colors.blue,
          iconTheme: const IconThemeData(size: 24)),
      darkTheme: ThemeData(
          scaffoldBackgroundColor: Colors.black,
          accentColor: Colors.blue,
          iconTheme: const IconThemeData(size: 24)),
);

导航视图

一个NavigationView可以控制Fluent Design页面之间的移动。像这样在Fluent App的主页属性中添加一个NavigationView。

return FluentApp(
        theme: ThemeData(
            scaffoldBackgroundColor: Colors.white,
            accentColor: Colors.blue,
            iconTheme: const IconThemeData(size: 24)),
        darkTheme: ThemeData(
            scaffoldBackgroundColor: Colors.black,
            accentColor: Colors.blue,
            iconTheme: const IconThemeData(size: 24)),
        home: NavigationView()
);

应用栏在许多Windows应用程序中很常见，可以通过appBar属性中的NavigationAppBar实现到NavigationView中。

        home: NavigationView(
          appBar: NavigationAppBar(
                 title: Text("Fluent Design App Bar")
          ),
      )

在微软商店应用程序的顶部可以看到一个应用程序栏

导航窗格

接下来，一个NavigationPane可以被添加到NavigationView中，以便在页面之间进行导航。有五种不同的displayMode（样式）可用。

打开。该窗格被展开并放置在内容的左边。每个类别或页面必须有一个图标。

资料来源：《微软设计--控件和模式》

紧凑。窗格放置在内容的左边，只显示图标，直到它被展开。

来源：微软设计--控件和模式

最小化。在窗格展开之前只显示菜单按钮。当展开时，它被放置在内容的左边。

源于此。微软设计--控制和模式

自动：这种模式会根据窗口的宽度，在最小化、紧凑化和开放化之间动态选择。

来源：微软设计--控件和模式

顶部：窗格被置于内容之上。它对不能用图标表示的类别或页面很有用。

来源：微软设计--控件和模式

为了创建NavigationPane，我们可以使用NavigationView的pane属性。然后，我们可以将displayMode设置为PaneDisplayMode.auto、PaneDisplayMode.open、PaneDisplayMode.compact、PaneDisplayMode.minimal或PaneDisplayMode.top。

        home: NavigationView(
          appBar: NavigationAppBar(
            title: Text("Fluent Design App Bar")),
          pane: NavigationPane(
            displayMode: PaneDisplayMode.auto, 
          ),
      )

接下来，我们需要指定我们的NavigationPane中的项目。我们可以将 items 属性设置为一个 PaneItems 列表。每个PaneItem都接受一个图标和一个标题。下面是我的例子。

          pane: NavigationPane(
            displayMode: PaneDisplayMode.auto,
            items: [
              PaneItem(
                icon: Icon(Icons.code),
                title: Text("Sample Page 1")
              ),
              PaneItem(
                icon: Icon(Icons.desktop_windows_outlined),
                title: Text("Sample Page 2")
              )
            ] 
          ),

我做的NavigatorPane。它有两个PaneItem小部件。

现在，在你的MyAppState类中创建一个名为index的int类型的变量。这将负责管理从NavigationPane中选择的页面。

class MyAppState extends State<MyApp> {
  int index = 0;

现在，我们将链接索引作为导航窗格的选定索引。将NavigationPane的selected属性设置为index。

pane: NavigationPane(
            selected: index,
...

要在选定的PaneItem被改变时更新索引变量，我们需要指定onChanged属性。

pane: NavigationPane(
            selected: index,
            onChanged: (newIndex){
              setState(() {
                index = newIndex;
              });
            },
...

可选的。为了在NavigationPane中添加Acrylic透明效果，我们可以在NavigationView中设置useAcrylic属性为true。

home: NavigationView(
          appBar: NavigationAppBar(
            title: Text("Fluent Design App Bar")),
          useAcrylic: true,
...

导航体

NavigationBody用于实现导航视图的页面转换，在页面之间切换时将进行相关转换。

我们可以将NavigationBody设置为导航视图的内容属性。

home: NavigationView(
          content: NavigationBody(),
...

接下来，我们将需要指定index属性作为NavigationPane的选定索引。我们可以将它设置为我们的索引变量。

home: NavigationView(
          content: NavigationBody(
            index: index
          ),
...

之后，我们将需要将children属性指定为一个包含要为每个PaneItem显示的部件的列表。注意：children属性中的小组件的顺序必须与PaneItem小组件的顺序相同。

通常情况下，这些部件是ScaffoldPage部件。下面是我的children属性的一个例子。

content: NavigationBody(
            index: index,
            children: [
              ScaffoldPage(),
              ScaffoldPage(),
            ],
          ),

脚手架页面

ScaffoldPage相当于Material Scaffold的Fluent Design。

头部属性指定了顶部栏。

ScaffoldPage(
      header: Text(
        "Sample Page 1",
        style: TextStyle(fontSize: 60),
      ),
    ),

在Grove Music应用程序中可以看到标题文本 "我的音乐"。

内容属性指定了ScaffoldPage中的其他小部件，类似于Material Scaffold中的body属性。

ScaffoldPage(
      header: Text(
        "Sample Page 1",
        style: TextStyle(fontSize: 60),
      ),
      content: Center(
        child: Text("Welcome to Page 1!"),
      ),
    );

下面是我的应用程序到目前为止的样子。

Navigator.push & Navigator.pop

FluentApp支持与MaterialApp相同的导航功能，正如我们都喜欢的那样。然而，在FluentApp中的页面之间进行导航时，我们使用FluentPageRoute，而不是MaterialPageRoute。

Navigator.push(context, FluentPageRoute(builder: (context) => Page2()));

结语

这篇文章就写到这里，我希望你现在能够用Flutter创建基本的Fluent Design应用程序。如果你觉得这篇文章很有用，请拍手叫好!

在下一篇文章中，我将向您展示我们如何制作流畅用户界面的按钮、复选框和文本框。到时见!

通过www.DeepL.com/Translator（免费版）翻译

[Flutter翻译]Flutter。构建美丽的Windows应用程序--流畅的设计结构和导航

添加所需软件包

FluentApp

导航视图

导航窗格

导航体

脚手架页面

Navigator.push & Navigator.pop

结语