flutter基础面试知识汇总(二)
一、全局状态管理工具-----GetX、Provider、Bloc
1.Provider
Provider
是 Flutter 中一个流行的状态管理库,它简化了数据共享和状态管理的过程。它通过依赖注入的方式,让不同的 Widget 共享数据,而无需过多地传递参数。Provider也是官方推荐的工具之一。
主要特点:
- 依赖注入:Provider 可以让你把数据或对象注入到应用的 Widget 树中,方便地在不同层级的 Widget 中访问。
- 响应式编程:当你通过 Provider 共享的对象的状态发生变化时,相关的 Widget 会自动更新,无需手动管理。
- 简洁易用:相比其他状态管理方式(如 setState 或 InheritedWidget),Provider 更加简洁和灵活。
- 支持异步操作:它也支持异步状态管理,可以轻松处理网络请求等异步任务。
常用组件:
- Provider:用来提供共享数据或服务。
- Consumer:用来获取并监听数据的变化。
- ChangeNotifierProvider:一种结合 ChangeNotifier(用于通知状态变化)和 Provider 的方法,通常用来管理应用的状态。
2.GetX
GetX
是 Flutter 中一个轻量级且高效的状态管理、依赖注入和路由管理库,它在简化代码、提高性能方面有显著的优势。GetX 通过简单、直观的 API 提供了对状态管理、依赖注入、路由导航和响应式编程的强力支持。GetX经常搭配插件get_storage
使用。
主要特点:
- 状态管理:GetX 提供了简便的方式来管理应用中的状态。通过 Rx(响应式变量)来使状态变化自动更新 UI,无需显式调用 setState。
- 依赖注入:GetX 提供了强大的依赖注入功能,可以轻松管理应用中的服务或数据对象,避免了传统的手动传递数据和依赖的繁琐过程。
- 路由管理:GetX 提供了高效的路由管理系统,支持命名路由、传参、导航控制等。
- 高性能:GetX 采用高效的依赖更新机制,只有依赖的部分发生变化时,相关的 Widget 才会更新,减少了不必要的重绘。
- 简洁的 API:GetX 提供了非常简洁的 API,开发者可以通过最少的代码实现强大的功能。
常用组件:
- GetxController:用于管理应用中的逻辑和状态。它是所有控制器的基类,通常用来存储和管理业务逻辑或状态。
- Obx:是一个响应式组件,用来监听 Rx 类型的变量。当数据发生变化时,Obx 会自动重建 Widget。
- GetBuilder:GetBuilder 是一种非响应式的状态管理方式,它在数据变化时手动调用更新。不同于 Obx,它需要显式调用 update() 来触发 UI 更新。
- GetX:GetX 是 Obx 和 GetBuilder 的组合,提供更灵活的更新机制和更少的样板代码。它不仅能监听 Rx 变量,还能监听任何其他类型的数据源。
- Get.put():用于将实例注入到 GetX 的依赖注入系统中。你可以通过 Get.put() 来创建并管理控制器实例,并在需要的地方获取。
- Get.find():用于获取已经注入的实例。通常用于在任何地方访问已经通过 Get.put() 注入的对象(如控制器或服务)。
- GetMaterialApp:GetMaterialApp 是 GetX 提供的一个替代 MaterialApp 的 Widget。它不仅继承了 MaterialApp 的所有功能,还为路由、主题、状态管理等提供了更多的支持。
- Get.to() / Get.back() / Get.off():Get.to() 用于页面导航,Get.back() 用于返回上一页,Get.off() 用于跳转并销毁当前页面。
3.Bloc
Flutter中的BLoC(Business Logic Component)状态管理是一种管理应用程序状态的架构模式,它通过将应用程序的业务逻辑与UI层分离来提高代码的可维护性和可测试性。在BLoC模式中,应用的业务逻辑通过输入流(Stream)接收事件,并通过输出流发出新的状态,从而管理界面状态的变化。
-
BLoC的基本概念
- Event(事件):BLoC接收的外部输入,通常是用户操作或系统事件。例如按钮点击、网络请求等。
- State(状态):BLoC处理事件后,更新的结果或视图所展示的内容。例如加载状态、数据状态等。
- BLoC:处理事件并发出新状态的组件,通常通过Stream来处理和管理。
-
BLoC的工作流程
- 事件流:UI层通过发送事件(Event)来触发BLoC的处理逻辑。
- BLoC处理:BLoC收到事件后,依据事件内容进行相应的逻辑处理,并生成新的状态(State)。
- 状态流:BLoC将新的状态通过流(Stream)发回UI层,UI层根据新的状态更新视图。
-
BLoC的常用组件
- BlocListener:用于监听BLoC状态变化,并根据需要执行副作用(如导航、显示对话框等)。与BlocBuilder的不同之处在于,BlocListener不返回UI组件,只用于执行逻辑。
- BlocBuilder:用于根据状态构建UI。它会监听BLoC的状态变化,并根据新的状态更新UI。
- BlocProvider:用于依赖注入,将BLoC提供给整个子树(Widget Tree)中的所有组件。它通常在应用的根组件中使用,以便子组件可以访问BLoC。
- Stream:在BLoC模式中,
Stream
用于事件的传递和状态的更新。BLoC通过StreamController接收事件和输出状态。
二、flutter相关库
1.网络请求库
- http:官方推荐的轻量级 HTTP 请求库,适合简单网络请求。
- Dio:功能强大的 Dart HTTP 客户端,支持拦截器、全局配置、文件上传/下载等高级功能。
- graphql_flutter:GraphQL 客户端,适用于需要与 GraphQL 后端交互的应用。
- dio_cache_interceptor:给 Dio 添加缓存能力的拦截器插件。
- connectivity_plus:检测设备网络连接状态(是否联网、WiFi 还是移动数据)。
- flutter_secure_storage:安全地存储 token、密码等敏感信息,跨平台支持(iOS/Android)。
2.屏幕尺寸适配库
- flutter_screenutil:提供屏幕尺寸适配方案,基于设计稿宽度/高度自动缩放 UI 元素。
- responsive_builder:实现响应式布局,根据设备类型(手机、平板、桌面)动态调整 UI。
- flutter_layout_grid:使用 CSS Grid 布局方式构建响应式界面。
- auto_size_text:自动调整字体大小以适应容器,防止文字溢出。
- device_preview:在开发时预览不同设备上的 UI 效果,支持实时旋转、缩放等操作。
- media_query_extension:扩展 MediaQuery,提供更方便的屏幕尺寸获取方法。
- adaptive_theme:支持系统深色/浅色模式切换,同时可自定义主题。
3.状态管理库
- provider:Flutter 官方推荐的状态管理方案,轻量易用,适合中小型项目。
- riverpod:Provider 的升级版,解决了依赖注入问题,性能更好,更灵活。
- bloc / flutter_bloc:BLoC 模式实现的状态管理库,适合中大型项目,结构清晰。
- mobx / flutter_mobx:基于响应式编程的状态管理,适合喜欢观察者模式的开发者。
- GetX:轻量级框架,包含路由管理、依赖注入、状态管理等功能,适合快速开发。
- redux / flutter_redux:类 Redux 架构,适合大型项目,强调单一状态树。
- equatable:配合 Bloc 或其他状态管理库使用,简化 == 和 hashCode 的实现。
4.图片加载与缓存库
- cached_network_image:缓存网络图片,支持占位图、错误图、渐入动画等。
- photo_view:支持手势缩放查看大图的组件。
- flutter_svg:显示 SVG 格式的矢量图形,支持热重载。
- image_picker:调用相机或相册选择图片或视频。
- image_cropper:对图片进行裁剪处理。
5.数据持久化与本地数据库
- shared_preferences:Android SharedPreferences/iOS UserDefaults 的 Flutter 封装,用于保存键值对数据。
- hive:轻量级 NoSQL 本地数据库,速度快,支持加密。
- sembast:另一个轻量级文档型本地数据库,支持查询、索引等。
- sqflite:SQLite 数据库封装,适合需要关系型数据库的场景。
- floor:提供编译时 SQLite ORM 支持,类似 Room。
- isar:新一代本地数据库,支持多平台、无桥接、高性能。
6. 国际化与本地化库
- intl:官方推荐的国际化库,支持多语言、日期格式、货币格式等。
- easy_localization:简化多语言支持流程,集成资源文件加载和翻译机制。
- flutter_translate:另一个支持多语言的库,功能丰富且易于扩展。
7.时间与日期处理库
- jiffy:类似 Moment.js 的时间处理库,语法简洁。
- timeago:显示“X分钟前”、“昨天”等人性化时间格式。
- timezone:处理时区转换,配合 jiffy 使用效果更佳。
8.UI 组件与主题库
- flutter_spinkit: 提供多种加载动画样式,如旋转圆圈、点跳动等。
- lottie:加载并播放 Lottie 动画,提升视觉体验。
- awesome_dialog:弹窗对话框组件,支持多种风格。
- modal_bottom_sheet:支持 iOS 风格的模态底部弹出面板。
- flutter_icons:集成多个图标库(如 FontAwesome、MaterialIcons),方便调用图标。
- getwidget / flutter_neumorphic / neocloud:第三方 UI 框架或 Neumorphism 风格组件库。
9.测试与调试工具库
- mockito:单元测试中模拟对象行为的库。
- integration_test:官方提供的集成测试框架,支持真机/模拟器测试。
- logging:统一的日志输出接口,方便调试和发布日志控制。
- flutter_native_splash:设置 App 启动屏(splash screen)。
- package_info_plus:获取 App 的版本号、构建号等信息。
10.性能优化与打包发布工具
- flutter_launcher_icons:自动生成 App 图标,适配不同平台和分辨率。
- flutter_secure_storage:安全存储敏感数据,如 Token、密钥等。
- flutter_upgrader:实现 App 内部版本检测和更新提示。
- workmanager:在后台执行周期性任务,如推送同步、定时拉取数据。
- firebase_core, firebase_analytics, firebase_crashlytics:Firebase SDK,用于数据分析、崩溃收集、推送通知等。
三、flutter相关语法及组件
1.异步
Flutter中的异步编程通常基于 Future 和 Stream 两个核心概念。
-
Future
- Future 是一个表示可能尚未完成的操作的对象,它通常用来表示延迟计算的结果。例如,你在请求一个网络接口,操作可能需要几秒钟,而你并不希望让整个应用卡顿,Future 就非常适合用来表示这种情况。
-
Stream
- Stream 是用于处理一系列异步事件的工具。Stream 和 Future 很像,但它能处理多个事件,而 Future 只处理单个事件。
异步编程常见模式:
- async 和 await
- FutureBuilder
- StreamBuilder
2.路由
(1)自带路由
Flutter 自带的路由系统基于 Navigator 和 Route 类实现。以下是一些关键概念:
- Navigator: 管理路由栈的对象,通过它可以进行页面跳转(push)和回退(pop)。
- Route: 路由对象的抽象基类,通常使用 MaterialPageRoute 或 CupertinoPageRoute 实例化,分别适用于 Android 和 iOS 风格的页面切换动画。
- 命名路由: 通过名称来标识不同的路由页面,便于管理和调用。需要在 MaterialApp 或 CupertinoApp 的 routes 属性中预先定义。
(2)三方路由- GetX
GetX 是一个功能强大的状态管理和依赖注入框架,同时它也提供了一套非常简洁的路由管理系统。
- 基本跳转:Get.to()
- 跳转并移除当前页面:Get.off()
- 跳转并移除之前的所有页面:Get.offAll()
- 命名路由跳转:Get.toNamed()
- 带参数跳转:Get.toNamed(‘/details’, arguments: {‘id’: 1})
3.StatefulWidget
和StatelessWidget
StatelessWidget
适用于那些在其生命周期内不需要维护状态的情况。一旦创建,其属性就不能改变 - 它们是无状态的。这意味着如果你需要一个组件显示一些数据并且这些数据不会随着时间变化而改变,那么使用 StatelessWidget
是合适的。
特点:
- 不存储任何状态。
- 构造时传入的数据是不可变的(通常是 final 变量)。
- 当父 Widget 发生重建时,
StatelessWidget
也会被重建。
与 StatelessWidget
相反,StatefulWidget
用于那些需要保持状态并在交互过程中更新界面的应用场景。当 Widget 的状态发生变化时,可以调用 setState()
方法来通知框架该 Widget 的状态已经改变,从而触发 Widget 的重新绘制。
特点:
- 能够维护跨帧的状态。
- 当调用
setState()
函数时,会触发 Widget 的重建,允许你修改其内部状态。 - 尽管
StatefulWidget
自身可能会被销毁和重建,但是它的State
对象会被保留下来。
4.通道(Channel)机制(编写插件基本上基于通道)
Flutter支持三种类型的通道:
- MethodChannel:最常用的通道类型,主要用于发送方法调用并获取返回值。Flutter端通过MethodChannel向原生端发送方法调用,原生端执行操作后返回结果。
- EventChannel:用于Flutter与原生之间的事件流交互。它适用于持续的事件流(如实时传感器数据、网络状态等)。与MethodChannel不同,EventChannel是单向的数据流,可以将事件从原生代码流式传输到Flutter端。
- BasicMessageChannel:用于Flutter与原生之间的简单消息传递。它传递的数据通常是没有类型的,通常是简单的JSON对象或字符串。BasicMessageChannel非常适合进行轻量级的消息传递。
5.flutter组件
-
基础组件
- Container:一个多功能容器,支持布局、装饰、定位等属性。
- Text:用于显示一段文本。
- Image:用于显示图片,可以从网络、文件、内存等加载。
- Icon:用于显示图标。
- Scaffold:应用程序页面的基础结构,包含AppBar、Drawer、Snackbar等常用组件。
- AppBar:顶部应用栏,通常包含标题和操作按钮。
- Padding:给子组件添加内边距。
- Center:将子组件居中显示。
- Align:自定义对齐方式放置子组件。
- FractionallySizedBox:按比例设置子组件大小。
- DecoratedBox:为子组件添加装饰(如背景颜色、渐变、边框)。
- ClipRect, ClipRRect, ClipOval:裁剪子组件形状。
- InkWell / GestureDetector:添加点击、长按等手势交互。
- Divider:分隔线,常用于列表项之间。
- FloatingActionButton:浮动操作按钮,常用于主要操作入口。
- Chip:可选择的小标签,适合展示可过滤内容。
- Card:带阴影和圆角的卡片容器,用于信息聚合展示。
-
布局组件
- Column:垂直方向布局多个子组件。
- Row:水平方向布局多个子组件。
- Stack:重叠布局,可以让子组件堆叠显示。
- ListView:可滚动列表,用于显示大量子组件。
- GridView:网格布局,用于显示两维的子组件列表。
- Expanded和Flexible:控制子组件在Flex布局(如Row和Column)中的伸缩行为。
- Wrap / Flow:子组件自动换行排列(适合标签云)。
- SingleChildScrollView:单个可滚动组件,适用于内容超出屏幕时。
- CustomScrollView:高度定制化滚动视图,支持 Sliver 组件。
- SliverList / SliverGrid:在 CustomScrollView 中使用的滑动列表/网格。
- ConstrainedBox / UnconstrainedBox:限制或取消子组件大小约束。
- AspectRatio:设置子组件宽高比。
- SizedBox:固定尺寸的盒子,可用于占位或间隔。
- LayoutBuilder:根据父级约束动态构建布局。
- AnimatedContainer:带动画效果的 Container。
- AnimatedOpacity / FadeTransition:控制透明度变化的动画组件。
-
输入组件
-
TextField:文本输入框。
-
Checkbox:复选框。
-
Radio:单选按钮。
-
Switch:开关按钮。
-
Slider:滑块。
-
DropdownButton:下拉按钮。
-
Form / GlobalKey:表单容器,配合 TextFormField 使用,支持表单验证。
-
TextFormField:支持验证、标签、错误提示的高级 TextField。
-
CheckboxListTile / RadioListTile:带标签的复选框/单选框。
-
SwitchListTile:带标签的开关按钮。
-
RangeSlider:双滑块选择范围值。
-
PopupMenuButton:弹出菜单按钮,常用于操作菜单。
-
Date Picker / Time Picker:日期/时间选择器(Material 提供)。
-
RawKeyboardListener:监听原生键盘事件。
-
FocusNode / FocusScope:控制焦点逻辑,处理输入框聚焦行为。
-
TextSelectionControls:自定义文本选择控件(如复制粘贴菜单)。
-
动画与过渡组件
- AnimatedContainer:支持属性变化时带有动画效果的容器。
- AnimatedOpacity:透明度变化时带有动画效果。
- AnimatedPositioned:在 Stack 中位置变化时带有动画。
- FadeTransition / ScaleTransition / RotationTransition:不同类型的动画过渡组件。
- Hero:实现跨页面共享元素的动画效果。
- AnimatedBuilder:构建依赖于动画值的组件。
- Tween / AnimationController:动画控制器与插值器,用于手动控制动画。
- PageRouteBuilder / PageRoute:自定义页面跳转动画。
-
导航组件
- Navigator:管理路由栈,进行页面跳转(push/pop)。
- Route:抽象路由对象,支持 MaterialPageRoute、CupertinoPageRoute 等。
- MaterialPageRoute:Android 风格页面跳转动画。
- CupertinoPageRoute:iOS 风格页面跳转动画。
- TabBar / TabBarView:实现底部或顶部标签页切换。
- BottomNavigationBar:底部导航栏,常见于主页面切换。
- Drawer:抽屉菜单,常用于侧边栏导航。
- WillPopScope:控制返回键行为(如弹窗确认退出)。
-
其他实用组件
- FutureBuilder:异步加载数据并根据状态更新 UI。
- StreamBuilder:监听流数据并更新 UI(如实时聊天、传感器数据)。
- ValueListenableBuilder:监听 ValueNotifier 并重建部分 UI。
- ChangeNotifierProvider / Consumer:状态管理工具,配合 Provider 使用。
- Visibility / Offstage:控制子组件是否可见。
- Placeholder:占位符组件,用于开发阶段替代尚未完成的组件。
- Transform:对子组件进行旋转、缩放、平移等变换。
- AnimatedSwitcher:在两个 widget 之间切换时添加动画效果。
- Dismissible:支持滑动删除的组件,常用于列表项。