B.--CSDN博客

原创 Flutter 中的数据跨层传递方案

在 Flutter 中，数据跨层传递（从上层组件传递到下层组件，或跨多个层级传递）有多种方案。状态管理：推荐 Provider / Riverpod；子 → 父传递：Notification（事件通知），或者直接回调（Function）；轻量级方案：GetX（简洁），或者直接 StatefulWidget 维护本地状态。

2025-02-17 13:59:01 1096

原创在 Flutter 实现下拉刷新、上拉加载更多和一键点击回到顶部的功能

在 Flutter 中，实现下拉刷新、上拉加载更多和一键点击回到顶部的功能，通常会结合使用 `RefreshIndicator`、`ListView` 和 `ScrollController` 来实现这些交互效果。

2025-02-11 17:54:53 624

原创 Flutter 中的生命周期

在 Flutter 中，StatefulWidget 和 StatelessWidget 这两种 Widget 的生命周期不同，主要关注的是 StatefulWidget，因为它涉及到状态的管理和更新。

2025-02-11 11:12:35 756

原创 Dart 语言的父类继承，接口实现和混入

在 Dart 语言中，父类继承、接口实现和混入（mixin）是实现代码复用和构建灵活应用的重要手段。1. 父类继承：用于类之间存在自然的“is-a”关系，比如动物和狗。2. 接口实现：当需要确保某些类提供特定行为时，比如持久化、序列化。3. 混入：当需要多个类共享行为，但它们之间没有继承关系时，比如“会飞的”和“会游泳的”。

2025-01-17 10:46:14 360

减少 Flutter 应用体积的方法包括：移除未使用代码和资源；启用代码混淆与压缩；优化图片为 WebP 格式；启用分体构建 (--split-per-abi)；禁用调试符号；使用图标树摇 (--tree-shake-icons)；优化依赖包；使用 AOT 编译和按需加载模块；构建 App Bundle 以适配设备。确保在 build.gradle 中配置混淆规则，删除多余依赖和资源，结合工具压缩静态资源并进行精简构建。

2024-12-17 16:37:56 1215 1

原创 Flutter 的事件循环机制

Flutter 的事件循环机制建立在 Dart 的异步模型之上，采用单线程、基于事件队列和微任务队列的调度方式。理解这一机制有助于开发者优化应用性能，避免阻塞主线程，同时确保流畅的用户体验。

2024-12-05 13:46:07 1063

原创在 Flutter app 中，通过视频 URL 下载视频到手机相册

在 Flutter app 中，使用 dio 下载文件，结合 path_provider 获取临时存储路径，以及 gallery_saver 将文件保存到相册。

2024-11-27 13:35:50 529

原创 Flutter 应用在真机上调试的流程

在真机上调试 Flutter 应用的方法有很多，可以使用 USB 数据线连接设备到电脑进行调试，也可以通过无线方式进行 Flutter 真机调试。

2024-11-14 18:15:38 2030

原创在 Flutter 应用中调用后端接口的方法

在 Flutter 中调用后端接口通常使用 `http` 包来发起 HTTP 请求。注意：1. 要添加适当的错误处理逻辑，例如网络超时或无网络连接的情况；2. HTTP 请求是异步操作，使用 async 和 await 进行异步调用并处理结果；3. 对于敏感信息（如用户密码），请确保后端 API 使用 HTTPS 并遵循安全的认证机制。

2024-11-12 17:12:32 683

原创 Next.js 学习 - 路由处理程序 (Route Handlers)

Next.js 的路由处理程序非常灵活，通过文件系统轻松创建各种路径，还可以处理不同的 HTTP 方法，传递路径和查询参数，并控制缓存行为，满足多种开发需求。

2024-10-21 19:08:24 1236

原创 Next.js 学习 - 路由系统（Routing）

Next.js 的路由系统基于文件系统，这意味着文件和文件夹的结构决定了 URL 路径。相较于传统的 React 应用中的路由配置，Next.js 的文件路由系统非常简洁和自动化。

2024-10-16 15:12:16 887

原创 Next.js 学习 - 生命周期

Next.js 是一个基于 React 的框架，除了继承 React 组件的生命周期之外，还扩展了自己的数据获取和页面渲染生命周期。

2024-10-15 17:27:43 831

原创在 React 项目中渲染 Markdown 文件

要在 React 项目中渲染一个 Markdown 文件（例如 .md 文件），并确保其中的图片能够正确显示，可以使用一些库来处理 Markdown 渲染，比如 react-markdown 和 remark-gfm。

2024-09-26 16:39:46 645

原创 Remix 学习 - @remix-run/react 中主要的 hooks

在 @remix-run/react 中，hooks 提供了强大的功能，可以帮助你处理数据提交、错误处理、路由渲染和查询参数管理等功能。结合使用它们可以大大简化开发过程。

2024-09-14 15:22:11 918

原创 Remix 学习 - @remix-run/react 中的主要组件

@remix-run/react 提供组件如 Link, NavLink, Form, Outlet 等，用于实现无刷新导航、表单处理、嵌套路由等功能，提升用户体验和开发效率。这些组件还支持自动滚动恢复和开发时自动刷新。

2024-09-13 14:17:46 1089

原创 Remix 学习 - 路由模块（Route Module）

在 Remix 中，每个路由模块（route module）都可以包含多个导出，用于处理不同的功能。每个路由模块可以根据需要导出这些功能，以支持页面的不同需求。通过这些导出，Remix 提供了灵活的方式来处理数据、错误和页面渲染。

2024-09-12 18:17:49 837

