Flutter 应用服务:主题、暗黑、国际化、本地化 - app_service库

news2025/2/4 22:50:29
Flutter应用服务
主题、暗黑、国际化、本地化 app_service库

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/135903762
模块地址:https://pub.dev/packages/app_service
国内镜像:https://pub-web.flutter-io.cn/packages/app_service


在这里插入图片描述


1. 概述

在Flutter中,我们通常通过构建服务来实现贯穿整个应用生命周期的状态管理。例如,在实现用户认证功能时,可以创建一个Auth服务。类似地,还有许多其他场景,比如应用主题管理。对于主题、暗黑模式、国际化与本地化等场景,通常会实现一个AppService来集中管理这些方面。App Service库提供了一套全面的应用管理服务,同时提供了相关的UI组件和持久化解决方案。

App Service 是一个基于 GetX 的应用服务,提供应用级别的管理服务,如主题管理、深色模式管理和本地化管理。

在这里插入图片描述

2. 安装

你可以使用flutter pub add命令在你的项目中安装App Service的最新版本:

flutter pub add app_seivice

这将在项目的pubspec.yaml文件的 dependencies字段中添加app_seivice作为依赖,并隐式地运行一次flutter pub get

3. 用法实践

3.1 在依赖注入中管理 App Service

在实际项目中,除了 AppService 外,可能还有许多其他需要管理的依赖项,因此我喜欢创建一个 injections.dart 文件来描述这些依赖项。
以下示例使用 GetIt 库来管理依赖项。您还可以根据自己的习惯使用其他依赖管理方案。

import 'package:app_service/app_service.dart';
import 'package:get_it/get_it.dart';

/// 基于 Get it 库的依赖注入
class GetitInjection {
  static void init() {
    final GetIt i = GetIt.instance;
    AppService appService = AppService(
      supportedLanguages: const [
        LanguageEnum.zh,
        LanguageEnum.en,
      ],
      defaultLang: LanguageEnum.zh,
    );
    i.registerLazySingleton<AppService>(() => appService); 
  }
}

3.2 主题管理

应用服务中的主题管理用于切换不同的颜色主题,每个主题包含两种模式,即深色模式和浅色模式。
库中内置了由 flex_color_scheme 生成的许多主题数据。

以下是内置主题表:

主题名称(中文)亮色主题暗色主题
琥珀蓝amberBlueLightThemeamberBlueDarkTheme
青蓝aquaBlueLightThemeaquaBlueDarkTheme
巴哈马特立尼达bahamaTrinidadLightThemebahamaTrinidadDarkTheme
巴罗萨barossaLightThemebarossaDarkTheme
大石郁金香bigStoneTulipLightThemebigStoneTulipDarkTheme
蓝色的欢愉blueDelightLightThemeblueDelightDarkTheme
蓝石青blueStoneTealLightThemeblueStoneTealDarkTheme
蓝鲸blueWhaleLightThemeblueWhaleDarkTheme
布卢曼blumineLightThemeblumineDarkTheme
品牌蓝brandBlueLightThemebrandBlueDarkTheme
棕橙brownOrangeLightThemebrownOrangeDarkTheme
卡玛龙绿camaroneGreenLightThemecamaroneGreenDarkTheme
丝绒和月亮damaskLunarLightThemedamaskLunarDarkTheme
深蓝海deepBlueSeaLightThemedeepBlueSeaDarkTheme
深紫deepPurpleLightThemedeepPurpleDarkTheme
戴尔热那亚绿dellGenoaGreenLightThemedellGenoaGreenDarkTheme
乌木粘土ebonyClayLightThemeebonyClayDarkTheme
茄子紫eggplantPurpleLightThemeeggplantPurpleDarkTheme
企业家蓝endeavourBlueLightThemeendeavourBlueDarkTheme
浓缩咖啡奶油espressoCremaLightThemeespressoCremaDarkTheme
Flutter DashflutterDashLightThemeflutterDashDarkTheme
金黄日落goldSunsetLightThemegoldSunsetDarkTheme
绿greensLightThemegreensDarkTheme
绿色森林greenForestLightThemegreenForestDarkTheme
绿色丛林greenJungleLightThemegreenJungleDarkTheme
绿钱greenMoneyLightThemegreenMoneyDarkTheme
灰色法律greyLawLightThemegreyLawDarkTheme
嬉皮蓝hippieBlueLightThemehippieBlueDarkTheme
靛蓝之夜indigoNightLightThemeindigoNightDarkTheme
靛蓝圣马力诺indigoSanMarinoLightThemeindigoSanMarinoDarkTheme
唇膏粉lipstickPinkLightThemelipstickPinkDarkTheme
野鸭瓦伦西亚mallardValenciaLightThememallardValenciaDarkTheme
芒果莫吉托mangoMojitoLightThememangoMojitoDarkTheme
material3material3LightThemematerial3DarkTheme
Material3 高对比material3HighContrastLightThemematerial3HighContrastDarkTheme
Material3 紫色material3PurpleLightThemematerial3PurpleDarkTheme
午夜midnightLightThememidnightDarkTheme
清真寺青mosqueCyanLightThememosqueCyanDarkTheme
哦曼迪红ohMandyRedLightThemeohMandyRedDarkTheme
外太空舞台outerSpaceLightThemeouterSpaceDarkTheme
粉红樱花pinkSakuraLightThemepinkSakuraDarkTheme
紫褐purpleBrownLightThemepurpleBrownDarkTheme
红蓝redBlueLightThemeredBlueDarkTheme
红色龙卷风redTornadoLightThemeredTornadoDarkTheme
红酒redWineLightThemeredWineDarkTheme
红木rosewoodLightThemerosewoodDarkTheme
锈橙色rustDeepOrangeLightThemerustDeepOrangeDarkTheme
圣胡安蓝sanJuanBlueLightThemesanJuanBlueDarkTheme
鲨鱼橙sharkOrangeLightThemesharkOrangeDarkTheme
雷鸟红thunderbirdRedLightThemethunderbirdRedDarkTheme
威尔敦绿verdunGreenLightThemeverdunGreenDarkTheme
威尔敦酸橙verdunLimeLightThemeverdunLimeDarkTheme
尼古拉斯烧焦vesuviusBurnedLightThemevesuviusBurnedDarkTheme
柳树芥末willowWasabiLightThemewillowWasabiDarkTheme
育空金黄yukonGoldYellowLightThemeyukonGoldYellowDarkTheme

