Flutter TolyUI 框架#04 | 侧栏菜单设计

最新推荐文章于 2024-08-25 22:22:01 发布
最新推荐文章于 2024-08-25 22:22:01 发布
阅读量423 收藏 5
点赞数 3
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30447263/article/details/139180347
版权

theme: cyanosis

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

《Flutter TolyUI 框架》系列前言:

TolyUI 是 张风捷特烈 打造的 Fluter 全平台应用开发 UI 框架。具备 全平台、组件化、源码开放、响应式 四大特点。可以帮助开发者迅速构建具有响应式全平台应用软件：

开源地址： https://github.com/TolyFx/toly_ui

image.png

该系列将详细介绍 TolyUI 框架使用方式、框架开发过程中的技术知识、设计理念、难题解决等。

一、侧栏菜单设计思考

侧栏菜单可以说是 App 的第一门面，我们可以在很多桌面端应用产品中看到。它一般用于处理一些全局性的交互事件，比如导航、切换暗亮模式、弹出用户介绍面板等。比如下面自左到右依次是 企业微信、 有道翻译、哔哩哔哩、飞书：

image.png

1. 封装、抽象与取舍

就像没有包治百病的药，也没有包实现所有功能的组件。封装在 取得 使用简洁性的同时，也必然要 舍去 一定的灵活性。框架主要目的就是将共性或复杂的功能封装在内部，以简化开发者使用，其关键在于如何平衡取舍。 侧栏菜单条目具有非常强的灵活性，靠一个组件来封装所有的可能性是不现实的。

功能需求的多变性和视图表现的多样性，让我思考：

对于 侧栏菜单 的交互过程中，什么是共性的、什么是个性的、什么是复杂的、什么是可封装的。

在视图结构中，侧栏菜单有着类似的结构，可以分为上中下三个部分，上分一般放置用户头像，或者应用 logo。中间放置菜单项，下方放置一些图标按钮触发事件：

image.png

对于不同的开发者来说，菜单项展示的具体视图是个性化的，每个 App 的 UI 设计或者功能需求都不同。但在交互过程在，菜单项的某些视觉表现也存在共性，比如 悬浮事件、动画效果、宽度拖拽 等功能。所以对于条目来说，如何在封装共性时，提供给开发者个性化的构建方式，是一个挑战。庆幸的是 TolyUI 实现了这一点。

2. 侧栏菜单设计动机

Flutter 虽然提供了 NavigationRail 组件展示侧栏菜单，但是可定制性很差。很多样式无法自主控制，所以 TolyUI 希望提供 TolyRailMenuBar 组件，使得侧栏的表现样式可以更自由地构建。

这就是侧栏菜单设计动机，它在交互语义上承担的职能是：

[1]. 承载若干个 事件元件 ，参与交互。
[2]. 展示菜单列表，一般用于切换导航中的路由界面。
[3]. 展示头像、logo、图标按钮等附加视图元件。

如下所示，是 TolyUI 提供的侧栏菜单效果。将 悬浮事件、动画效果、宽度拖拽 封装在内部，对于条目来说，使用者可以通过回调来自定义构建内容，其中是否悬浮、动画数据、宽度信息等内部数据，将会通过回调参数让使用者感知到，而不必在意内部具体的复杂逻辑实现。这就是框架需要承担的复杂性与灵活性的平衡：

01.gif

3. 导航视图模块： tolyui_navigation

为了让 TolyUI 的功能模块可以细粒度地服务于开发者，采取模块化的分包模式。导航视图相关的组件，将通过 【tolyui_navigation】 包独立维护。

image.png

tolyui 的模块化将呈现一个树形结构，父节点的模块可以享用子模块的所有功能。同时子模块又可以单独存在，服务于开发者。

image.png

二、TolyRailMenuBar 的使用方式

TolyRailMenuBar 的使用案例介绍可以网站访问 TolyUI 的 web 版 Flutter 应用。或者下载各平台的桌面端程序查阅体验。

> 组件/反馈组件/popover: toly1994.com/ui/#//widgets/navigation/railmenubar

1. TolyRailMenuBar 的基本样式

左侧是支持拖拽拉伸，点击选中时条目背景色、字号、指示器动画变化。
中间是禁止拖拽拉伸的设置案例。
右间是自定义动画参数的配置案例。

02.gif