原创 Remix 学习 - 数据加载机制

Remix 的数据加载机制非常强大，旨在优化应用性能和用户体验。每个路由模块可以导出一个 loader 函数，用于获取该页面所需的数据。loader 函数在服务器端执行，并可以返回 JSON 数据。在组件中使用 useLoaderData 钩子来访问加载的数据，可以使用 catchBoundary 和 errorBoundary 来处理加载过程中的错误，Remix 还会自动处理数据的缓存和更新，确保数据在客户端和服务器之间保持同步。

2024-09-12 14:24:55 386

原创 Remix 学习 - 文件系统路由和动态路由

在 Remix 中，文件系统路由通过在 app/routes 目录中创建文件和文件夹来定义，每个文件或文件夹对应一个路由路径。动态路由允许在 URL 中使用动态参数，通过在文件名中使用 $ 前缀来定义动态部分。

2024-09-12 14:05:01 597

原创使用 SCSS 或 LESS 相比于纯 CSS 的好处

SCSS 和 LESS 作为 CSS 预处理器，提供了更多的编程功能，使得样式代码更加简洁、灵活和可维护。虽然现代 CSS 也在不断引入新特性（如 CSS 变量、网格布局等），但 SCSS/LESS 在复杂项目中依然具有明显的优势。

2024-09-04 17:24:47 1108 2

原创开发 Shopify 模板的步骤

开发 Shopify 模板（主题）需要掌握一些基础的网页技术（HTML、CSS、JavaScript）以及 Shopify 特有的 Liquid 模板语言。

2024-08-28 17:36:32 1525

原创使用 Tailwind CSS 实现水平和垂直居中对齐的方法

使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位

2024-08-20 10:18:36 1213

原创前端检测当前的网络状况的方法

前端可以通过一些方法来检测当前的网络状况：1. 使用 navigator.onLine 属性；2. 定期发送请求；3. 使用 Service Worker；4. 使用 Network Information API

2024-08-09 18:52:21 1109

原创前端将后台返回的UTC时间格式化为本地时间的方法

1. 在前端将后台返回的UTC时间格式化为本地时间，可以使用JavaScript的Date对象和相关的格式化方法; 2. 如果需要将UTC时间转换为特定时区的时间，可以使用第三方库如moment-timezone或者date-fns-tz。

2024-08-06 15:05:36 487

原创 JavaScript 中的 `||` 和 `??`

|| 和 ?? 都是 JavaScript 中的逻辑运算符，但它们有不同的用途和行为。如果你希望忽略所有假值（falsy），使用 ||。如果你只希望忽略 null 和 undefined，使用 ??。

2024-07-30 15:23:41 500

原创在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS

在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件

2024-07-11 17:28:05 497

原创关于单点登录（Single Sign-On，SSO）

单点登录（Single Sign-On, SSO）是一种用户认证机制，允许用户在一个地方登录后，能够访问多个相关但独立的软件系统，而无需在每个系统中重新登录。这种机制简化了用户的登录过程，提升了用户体验，同时也便于企业对用户身份的集中管理和安全控制。

2024-07-05 18:31:45 838

原创在 React 项目中使用 Auth0 并集成到后端服务的配置步骤

在 React 项目中集成 Auth0，首先在 Auth0 Dashboard 创建和配置应用程序。然后，安装 `@auth0/auth0-react` SDK 并在项目中配置 Auth0 提供程序。使用 `useAuth0` 钩子访问认证状态，创建登录和登出按钮。最后，在后端服务中使用 JWT 中间件验证令牌，并在前端通过 `getAccessTokenSilently` 获取访问令牌，向后端 API 发送带有令牌的请求。

2024-07-04 14:35:26 501

原创 Sass 和 Less 的区别

Sass 和 Less 是两种流行的 CSS 预处理器，它们帮助开发者编写更简洁、高效、可维护的 CSS 代码。尽管它们的目标相似，但在语法、特性和使用上有一些区别。

2024-06-20 16:01:34 593

原创新建一个 React TypeScript 项目，并使用 Webpack 进行构建和打包

用 create-react-app 新建一个 React TypeScript 项目，安装 Webpack 和相关插件，使用 Webpack 进行构建和打包。

2024-06-19 16:51:53 1229

原创使用 git 遇到权限错误，重新生成SSH密钥

如果在执行 `git` 相关的命令的时候遇到权限错误，可能是因为你之前使用了不同的用户名在本地生成了SSH密钥。可以尝试删除旧的SSH密钥文件，再重新生成SSH密钥。

2024-06-17 11:28:59 510

原创 VS Code 常用快捷键

快捷键可以大大提高使用 VS Code 时的效率。可以在 VS Code 中通过 `Ctrl + K, Ctrl + S`（Windows）或 `Cmd + K, Cmd + S`（Mac）查看和自定义更多快捷键。

2024-06-13 17:29:16 330

原创在 VSCode 中搭建 Flutter 开发环境并运行项目

在 VSCode 中运行 Flutter 项目并启动虚拟机的步骤如下：首先，安装 Flutter SDK 并添加其 bin 目录到系统 PATH，然后在 VSCode 中安装 Flutter 和 Dart 插件。接着，下载并安装 Android Studio，配置 Android 模拟器。创建 Flutter 项目后，打开终端启动模拟器，或通过 VSCode 工具栏选择设备，按 F5 运行项目。最后，使用调试控制台设置断点和检查变量，进行调试。这样即可在 VSCode 中运行和调试 Flutter 项目。

2024-06-07 18:39:13 11868 2

空空如也

空空如也