要切换主题,你可以使用AppService实例对象的setColorTheme对主题进行切换,该方法的类型签名为:

void setColorTheme(ColorThemesEnum themeEnum)

例如:

// 获取 AppService 实例
final AppService appService = GetIt.instance.get<AppService>();

// 切换主题为 bigStoneTulip
appService.setColorTheme(ColorThemesEnum.bigStoneTulip);

你可以使用ThemeModal模态框组件来为用户提供更加直观的主题选择,例如:

const ThemeModal(),

它以一个主题图标的形式显示在页面上:

在这里插入图片描述

如果触摸或点击该图标,将会以对话框的形式为用户提供主题选择:

在这里插入图片描述

每一个主题将以其primaryColor色的圆形显示在该模态框中,被选中的主题对应的圆形有一个“√”号。

3.2 暗黑模式管理

App Service 库中,Dark/Light 模式是同一主题下的两个子状态,本质上是定义了两组对应的主题数据。你可以直接在AppSeivice的单例中,通过 toggleDarkMode 方法切换暗黑模式:

// 获取 AppService 单例
final AppService appService = GetIt.instance.get<AppService>();
// 切换暗黑模式
appService.toggleDarkMode()

另外,实例对象appService上,用于设置暗黑/光亮的方法还有setDarkModesetLightMode

DarkModeSwitch 是一个可以直接使用的暗黑模式切换开关,你可以直接在代码中使用它。外观上,它看起来就像这样:

在这里插入图片描述

3.3 国际化和本地化管理

Messages是一个翻译容器,它接受一个列表,可以用来包含多个翻译。其类型签名为:

Messages Messages(
    List<Map<String, Map<String, String>>> translations
)

你应该在顶级组件 GetMaterialApp 中通过translations参数传入它,并且必须在列表中包含一个AppServiceMessages().keys,这是一份用于App Service的翻译文件。例如:

GetMaterialApp(
  translations: Messages([
    AppServiceMessages().keys,
    // 其它翻译
    HomeMessages().keys,
  ]),
);

其中,HomeMessages是一个假定的自定义翻译文件,它看起来像这样:

import 'package:get/get.dart';

class HomeMessages extends Translations {
  
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          'home.appService_demo': 'AppService 演示',
        },
        'en': {
          'home.appService_demo': 'AppService Demo',
        },
        'ko_KR': {
          'home.appService_demo': 'AppService 데모',
        },
        'ja_JP': {
          'home.appService_demo': 'AppService デモ',
        },
        // More language translate...
      };
}

