随笔分类 -  Flutter

摘要:一、前言 除了 Flutter Intl 的方式实现国际化(参考我以前的博客:Flutter进阶(2):国际化开发 - fengMisaka - 博客园),还可以使用 GetX 实现国际化(推荐)。 先看下效果图: 二、GetX 实现国际化(推荐) 新建一个 Flutter 工程,使用 GetX 实 阅读全文
posted @ 2024-11-15 10:39 fengMisaka 阅读(505) 评论(0) 推荐(0)
摘要:一、用户登陆界面展示 二、项目结构说明 项目结构图如下图所示: 说明: Login:登陆界面,只负责与用户交互的界面内容展示 LoginController:逻辑控制文件,负责处理,登陆按钮点击和隐私协议勾选 三、项目示例说明 3.1 LoginController(逻辑文件) import 'pa 阅读全文
posted @ 2024-10-18 10:11 fengMisaka 阅读(473) 评论(0) 推荐(1)
摘要:一 概述 在 GetX 中,无需 context 上下文,便可使用 SmallWidget 小组件: SnackBars 提示信息 Dialog 对话框 BottomSheets 底部弹窗 先看下效果图: 二、SnackBars(提示信息) GetX 创建一个 SnackBars 代码如下: Get 阅读全文
posted @ 2024-10-18 10:11 fengMisaka 阅读(372) 评论(0) 推荐(0)
摘要:一、GetX 依赖管理概述 GetX 提供了一种简单且高效的依赖注入方式,通过少量代码即可实现依赖的注入、管理和访问。它主要通过Get.put、Get.lazyPut、Get.putAsync和Get.create等方法来实现依赖管理。 与其他依赖管理工具的比较: Provider:Provider 阅读全文
posted @ 2024-10-18 10:10 fengMisaka 阅读(892) 评论(0) 推荐(0)
摘要:一、前言 GetX 为我们封装了 Navigation ,无需 context 可进行跳转,使用 GetX 进行路由跳转非常的简单,只需要调用Get.to()等即可进行路由跳转。以下是其一些用法: 方法 功能 Get.to() 跳转新页面 Get.toNamed() 命名路由跳转 Get.back( 阅读全文
posted @ 2024-10-18 10:10 fengMisaka 阅读(1246) 评论(0) 推荐(1)
摘要:一、状态管理说明 状态 百度百科:状态是人或事物表现出来的形态。是指现实(或虚拟)事物处于生成、生存、发展、消亡时期或各转化临界点时的形态或事物态势 此处:指的是变量的值 状态管理的方式 其他状态管理器:Streams 或者 ChangeNotifier 此处:反应式状态管理(GetX/Obx)和简 阅读全文
posted @ 2024-10-18 10:10 fengMisaka 阅读(615) 评论(0) 推荐(0)
摘要:一、概述 GetX 是 Flutter 的一个快速开发框架,借助 GetX 可以极大提高 Flutter 的开发速度和效率,它支持: 反应式状态管理 OBS(之前通过 setState 设置) 路由管理(之前通过 Navigator 跳转) 依赖管理(设置过Get.put(Controller)可以 阅读全文
posted @ 2024-10-18 10:09 fengMisaka 阅读(435) 评论(0) 推荐(0)
摘要:一、简介 flutter_screenutil 是一个 Flutter 插件,专门用于处理屏幕适配问题。它简化了不同设备间尺寸差异的处理,确保你的应用在各种屏幕上都能保持良好的显示效果。开发者可以通过简单的调用来设置基于设计图尺寸的控件宽高和字体大小。 项目地址:https://github.com 阅读全文
posted @ 2024-10-18 10:06 fengMisaka 阅读(2543) 评论(0) 推荐(0)
摘要:在 Flutter 中,如果你想要在一个 Dart 文件中使用另一个 Dart 文件定义的组件,你可以通过以下步骤来实现: (1)确保你想要使用的组件已经在另一个Dart文件中被定义,并且这个文件导出了这个组件。 例如,假设你有一个名为my_component.dart的文件,其中定义了一个名为My 阅读全文
posted @ 2024-10-18 10:04 fengMisaka 阅读(384) 评论(0) 推荐(0)
摘要:一、程序入口 main.dart // ignore_for_file: prefer_const_constructors import 'package:flutter/material.dart'; import 'widgets/routes.dart'; // 添加路由页面 main(Li 阅读全文
posted @ 2024-10-18 10:02 fengMisaka 阅读(302) 评论(0) 推荐(0)
摘要:一、路由管理 1.1 认识Flutter路由 路由的概念由来已久,包括网络路由、后端路由,到现在广为流行的前端路由。 无论路由的概念如何应用,它的核心是一个路由映射表 比如:名字 detail 映射到 DetailPage 页面等 有了这个映射表之后,我们就可以方便的根据名字来完成路由的转发(在前端 阅读全文
posted @ 2024-10-18 10:01 fengMisaka 阅读(868) 评论(0) 推荐(0)
摘要:一、showModalBottomSheet(模态底部弹出框) showModalBottomSheet 用于显示一个模态底部弹出框。 属性解析: Future<T?> showModalBottomSheet<T>({ required BuildContext context, // 表示底部弹 阅读全文
posted @ 2024-10-11 16:15 fengMisaka 阅读(3362) 评论(0) 推荐(1)
摘要:Material 库提供了三种基本对话框组件 AlertDialog 通常用于提示型对话框 SimpleDialog 通常用于列表型对话框 Dialog 通常用于自定义布局元素的对话框 弹出对话框时,调用 showDialog 函数,将对话框控件传入,由于对话框本身是路由,所以关闭对话框时,需使用 阅读全文
posted @ 2024-10-11 16:15 fengMisaka 阅读(945) 评论(0) 推荐(0)
摘要:一、NestedScrollView 上一节中,我们知道 CustomScrollView 只能组合 Sliver,如果有孩子也是一个可滚动组件(通过 SliverToBoxAdapter 嵌入)且它们的滑动方向一致时便不能正常工作。为了解决这个问题,Flutter 中提供了一个NestedScro 阅读全文
posted @ 2024-10-11 16:14 fengMisaka 阅读(2597) 评论(0) 推荐(0)
摘要:CustomScrollView 前面介绍的 ListView、GridView、PageView 都是一个完整的可滚动组件,所谓完整是指它们都包括Scrollable 、 Viewport 和 Sliver。假如我们想要在一个页面中,同时包含多个可滚动组件,且使它们的滑动效果能统一起来,比如:我们 阅读全文
posted @ 2024-10-11 16:14 fengMisaka 阅读(2645) 评论(0) 推荐(1)
摘要:TabBarView 是 Material 组件库中提供了 Tab 布局组件,通常和 TabBar 配合使用。 一、TabBarView TabBarView 封装了 PageView,它的构造方法很简单 TabBarView({ Key? key, required this.children, 阅读全文
posted @ 2024-10-11 16:14 fengMisaka 阅读(1735) 评论(0) 推荐(0)
摘要:本节将介绍可滚动组件中缓存指定子项的通用方案。 首先回想一下,在介绍 ListView 时,有一个addAutomaticKeepAlives 属性我们并没有介绍,如果addAutomaticKeepAlives 为 true,则 ListView 会为每一个列表项添加一个 AutomaticKee 阅读全文
posted @ 2024-10-11 16:13 fengMisaka 阅读(342) 评论(0) 推荐(0)
摘要:一、PageView 如果要实现页面切换和 Tab 布局,我们可以使用 PageView 组件。需要注意,PageView 是一个非常重要的组件,因为在移动端开发中很常用,比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等,这些都可以通过 PageView 轻松实 阅读全文
posted @ 2024-10-11 16:13 fengMisaka 阅读(881) 评论(0) 推荐(0)