TolyRailMenuBar 只需要简单地配置属性，就可以达到展示的效果。

  • 菜单项属于来源于 MenuMate 元数据列表。元数据中可以指定图标、标签文字和对应的路径。
  • 它需要指定一个激活 id 表示当前的激活项，一般取用路径。
  • 菜单项的点击事件通过 onSelected 感知，可以在其中除了跳转路由或更新激活 id 的工作。
  • enableWidthChange 可以启用拖拽改变宽度，maxWidth 设置最大宽度值。

```dart String activeId = '/guide/start';

List navMenus = const [ MenuMate(icon: Icons.real estateagent rounded, label: "开始使用", router: '/guide/start'), MenuMate(icon: Icons.accounttree, label: "模块树", router: '/guide/modules'), MenuMate(icon: Icons.privacy tip, label: "设计原则", router: '/guide/principle'), MenuMate(icon: Icons.notealt, label: "更新日志", router: '/guide/update_log'), ];

TolyRailMenuBar( width: 72, maxWidth: 200, menus: navMenus, activeId: activeId, enableWidthChange: true, backgroundColor: backgroundColor, onSelected: onSelected, leading: (type) => DebugLeadingAvatar(type: type), tail: (type) => DebugTail(type: type), ); ```

和 Flutter 内置组件激活和事件设计类似，激活 id 变化后需要重新构建 TolyRailMenuBar 组件。实际使用中，一般会点击时跳转路由。然后监听路由的变化，改变激活 id。可参考 TolyUI 官网实现的相关源码。

dart void onSelected(String path) { setState(() { activeId = path; }); }

2. 菜单宽度类型

另外注意一点，leading 和 tail 是首尾的区域构建回调，使用者可以自由展示组件。其中会回调宽度类型辅助构建，这样便于实现宽窄模式下不同的视图表现，如下所示：

image.png

目前有两种类型，small 和 large:

dart enum MenuWidthType { small, large }

框架中 默认情况 下宽度大于 140 视为 large；但也提供了 widthTypeParser 解析策略，你可以设置它来自定义何时是 large。这就是在封装功能的基础上，给使用者自定义操作的空间。保证简易性的同时，增加灵活性。而这就是回调函数所带来的效力。