当然,依据项目的需要你可以定义更多这样的翻译文件,并在Messagestranslations列表中加载。

实现国际化时,定义支持的多种语言是通过构造AppServicesupportedLanguages参数指定的,它接受由多个LanguageEnum 枚举值所构成的列表。AppService还需要指定一个默认的语言。例如:

AppService appService = AppService(
  supportedLanguages: const [
    LanguageEnum.zh,
    LanguageEnum.en,
    LanguageEnum.fr,
  ],
  defaultLang: LanguageEnum.zh,
);

其中,defaultLang的默认值为 LanguageEnum.en。这里的定义需要与顶层组件中的locale参数对应。

应用标题是不能使用GetX提供的.tr来实现翻译的,因为在顶层组件初始化完成之前该方法不可用。这在 Web 端的本地化切换效果尤为明显:

在这里插入图片描述

为了实现这种动态切换,你可以像我一样使用一个switch语句,下面是一个示例:

import 'package:app_service/app_service.dart';

// ...
GetMaterialApp(
  // ...
  title: switch (Get.locale?.languageCode) {
    'zh' => 'AppService 演示',
    'en' => 'AppService Demo',
    'fr' => 'AppService démonstration',
    'ja' => 'AppServiceデモ',
    'ko' => 'App 서비스 데모',
    'ar' => 'تطبيق AppService',
    _ => 'AppService Demo',
  },
  translations: Messages([
    AppServiceMessages().keys,
    HomeMessages().keys,
  ]),
  locale: const Locale('zh', 'CN'),
  fallbackLocale: const Locale('en', 'US'),
  home: const HomeView(),
);

要切换语言,可以使用AppService实例对象上的updateLocale方法,该方法的类型签名为:

void updateLocale(LanguageEnum newLanguage)

例如:

appService.updateLocale(LanguageEnum.zh);

有两个组件可以用于显示一个语言选择菜单以切换本地语言,分别是LangSelectMenuWen

其中,LangSelectMenu是一个普通的方形下拉按钮,例如:

const LangSelectMenu(),

看起来像这样:

在这里插入图片描述

Wen也是一个弹出菜单的按钮,只不过它以一个图标显示,这通常同于Header中:

const Wen()

看起来就像这样:

在这里插入图片描述

你可以自定义显示的图标,以及图标的大小,并且它可以是任何组件。

4. 服务初始化

初始化用于从持久化的数据中读取用户上一次存储的数据。在AppService 实例上提供了一个init方法用于完成其自身的相关初始化工作。

在你的应用中,可以使用多种方式完成初始化,例如,下面的代码展示了通过顶层组件GetMaterialApponInit方法实现初始化:

// ...
void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Future<void> onInit(BuildContext context) async {
    // Init AppService
    final appService = GetIt.instance.get<AppService>();
    await appService.init();
    // ...Other initializations
  }

  
  Widget build(BuildContext context) {
    final appService = GetIt.instance.get<AppService>();

    return GetMaterialApp(
      // ...
      onInit: () async {
        await onInit(context);
      },
    );
  }
}

5. Web App

在 Web App 中,当前的 sharedPreferencesWeb 库通过 localStorage 实现键值对存储。如果改变 AppService 所管理的相关状态,这些变化将直接反映在浏览器的 localStorage 中:

在这里插入图片描述

6. 示例应用

你可以在https://github.com/jacklee1995/flutter_app_service/tree/master/example中找到 App Service 的示例应用。

F. 附录

About version

各个版本所依赖的 GetX 推荐版本如下表所示:

App ServiceGetX
1.0.04.6

版本相差不大都可以通用。

Enums

