关于flutter:Flutter-构建漂亮的-Windows-应用程序ーー流畅的设计结构和导航

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

猫哥说

这是一套用来做 Windows UWP APP 的界面解决方案库

界面的搭建，菜单导航 Tab 表单罕用控件款式抽取转场动画图标主题自适应切换都有了

如果你用的话能够 clone 一套，本人保护或者钻研

https://github.com/bdlukaa/fl...

原文

https://itnext.io/flutter-bui...

代码

https://github.com/bdlukaa/fl...

参考

https://pub.dev/packages/flue...

注释

晦涩的设计是微软为设计丑陋的 Windows 程序提供的解决方案。Flutter 最终在 Google i/o 2021 中扩大了对 Windows UWP 的反对，这须要精心设计的 Windows 应用程序。在本文中，我将向您展现如何应用 Flutter 创立一个根本的 Fluent 设计应用程序。

本指南最实用于 Win32 和 UWP Flutter 应用程序。如果你还没有设置你的 UWP 扑动应用程序尚未，依照我的其余指南这样做。

增加所需的包

第一步是由 bdlukaa 装置 fluent_ui 包。

https://pub.dev/packages/flue...

flutter pub add fluent_ui

当初，是时候开始创立咱们的 Fluent Design 应用程序了！

FluentApp

在 main.dart 中，导入 fluent_ui 包:

import 'package:fluent_ui/fluent_ui.dart';

而后，在 build 函数中创立 FluentApp 小部件，这是 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 ()的一些要害属性是 ecastcolor (高亮元素的色彩)和 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 的 home 属性中增加一个 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")          ),      )

导航窗格

关上: 窗格被开展并搁置在内容的左侧。每个类别或页面必须有一个图标

压缩: 窗格搁置在内容的左侧，只显示图标，直到它被开展。

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

这个模式依据窗口的宽度动静地在 Minimal，Compact 和 Open 之间进行抉择。

顶部: 窗格位于内容的上方。它对于不能用图标示意的类别或页面很有用。

要创立 NavigationPane，能够应用 NavigationView 的 pane 属性。而后，咱们能够将 displayMode 设置为 PaneDisplayMode.auto，PaneDisplayMode.open，panedisplaymode.com pact，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")              )            ]          ),

当初，在 MyAppState 类中创立一个 int 类型的变量 index。这将负责管理 NavigationPane 中选定的页面。

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

当初，咱们将索引链接为 NavigationPane 的选定索引。将 NavigationPane 的选定属性设置为索引。

pane: NavigationPane(            selected: index,...

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

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

可选: 要在 NavigationPane 中增加 Acrylic 通明成果，能够在 NavigationView 中将 usecrylic 属性设置为 true。

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

NavigationBody

NavigationBody 用于将页面转换实现为导航视图，并在页面之间切换时执行相干转换。

咱们能够将 NavigationBody 设置为 NavigationView 的内容属性。

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

接下来，咱们须要指定 index 属性作为 NavigationPane 的选定索引。咱们能够将它设置为咱们的索引变量。

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

而后，咱们须要将 children 属性指定为一个 List，其中蕴含要为每个 PaneItem 显示的小部件。留神: children 属性中小部件的程序必须与 PaneItem 小部件的程序雷同。

通常，这些窗口小部件是脚手架页面小部件:

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

脚手架页面

脚手架 page 是 Fluent Design 中的 Material Scaffold。

Header 属性指定顶部栏。

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

Content 属性指定 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()));

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...