dart TolyRailMenuBar( width: 72, maxWidth: 240, widthTypeParser: (width) => width > 150 ? MenuWidthType.large : MenuWidthType.small, /// 略同...

3. 动画参数的配置

TolyRailMenuBar 可以通过 AnimationConfig 东西配置 动画时长、 动画曲线、 动画触发方式 三个数据:

03.gif

比如右侧的案例会在鼠标悬浮时触发动画，是因为 type 设置为 AnimTickType.hove，你也可以设置为 null 来禁用动画。默认是激活状态变化时触发动画。

image.png

dart TolyRailMenuBar( animationConfig: const AnimationConfig( duration: Duration(milliseconds: 500), curve: Curves.fastEaseInToSlowEaseOut, type: AnimTickType.hove, ), );

默认样式对暗色主题也有适配处理，当然配色方面你也可以自定义设置：

image.png

三、TolyRailMenuBar 自定义菜单项

业务需求千差万别，你可能需要在菜单项上加千奇百怪的装饰。对一个框架来说，是不可能，也没有必要面面俱到的。TolyRailMenuBar 提供了 MenuCellBuilder 构造器，让开发者拥有极大的发挥空间，来自定义菜单项内容。用变化来处理变化，才是永恒不变的真理。

1. 如何自定义菜单项

如果 TolyUI 默认的条目展示样式不符合需求，可以通过 cellBuilder 参数自定义菜单项，其中 menu 和 display 分别承载菜单和展示信息的元数据，展示信息包括动画值、宽度类型、是否选中、是否激活等。这些封装在框架内部的功能，通过回调的方式暴露核心数据，让开发者可以感知到，并依赖于它们自由构建视图。

image.png

比如下面的 QiWeiMenuCell 是自定义的组件，模仿企业微信的侧栏菜单。该案例会禁用过渡动画，整个体看起来简洁清爽：

05.gif

自定义的逻辑也不过 40 行代码，将 MenuMate 和 DisplayMate 作为自定义函数。构建过程中，依赖 DisplayMate 提供选中、悬浮数据，依赖 MenuMate 提供图标、标签信息。构建一个容器包裹文字和图标即可：

```dart class QiWeiMenuCell extends StatelessWidget{ final MenuMate menu; final DisplayMate display;

const QiWeiMenuCell({ super.key, required this.menu, required this.display, });

Color? get foregroundColor { return display.selected ? Colors.white : const Color(0xffafc8e8); }

Color? get backgroundColor { if(display.hovered&&display.selected) return const Color(0xff578acf); if(display.hovered) return const Color(0xff427cc9); if(display.selected) return const Color(0xff4c83cc); return Colors.transparent; }

@override Widget build(BuildContext context) { bool largeWidth = display.widthType==MenuWidthType.large; TextStyle style = TextStyle(color: foregroundColor, fontSize: largeWidth?14:11); BorderRadius br = const BorderRadius.all( Radius.circular(6)); return Container( alignment: largeWidth?Alignment.centerLeft:Alignment.center, padding: largeWidth?const EdgeInsets.symmetric(horizontal: 12):null, decoration: BoxDecoration(color: backgroundColor, borderRadius: br), height: largeWidth?42:56, child: Wrap( spacing: 6, direction: largeWidth ? Axis.horizontal : Axis.vertical, crossAxisAlignment: WrapCrossAlignment.center, children: [ Icon(menu.icon, color: foregroundColor, size: 18), Text(menu.label, style: style), ], ), ); } } ```

2. 如何自定义菜单项：仿哔哩哔哩

如下所示，哔哩哔哩桌面端应用侧栏导航没有圆角着色，动画触发的事件在悬浮时，文字颜色由黑渐变到粉色，取消激活时从紫色渐变到黑色。同样自定义一个 BilibliMenuCell 作为 cellBuilder 返回值即可：

image.png

07.gif

这个效果中使用了动画，通过 DisplayMate 对象可以感知到当前动画值这样借由 Tween 皆可以轻松实现数值上的过渡。代码如下所示：

```dart class BilibliMenuCell extends StatelessWidget { final MenuMate menu; final DisplayMate display;

const BilibliMenuCell({ super.key, required this.menu, required this.display, });

ColorTween get foregroundTween => ColorTween( begin: const Color(0xff61666d), end: const Color(0xffff6699), );

ColorTween get textTween => ColorTween( begin: const Color(0xff9499a0), end: const Color(0xffff6699) );

Color? get foregroundColor => foregroundTween.transform(display.rate); Color? get textColor => textTween.transform(display.rate);

@override Widget build(BuildContext context) { bool largeWidth = display.widthType==MenuWidthType.large; TextStyle style = TextStyle(color: textColor, fontSize: 12); return Container( alignment: largeWidth?Alignment.centerLeft:Alignment.center, height: 64, child: Wrap( spacing: 6, direction: largeWidth ? Axis.horizontal : Axis.vertical, crossAxisAlignment: WrapCrossAlignment.center, children: [ Icon(menu.icon, color: foregroundColor, size: 24), Text(menu.label, style: style), ], ), ); } } ```

3. 自定义 TolyUI 默认样式

除了 cellBuilder 自定义菜单项展示之外，为了简化使用 TolyUI 默认样式也提供了样式数据，通过 MenuCellStyle 对象来配置，如下是一个黑色风格的侧栏导航。

06.gif

配置方式如下所示，如果这些样式无法满足你的需求，可以将源码中的 TolyUiMenuCell 组件改吧改吧拿来用。

dart TolyRailMenuBar( width: 64, gap: 10, maxWidth: 200, cellStyle: const MenuCellStyle( showIndicator: false, // 隐藏指示器 hideActiveText: false, // 激活时不隐藏文字 height: 56, // 高度 heightLarge:46, // 宽模式高度 hoverColor: Color(0xff4b5569), activeColor: Colors.white, foregroundColor: Color(0xffc2c5cc), iconSize: 20, ),

我思考过是否需要为 TolyRailMenuBar 提供主题配置。就目前而言 TolyRailMenuBar 有足够灵活的自定义方式进行展示，它只是封装了宽度拖拽、布局结构、动画处理等共性功能。

另外，应该 App 中可能有 500 个链接组件，1000 个按钮组件。但侧栏导航并不会出现非常多次，通过主题来统一样式配置的意义也不大。所以希望把时间和精力花在刀刃上，暂时不提供 TolyRailMenuBar 的主题配置。后面有时间再酌情考量。

四、 TolyRailMenuBar 实践： FlutterUnit 侧栏导航

下面以一个具体的案例，来介绍一下 TolyRailMenuBar 的使用。关注我的应该的知道 【FlutterUnit】 是我的一个知名开源项目，介绍 Flutter 内置组件的使用，以及一些有趣的知识集锦。其中的侧栏菜单是之前花了挺大心力手搓的，现在看一下如何通过 TolyRailMenuBar 来轻松实现它，旧版代码可在 这里 查看。

1. 迁移样式

FlutterUni 的侧栏菜单之前效果如下，包括菜单项激活状态变化的动画效果：

09.gif

tolyui 全家桶目前还没有正式发布，而是分模块逐步推进。所以这里只使用导航模块 【tolyui_navigation】，将其加入到 pubspec.yaml 中 :

yaml dependencies: ... ## tolyui 导航模块 tolyui_navigation: ^0.0.2

侧栏菜单分为上中下三个区域，顶部 MenuBarLeading、底部 MenuBarTail 组件和之前界面类似，这里不做细数，已经抽离为两个组件，详见源码。

image.png

2. 自定义菜单项

菜单项是一个右圆角矩形，在激活变化时，宽度、颜色、字号会动画渐变。这里通过三个 Tween 对动画数值进行计算。通过 MenuMate 和 DisplayMate 中的数据，构建具体的菜单条目组件内容：

image.png

```dart final Tween _widthTween = Tween(begin: 0.82, end: 0.95); final Tween _sizeTween = Tween(begin: 18.0, end: 22.0); final Tween _fontSizeTween = Tween(begin: 14.0, end: 15);

class FlutterUnitMenuCell extends StatelessWidget { final MenuMate menu; final DisplayMate display;

const FlutterUnitMenuCell.create(this.menu, this.display, {super.key});

Color? get foregroundColor => display.selected ? Colors.white : Colors.white70;

@override Widget build(BuildContext context) { double height = 42; double anim = display.rate; Color? color = ColorTween( begin: Colors.white.withAlpha(33), end: Theme.of(context).primaryColor).transform(anim); double iconSize = _sizeTween.transform(anim); double fontSize = _fontSizeTween.transform(anim); TextStyle style = TextStyle(color: foregroundColor, fontSize: fontSize); Radius radius = Radius.circular(height / 2); BorderRadius br = BorderRadius.only(topRight: radius, bottomRight: radius);

return Align(
  alignment: Alignment.centerLeft,
  child: Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(color: color, borderRadius: br),
    width: _widthTween.transform(anim) * 130,
    height: height,
    child: Wrap(
      spacing: 6,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: [
        Icon(menu.icon, color: foregroundColor, size: iconSize),
        Text(menu.label, style: style),
      ],
    ),
  ),
);

} } ```

3. 使用 TolyRailMenuBar 组件

首先菜单的数据需要国际化，在 didChangeDependencies 中初始化 List<MenuMeta> 菜单元数据：

```dart late List deskNavBarMenus;

@override void didChangeDependencies() { super.didChangeDependencies(); String widget = context.l10n.widgetCollection; String canvas = context.l10n.paintCollection; String knowledge = context.l10n.knowledgeCollection; String treasure = context.l10n.treasureTools; String account = context.l10n.homeAccount; deskNavBarMenus = [ MenuMeta(label: widget, icon: TolyIcon.iconlayout, router: '/widget'), MenuMeta(label: canvas, icon: Icons.palette, router: '/painter'), MenuMeta(label: knowledge, icon: TolyIcon.iconartifact, router: '/knowledge'), MenuMeta(label: treasure, icon: TolyIcon.icon_fast, router: '/tools'), MenuMeta(label: account, icon: Icons.person, router: '/account'), ]; } ```

然后 build 方法中构建 TolyRailMenuBar 组件，cellBuilder 指定为 FlutterUnitMenuCell 的 create 构造。create 是一个命名构造方法，其本质上也是一个函数，而 cellBuilder 需要的也是一个返回 Widget 的函数，所以可以直接赋值。简化书写形式。
另外在 onSelected 回调事件触发 context.go 跳转路由，这也是赋值函数对象：

image.png

dart @override Widget build(BuildContext context) { return TolyRailMenuBar( cellBuilder: FlutterUnitMenuCell.create, width: 130, gap: 8, padding: EdgeInsets.zero, backgroundColor: const Color(0xff2C3036), menus: deskNavBarMenus, activeId: activePath, enableWidthChange: false, onSelected: context.go, tail: (_) => const MenuBarTail(), leading: (_) => const MenuBarLeading(), ); }

最后激活 id 通过当前路由来确定，由下方的 activePath 承担该工作，它会依赖 GoRouterState 得到当前路由，取第一段作为激活路径：

```dart final RegExp _segReg = RegExp(r'/\w+');

String? get activePath { final String path = GoRouterState.of(context).uri.toString(); RegExpMatch? match = _segReg.firstMatch(path); if (match == null) return null; String? target = match.group(0); return target; } ```

4. 尾声

到这里 TolyRailMenuBar 就介绍完了。对于树形的导航菜单将单独通过另一个组件 TolyRailMenuTree 实现。目前为止，TolyUI 已经完成了响应式布局和反馈模块的核心功能。下一步是对导航模块的设计开发:

image.png

感谢你关注 tolyui 的成长，如果喜欢，也希望你能在 github 中点赞支持\~

github 开源地址： https://github.com/TolyFx/toly_ui\ TolyUI 官方案例演示网站：http://toly1994.com/ui

张风捷特烈
关注
Flutter之侧滑导航栏
小海编码日记
05-13 745
废话不多说，先看图： 上述动图中的效果，相信大多数小伙伴已经很熟悉了，在刚开始接触Android时，小伙伴做的最多的应该就是底部导航栏和侧滑导航栏了，作为Android开发中的经典业务场景，它们使用跨平台Flutter框架该怎么实现呢？接下来我们来一起看下侧滑导航栏在Flutter内的实现。 添加Drawer Widget 首先在Android Studio中新建Flutter工程，并删除无用代...
flutter之桌面侧边导航栏 NavigationRail
weixin_43244083的博客
10-30 953
参数，用于控制是否展开侧边栏，当该属性变化时，会进行动画展开和收起。回调方法，来监听用户和导航栏的交互事件，传递用点击的索引位置。属性相当于两个插槽，如下所示，表示导航菜单外的首尾组件。用于表示什么时候显示文字标签，默认是。之后右侧会有阴影，该值越大，阴影越明显。NavigationRail 通过。参数表示标签类型，对应的属性是。，也就是只显示图标，没有文字。回调方法更新索引时，通过。表示阴影的深度，设置。
TolyUI 开源项目使用教程
gitblog_01175的博客
08-16 614
TolyUI 开源项目使用教程 toly_uiThe All-Platform Responsive ui library for flutter.项目地址:https://gitcode.com/gh_mirrors/to/toly_ui 1. 项目的目录结构及介绍 TolyUI 是一个为 Flutter 打造的响应式 UI 库，其目录结构如下： toly_ui/ ├── android/ ├...
移动跨平台开发框架Flutter
03-28 366
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 它也是构建未来的Google Fuchsia应用的主要方式。 Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget...
flutter 侧边栏，底部导航，页面跳转，对话框《详细到每一行代码》
f234344435的博客
09-30 1218
主要实现 侧边栏，底部导航，页面跳转，对话框，图片加载，自定义弹窗，一文搞定，注释详细到每一行代码
flutter 之侧边栏
日积月累
06-18 4294
侧边栏 drawer
基于Flutter框架的跨平台移动应用设计源码
10-04
本项目是一款采用Flutter框架构建的跨平台移动应用源码，包含2894个文件，涵盖Dart、MATLAB等多种编程语言，包括1658个Dart代码文件、272个PNG图片资源以及149个模板文件等，旨在简化移动应用开发过程，实现快速构建...
基于Flutter设计的UI模板动态化框架
02-25
本文将深入探讨“基于Flutter设计的UI模板动态化框架”，讲解其核心概念、实现方式以及如何利用这一框架提升应用的用户体验和开发效率。 首先，我们需要理解什么是UI模板动态化。UI模板动态化是指在运行时根据...
基于Dart语言的Flutter框架设计源码
最新发布
11-03
该项目为基于Dart语言的Flutter框架设计源码，共计7851个文件，包括4430个Dart源文件、538个PNG图片文件、341个AR文件、257个模板文件、171个JSON文件、170个plist文件、156个xcconfig文件、144个yaml文件、131个xml...
基于Dart语言的Flutter框架设计源码仓库
10-04
该项目是一个基于Dart语言的Flutter框架设计源码仓库，包含8595个文件，涵盖多种编程语言，如Dart、C、MATLAB、Swift、C++、Java、HTML、Shell、Kotlin、JavaScript、CSS、Ruby和C。其中，Dart文件占比最高，达4981...
hornhuang#flutter_interviews#24_swiper 轮播图1
07-25
引入配置 imaList抄代码1.3 顶部轮播使用目标效果：（使用东西包它）1.3.1 简单实现在外面包一个 Container效果（发现被压缩）使用 Aspe
Flutter实现左侧边栏导航
04-14
Flutter实现左侧边栏导航,点击左侧菜单右侧自动切换,左侧菜单可以实现自动居中,右侧滚动到底部继续滑可自动切换到下一页,上滑切换到上一页,左侧菜单跟随切换,查看效果图: https://image-static.segmentfault.com/172/110/1721107406-621de42a1cd7b
flutter_collapsible_sidebar:适用于实施Material Design的Flutter应用的可折叠侧边栏
05-15
collapsible_sidebar 用于实现Material Design的Flutter应用的可折叠侧边栏。 特征 材料设计 预先构建的可自定义图块小部件（CollapsibleItems） 流畅的动画 支持平台 Flutter Android Flutter iOS 颤振网 颤振桌面 :glowing_star: 版本2.0.0 :sparkles: 新增了处理图标列表的功能 增加了将底部和顶部填充应用于图标列表的功能 新增了使用fitItemsToBottom属性选择图标图块的方向（顶部/底部）的功能。 新增了提供自定义名称以切换按钮的功能 添加了使用titleStyle属性为边栏标题提供自定义样式的titleStyle 。 添加了使用textStyle属性为可折叠项文本提供自定义样式的功能。 新增了使用toggleTitleStyle属性为自定义样式切换按钮标题的功能。 添加了对Null-Safet
Flutter Drawer侧边栏、以及侧边栏内容布局
weixin_46136019的博客
03-21 1396
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。
54、Flutter核心原理--Flutter UI 框架（Framework）
热门推荐
wywinstonwy的专栏
02-10 1万+
Flutter 从上到下分为框架层、引擎层和嵌入层三层。开发者基本上都是与框架层打交道。 术语UI框架（UI Framework）特指：基于一个平台，在此平台上实现一个能快速开发GUI（图形用户接口）的框架，这里的平台特指操作系统，如Android、iOS或者Windows、macOS。通常来讲平台提供的都是图形 API 都非常的基础，通常就是一个和 Canvas 差不多基础的绘制接口，如果没有UI 框架的封装，可以想象一下，如果没有UI框架的封装，直接用 Canvas 来构建用户界面将会是怎样的一个体验
Flutter之侧边栏Drawer、DrawerHeader、UserAccountsDrawerHeader
一花一世界 一叶一菩提
03-04 1641
Drawer是Scaffold的子组件，在Scaffold传入drawer参数可以定义左侧栏，传入endDrawer可以定义右侧边栏。 除了Drawer还有DrawerHeader用来定义侧边栏的头部部分，也可以使用Flutter官方的UserAccountsDrawerHeader来布局侧边栏的头部。
2024 年顶级 Flutter UI 框架和库
前端全栈开发者
08-25 2485
根据 2022 年 StackOverflow 调查显示，Flutter 是最受欢迎的跨平台工具之一。自发布以来的 16 个月内，已有超过 200 万开发者采用了 Flutter。在本博客中，我们将浏览 GitHub 上可用的顶级 Flutter 存储库。除了每个存储库之外，还提供了对其优缺点的深入了解以及 GitHub 链接，可帮助您了解它们如何在应用程序开发领域使您受益。
Flutter移动开发UI框架理解（一）
一刀小诗成长纪
06-18 2803
1.用意：Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。跨平台：android、ios、linux、fushsia；本身就具有原生用户界面意思；开源免费节省很多开销。 2.开发语言：dart，安装flutter的时候会自动安装dart语言 3.目前移动开发UI主流框架： cordova（混合式开发框架）android原生的思想； RN(React ...
Flutter 核心原理 - UI 框架（UI Framework）
csdn_aiyang的博客
03-14 2533
Flutter 它提供了一套Dart API，然后在底层通过OpenGL这种跨平台的绘制库（内部会调用操作系统API）实现了一套代码跨多端。由于Dart API也是调用操作系统API，所以它的性能接近原生。
Flutter埋点框架：闲鱼高精度设计揭秘
总结来说，闲鱼在Flutter埋点框架的设计上，不仅注重埋点事件的精准触发，还要处理平台差异、页面导航跟踪以及用户体验相关的事件。通过这套精心设计的框架，闲鱼得以在Flutter环境中提供与Native相当甚至更优的用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值