LanguageEnum
/// 枚举表示不同的语言代码。
enum LanguageEnum {
  zh, // 中文(
  zhHans, // 中文(简体)
  zhHant, // 中文(繁体)
  zhHk, // 中文(香港)
  zhTw, // 中文(台湾)
  ru, // 俄语
  de, // 德语
  fr, // 法语
  ja, // 日语
  ko, // 韩语
  es, // 西班牙语
  ar, // 阿拉伯语
  en, // 英语
  enUs, // 英语(美国)
  enUk, // 英语(英国)
  pt, // 葡萄牙语
  it, // 意大利语
  nl, // 荷兰语
  tr, // 土耳其语
  hi, // 印地语
  id, // 印尼语
  vi, // 越南语
  th, // 泰语
  ms, // 马来语
  fil, // 菲律宾语
  sv, // 瑞典语
  pl, // 波兰语
  hu, // 匈牙利语
  ro, // 罗马尼亚语
  cs, // 捷克语
  el, // 希腊语
  he, // 希伯来语
  da, // 丹麦语
  fi, // 芬兰语
  no, // 挪威语
  sk, // 斯洛伐克语
  sl, // 斯洛文尼亚语
  bg, // 保加利亚语
  af, // 南非荷兰语
  sq, // 阿尔巴尼亚语
  hy, // 亚美尼亚语
  az, // 阿塞拜疆语
  eu, // 巴斯克语
  bn, // 孟加拉语
  bs, // 波斯尼亚语
  ca, // 加泰罗尼亚语
  hr, // 克罗地亚语
  cy, // 威尔士语
  et, // 爱沙尼亚语
  tl, // 菲律宾语
  gl, // 加利西亚语
  ka, // 格鲁吉亚语
  gu, // 古吉拉特语
  ht, // 海地克里奥尔语
  ha, // 豪萨语
  haw, // 夏威夷语
  iw, // 希伯来语
  jw, // 爪哇语
  kk, // 哈萨克语
  km, // 高棉语
  kn, // 卡纳达语
  ky, // 吉尔吉斯语
  lo, // 老挝语
  la, // 拉丁语
  lv, // 拉脱维亚语
  lt, // 立陶宛语
  lb, // 卢森堡语
  mk, // 马其顿语
  mg, // 马尔加什语
  mt, // 马耳他语
  mi, // 毛利语
  mr, // 马拉地语
  mn, // 蒙古语
  ne, // 尼泊尔语
  ps, // 普什图语
  pa, // 旁遮普语
  qu, // 凯楚亚语
  gd, // 苏格兰盖尔语
  sr, // 塞尔维亚语
  st, // 塞索托语
  sn, // 修纳语
  sd, // 信德语
  si, // 僧伽罗语
  su, // 巽他语
  sw, // 斯瓦希里语
  tg, // 塔吉克语
  ta, // 泰米尔语
  te, // 泰卢固语
  ur, // 乌尔都语
  uz, // 乌兹别克语
  xh, // 科萨语
  yi, // 意第绪语
  zu, // 祖鲁语
}
ColorThemesEnum
/// 主题颜色的枚举,包括了每个主题的名称。
enum ColorThemesEnum {
  /// 琥珀蓝
  amberBlue,

  /// 青蓝
  aquaBlue,

  /// 巴哈马特立尼达
  bahamaTrinidad,

  /// 巴罗萨
  barossa,

  /// 大石郁金香
  bigStoneTulip,

  /// 蓝色的欢愉
  blueDelight,

  /// 蓝石青
  blueStoneTeal,

  /// 蓝鲸
  blueWhale,

  /// 布卢曼
  blumine,

  /// 品牌蓝
  brandBlue,

  /// 棕橙
  brownOrange,

  /// 卡玛龙绿
  camaroneGreen,

  /// 丝绒和月亮
  damaskLunar,

  /// 深蓝海
  deepBlueSea,

  /// 深紫
  deepPurple,

  /// 戴尔热那亚绿
  dellGenoaGreen,

  /// 乌木粘土
  ebonyClay,

  /// 茄子紫
  eggplantPurple,

  /// 企业家蓝
  endeavourBlue,

  /// 浓缩咖啡奶油
  espressoCrema,

  /// Flutter Dash
  flutterDash,

  /// 金黄日落
  goldSunset,

  /// 绿
  greens,

  /// 绿色森林
  greenForest,

  /// 绿色丛林
  greenJungle,

  /// 绿钱
  greenMoney,

  /// 灰色法律
  greyLaw,

  /// 嬉皮蓝
  hippieBlue,

  /// 靛蓝之夜
  indigoNight,

  /// 靛蓝圣马力诺
  indigoSanMarino,

  /// 唇膏粉
  lipstickPink,

  /// 野鸭瓦伦西亚
  mallardValencia,

  /// 芒果莫吉托
  mangoMojito,

  /// Material3
  material3,

  /// Material3 高对比
  material3HighContrast,

  /// Material3 紫色
  material3Purple,

  /// 午夜
  midnight,

  /// 清真寺青
  mosqueCyan,

  /// 哦曼迪红
  ohMandyRed,

  /// 外太空舞台
  outerSpace,

  /// 粉红樱花
  pinkSakura,

  /// 紫褐
  purpleBrown,

  /// 红蓝
  redBlue,

