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

36次阅读

共计 4898 个字符，预计需要花费 13 分钟才能阅读完成。

这是一套用来做 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 应用程序了！

在 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 设置为 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!"),
      ),
    );

上面是我的应用程序到目前为止的样子:

FluentApp 反对和 MaterialApp 雷同的导航性能，因为咱们都喜爱它。然而，当在 FluentApp 中浏览页面时，咱们应用 FluentPageRoute 来代替 MaterialPageRoute。

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

https://ducafecat.tech/

https://github.com/ducafecat

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

正文完

flutter

发表至： flutter

2021-06-03

0

关于flutter:Flutter-添加APP启动-Story-View

关于flutter:Flutter学习第十三课文本组件Text

关于flutter:XD-to-Flutter-20-现已发布

关于flutter:Dart-Constructors-构造函数使用技巧整理

关于密码学:密码学系列之碰撞抵御和碰撞攻击collision-attack

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

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

微信 flutter 研修群 ducafecat

猫哥说

原文

代码

参考

注释

增加所需的包

FluentApp

导航视图

导航窗格

NavigationBody

脚手架页面

Navigator.push & Navigator.pop

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

Just My Socks（注册教程内含优惠码）

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

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

微信 flutter 研修群 ducafecat

猫哥说

原文

代码

参考

注释

增加所需的包

FluentApp

导航视图

导航窗格

NavigationBody

脚手架页面

Navigator.push & Navigator.pop

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始 新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

Just My Socks（注册教程 内含优惠码）

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

Flutter 实战从零开始新闻客户端

Just My Socks（注册教程内含优惠码）