  /// 红色龙卷风
  redTornado,

  /// 红酒
  redWine,

  /// 红木
  rosewood,

  /// 锈橙色
  rustDeepOrange,

  /// 圣胡安蓝
  sanJuanBlue,

  /// 鲨鱼橙
  sharkOrange,

  /// 雷鸟红
  thunderbirdRed,

  /// 威尔敦绿
  verdunGreen,

  /// 威尔敦酸橙
  verdunLime,

  /// 尼古拉斯烧焦
  vesuviusBurned,

  /// 柳树芥末
  willowWasabi,

  /// 育空金黄
  yukonGoldYellow,
}
工具
语言相关
/// 将语言枚举值转换为字符串
String? langEnumToStr(LanguageEnum lang)
/// 将语言标志转换为相应的国家标志
String getCountryCode(String item)
/// 将语言字符串转换为相应的语言枚举
LanguageEnum? strToLangEnum(String langStr)
主题相关
/// 将颜色主题与深色模式组合,并返回相应的 ThemeData 对象。
/// - themeName: 主题的名称。
/// - isDarkMode: 是否使用深色模式。
ThemeData getThemeDataByName(String themeName, bool isDarkMode)
/// 根据枚举获取主题数据 (ThemeData)。
ThemeData getThemeDataByEnum(ColorThemesEnum themeEnum, bool isDarkMode)

报告错误

你可以在 Github 上报告错误:https://github.com/jacklee1995/flutter_app_service/issues

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1427118.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx 多项目部署,vue刷新404 解决方案

网上找的资料大多都解决不了&#xff0c;废话不多说直接告诉你解决方法。 环境是 TP6 VUE前端官网 VUE 后台管理 部署 两个项目 刷新 404 解决方案 Nginx 配置 直接贴图 如果解决了&#xff0c;给我顶起来&#xff0c;让更多人 快速的解决。

Arduino 推出基于乐鑫 ESP32-S3 的 STEM 教育机器人

Arduino Alvik 是 Arduino Education 推出的一款新型机器人&#xff0c;可作为一种跨学科工具&#xff0c;为当前教育和未来机器人世界筑起连接的桥梁。Hackster 的 Gareth Halfacree 表示&#xff1a;“Alvik 的设计灵感来自 Arduino 简化复杂技术的理念&#xff0c;同时它也 …

上海市事业编报名照不能成功上传的原因

2024年上海市事业编报名照需要根据以下要求生成&#xff1a; 1、近期6个月&#xff0c;免冠证件照。 2、照片背景白底或者蓝底或者红底背景。 3、照片文件jpg格式&#xff0c;大小在100KB以下 4、照片像素大小&#xff0c;宽度75至150像素内&#xff0c;高度为105至210像素内 5…

gRPC - Google远程过程调用(Google Remote Procedure Call,gRPC)

什么是gRPC&#xff1f; Google远程过程调用&#xff08;Google Remote Procedure Call&#xff0c;gRPC&#xff09;是基于HTTP 2.0传输层协议承载的高性能开源RPC软件框架&#xff0c;为管理和配置网络设备提供了一种API接口设计的方法。gRPC提供了多种编程语言&#xff0c;如…

Linux之系统安全与应用续章

目录 一. PAM认证 1.2 初识PAM 1.2.1 PAM及其作用 1.2.2 PAM认证原理 1.2.3 PAM认证的构成 1.2.4 PAM 认证类型 1.2.5 PAM 控制类型 二. limit 三. GRUB加密 /etc/grub.d目录 四. 暴力破解密码 五. 网络扫描--NMAP 六. 总结 一. PAM认证 1.2 初识PAM PAM是Linux系…

软件工程知识梳理4-详细设计

详细设计阶段的根本目标是确定应该怎样具体地实现所要求的系统&#xff0c;也就是说.经过这个阶段的设计工作.应该得出对目标系统的精确描述.从而在编码阶段可以把这个描述直接翻译成用某种程序设计语言书写的程序。 详细设计的的目标不仅仅是逻辑上正确地实现每个模块地功能&a…

查询、导入导出、统计性能优化的一些总结

目录 1、背景 2、优化实现 2.1查询数据表速度慢 2.2调别人接口速度慢 2.3导入速度慢、 2.4导出速度慢的做出介绍 2.5统计功能速度慢 3、总结 1、背景 系统上线后&#xff0c;被用户反应系统很多功能响应时长很慢。用户页面影响速度有要求&#xff0c;下面针对查询数据表…

红队打靶练习:INFOSEC PREP: OSCP

目录 信息收集 1、arp 2、nmap WEB 信息收集 wpscan dirsearch ssh登录 提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.110.128 Starting arp-scan 1.10.0 with 256 ho…

“与客户,共昂首”——Anzo Capital昂首资本尽释行业进取之姿

“以匠心&#xff0c;铸不凡” 活动的现场&#xff0c;Anzo Capital 作为演讲嘉宾分享“以匠心&#xff0c;铸不凡”的产品理念。Anzo Capital积淀九载&#xff0c;匠心打造出“STP”和“ECN”两大核心账户&#xff0c;以光之速度将交易中的订单直达市场和流动性提供商&#…

江科大stm32学习笔记10——对射式红外传感器

一、接线 上电之后可以看到对射式红外传感器亮两个灯&#xff0c;如果此时用挡光片挡住两个黑色方块中间的部分&#xff0c;则只亮一个灯。 二、代码 将4-1的工程文件夹复制粘贴一份&#xff0c;重命名为“5-1 对射式红外传感器计次”&#xff0c;打开keil&#xff0c;右键添…

基于muduo网络库开发服务器程序和CMake构建项目 笔记

跟着施磊老师做C项目&#xff0c;施磊老师_腾讯课堂 (qq.com) 一、基于muduo网络库开发服务器程序 组合TcpServer对象创建EventLoop事件循环对象的指针明确TcpServer构造函数需要什么参数,输出ChatServer的构造函数在当前服务器类的构造函数当中,注册处理连接的回调函数和处理…

tcp/ip模型中,帧是第几层的数据单元?

在网络通信的世界中&#xff0c;TCP/IP模型以其高效和可靠性而著称。这个模型是现代互联网通信的基石&#xff0c;它定义了数据在网络中如何被传输和接收。其中&#xff0c;一个核心的概念是数据单元的层级&#xff0c;特别是“帧”在这个模型中的位置。今天&#xff0c;我们就…

C++ STL库详解:容器适配器stack和queue的结构及功能

一、stack 1.1stack的介绍 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容器&#xf…

【目标跟踪】3D点云跟踪

文章目录 一、前言二、代码目录三、代码解读3.1、文件描述3.2、代码框架 四、关联矩阵计算4.1、ComputeLocationDistance4.2、ComputeDirectionDistance4.3、ComputeBboxSizeDistance4.4、ComputePointNumDistance4.5、ComputePointNumDistance4.6、result_distance 五、结果 一…

实现div拖拽demo

示例代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title>&…

51单片机编程应用(C语言):数码管

目录 1.数码管原理 一位数码管引脚定义&#xff1a; 四位一体数码管&#xff1a; 多个数码管同时显示不同数字 51单片机的数码管的原理图 51单片机实现静态显示和动态显示 静态显示&#xff1a; 动态显示&#xff1a; 1.数码管原理 一位数码管引脚定义&#xff1a; 数码…

idea查看日志的辅助插件 --- Grep Console (高亮、取消高亮)

&#x1f680; 分享一款很有用的插件&#xff1a;Grep Console &#x1f680; 我们在查看日志的时候可能会有遗漏&#xff0c;使用这款插件可以让特定的关键词高亮&#xff0c;可以达到不遗漏的效果&#xff01; 如果你是一个开发者或者对日志文件分析感兴趣&#xff0c;不要…

linux搭建jupyter

查看虚拟环境 conda info --envs进入虚拟环境 conda activate my_env pip install jupyter pip install ipykernel1. jupyter notebook启动 1.1 创建临时jupyter notebook任务 jupyter notebook --ip0.0.0.0 --no-browser --allow-root --notebook-dir/home/xxx1.2 jupyter…

Xcode报fatal error: ‘XXX.h‘ file not found

在Xcode中遇到 "fatal error: XXX.h file not found" 的错误通常是由于缺少头文件或头文件路径配置不正确导致的。 以下仅为我的解决方案&#xff1a; 1.点击项目名——>显示此页面 2.选择Build Settings——>输入 Search Paths 3. 点击空白处添加路径 4…

使用浏览器开发工具分析性能

使用浏览器开发工具分析性能 一、网络分析二、性能分析 一、网络分析 1、面板概览&#xff1a; Controls (控件) : 控制面板的功能Filters (过滤器) : 控制在请求列表中显示哪些资源Overview (概览) : 展示检索资源的时间轴&#xff0c;多个垂直堆叠的栏意味着这些资源被同时…