从简单的demo开始让您逐步了解GetX的用法

news2024/11/8 10:41:20

目录

前言

一、从demo开始体现下Getx的用法

二、从最简单的功能开始

1.新建一个Flutter工程

2.GetX初体验

1.路由跳转

1.普通路由跳转

2.跳转并从堆栈中销毁当前页面

3.跳转并销毁之前所有页面

4.跳转以及传值

2.更方便的实现SnackBar、Dialog、BottomSheet

三、Getx完整的状态管理功能

1.GetBuilder

1.简单的计时器

2.使用GetBuilder的id参数局部更新

3.使用GetBuilder要注意的点

2.Obx

1.简单的计时器

2.多个响应式变量实例

3.总结

3.GetX小组件

4.GetX其它的一些实用功能

1.设置动画效果

2.国际化


前言

        这篇文章会从一个简单的工程开始,介绍下GetX的功能。

一、从demo开始体现下Getx的用法

        我们先看看getX的路由跳转功能,如下如1所示:

图1.GetX实现路由跳转功能

        在图1的过程中,我们实现了路由的跳转,以及路由跳转的时候从堆栈中移除当前页面的功能。

        在本篇博客的demo中,还提供了Getx路由跳转的传值功能,以及使用GetX实现SnackBar、Dialog,路由的别名跳转等功能。

图2.路由功能

图3.使用GetX实现Snackbar,Dialog,BottomSheet

二、从最简单的功能开始

        写这篇文章的时候,笔者的Flutter版本信息如下:

        图4.Flutter本地开发环境

1.新建一个Flutter工程

        本来想着一步一步的把创建的过程提出来的,仔细一想,这些基础的代码看到的兄弟们应该都会,这里直接贴出来新建的这个工程吧。

        不使用getx版本的实例代码在这里。

        您可以下载下来看一下这些功能怎么实现,实在懒或者是感觉代码太简单的haul的话也可以在脑海中思考下这些功能的实现。

        下面我们来比较下如何使用Getx实现这些功能。

2.GetX初体验

        和其他的Flutter三方库一样,笔者这里用的getx的版本为4.6.6.首先我们应该在yaml文件中配置下getX。

get: ^4.6.6

        安装好之后,我们把MaterialApp改成GetMaterialApp即可在项目中使用GetX了。

1.路由跳转

1.普通路由跳转

        我们先看一下普通的路由跳转,例如在上面的例子中,普通的路由跳转我们应该这么写:

// 导航到 SecondPage
Navigator.push(context,MaterialPageRoute(builder: (context) => const SecondPage()),);

        很长的一段代码,使用get之后,代码如下:

Get.to(()=>const SecondPage());

        代码是不是简单了很多,而且不需要获取上下文的context(有些情况下获取context比较麻烦)。

2.跳转并从堆栈中销毁当前页面

        我们只需要下面一行代码即可:

Get.off(const ThirdPage());

        不使用GetX代码如下:

Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => const ThirdPage()), );

3.跳转并销毁之前所有页面

        同样一样代码即可:

Get.offAll(const ThirdPage());

4.跳转以及传值

       当我们需要使用路由跳转并传值的时候,我们仅需要再GetMaterialApp中配置getPages属性,代码如下:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:state_management/fourth.dart';
import 'package:state_management/second.dart';
import 'package:state_management/third.dart';
import 'home.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),getPages: [
        GetPage(name: "/", page: ()=> const MyHomePage()),
        GetPage(
            name: "/second", page: ()=> const SecondPage(),
            transition: Transition.zoom
        ),
        GetPage(name: "/third", page: ()=> const ThirdPage()),
        GetPage(name: "/fourth", page: ()=> FourthPage()),
    ],
      home: const MyHomePage(),
    );
  }
}

        当我们需要跳转并传值的时候同样一行代码解决:

Get.toNamed("/fourth",arguments: "Something from second Screen");

        在需要接收传值的页面,使用下面的代码也可以一行代码解决:

Get.arguments != null ?Text("上一个页面传递的参数:${Get.arguments}"):const Text(''),

        我们还可以在当前页面接收下一个页面的会传值:

ElevatedButton(onPressed: () async { dataFromFourth = await Get.to(FourthPage()); setState(() { }); debugPrint("dataFromFourth:$dataFromFourth"); }, child: const Text('从第四个页面返回数据',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),),

2.更方便的实现SnackBar、Dialog、BottomSheet

       使用getx,我们可以在不使用context的情况下使用很少代码实现Snackbar、dialog,BottomSheet。

        以SnackBar为例,一行代码搞定Snack:

Get.snackbar("GetX is Awesome", "您应该尝试使用它",snackPosition: SnackPosition.BOTTOM);

        不使用getx,代码如下:

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(
    content: Text('这是一个 SnackBar!'),
  ),
);

        上述代码的Getx实现示例代码在这里。

三、Getx完整的状态管理功能

        上一章节中,我们简单体验了GetX的以便方便之处,这一节我们将详细的讲解下Fluttter的状态管理功能。

1.GetBuilder

        这是一种手动状态管理器,内存消耗最小,使用较少的内存(接近0mb),当UI中的单独组件越多,性能越突出。

1.简单的计时器

        我们以计数器的效果为例,看一下GetBuilder的用法,在下面的实例中,我们点击count++按钮,计时器每次加1.

        图5.计时器实例

        我们看看如何实现图5的功能。

        首先我们创建一个GetxController用来保存计时器变量,这里要注意的是GetBuilder是手动状态管理器,我们需要主动的调用update方法,代码如下:

import 'package:get/get.dart';

class CounterController extends GetxController{
  int counter = 0;
  void increment(){
    counter++;
    update();
  }
}

        在使用GetBuilder的页面,我们只需要使用GetBuilder包裹住自己的Widget即可。

        我们通过Get.put方法获取GetxController实例。

final CounterController counterController = Get.put(CounterController());

        当我们点击按钮的时候,直接调用GetxController中的方法即可:

counterController.increment();

        完整的一个代码如下:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:state_management/controllers/counterController.dart';

class StateManagementPage extends StatelessWidget {
  StateManagementPage({super.key});
  final CounterController counterController = Get.put(CounterController());


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: const Text('GetX | StateManagement',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GetBuilder<CounterController>(builder: (_){
                return Text("当前Count的值:${_.counter}");},
              ),
              // ElevatedButton(onPressed: (){}, child:Text('count++'',style: TextStyle(color: Colors.bold,))),
              const SizedBox(height: 20,),
              ElevatedButton(onPressed: (){
                counterController.increment();
              }, child: const Text('count+1',style: TextStyle(color: Colors.black,))),
              const SizedBox(height: 40,),
              ElevatedButton(onPressed: (){}, child: const Text('更新姓名和存储数量')),
            ]
        ),
      ),
    );
  }
}

        在上述的代码中,我们首先初始化了一个GetxController实例,然后调用该实例的increment方法,初次之外,我们还可以每次创建GetBuilder的时候,都调用GetxController的初始化方法,代码如下:

GetBuilder<CounterController>(builder: (_){
  return Text("当前Count的值:${_.counter}");
  },
  init: CounterController(),
),

        然后我们去ROM中查找GetxController,代码如下:

Get.find<CounterController>().increment();

        完整代码如下:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:state_management/controllers/counterController.dart';

class StateManagementPage extends StatelessWidget {
  StateManagementPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: const Text('GetX | StateManagement',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GetBuilder<CounterController>(builder: (_){
                return Text("当前Count的值:${_.counter}");
                },
                init: CounterController(),
              ),
              // ElevatedButton(onPressed: (){}, child:Text('count++'',style: TextStyle(color: Colors.bold,))),
              const SizedBox(height: 20,),
              ElevatedButton(onPressed: (){
                Get.find<CounterController>().increment();
              }, child: const Text('count+1',style: TextStyle(color: Colors.black,))),
              const SizedBox(height: 40,),
              ElevatedButton(onPressed: (){}, child: const Text('更新姓名和存储数量')),
            ]
        ),
      ),
    );
  }
}

2.使用GetBuilder的id参数局部更新

        GetBuilder提供了一个id参数,用于局部更新界面。通过指定不同的id,可以实现更精细的控件刷新,避免整个页面刷新。

        我们以下面的demo为例:点击不同的按钮,更新不同的计数器:

       图6.使用GetBuilder参数局部更新

        在控制器中使用update指定id:

import 'package:get/get.dart';

class PartialRefreshController extends GetxController{
  int counter1 = 0;
  int counter2 = 0;

  void incrementCounter1(){
    counter1++;
    update(['counter1']); //只更新id为counter1的GetBuilder
    update();
  }
  void incrementCounter2(){
    counter2++;
    update(['counter2']); //只更新id为counter2的GetBuilder
  }

}

        在页面中使用不同的GetBuilder和id:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:state_management/controllers/partialRefreshController.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: const Text('GetX | StateManagement',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 40,),
            GetBuilder<PartialRefreshController>(
              id: 'counter1',
              builder: (controller) => Text('counter1: ${controller.counter1}'),
              init: PartialRefreshController(),
            ),
            const SizedBox(height: 40,),
            GetBuilder<PartialRefreshController>(
              id: 'counter2',
              builder: (controller) => Text('counter2: ${controller.counter2}'),
              init: PartialRefreshController(),
            ),
            const SizedBox(height: 40,),
            ElevatedButton(
              onPressed: () {
                Get.find<PartialRefreshController>().incrementCounter1();
              },
              child: const Text('counter1++'),
            ),
            const SizedBox(height: 40,),
            ElevatedButton(
              onPressed: () {
                Get.find<PartialRefreshController>().incrementCounter2();
              },
              child: const Text('counter2++'),
            ),
          ],
        )
      ),
    );
  }
}

3.使用GetBuilder要注意的点

  1. GetBuilder用于简单的状态管理,它是一个手动状态管理器,需要我们手动调用update方法更新页面
  2. 使用GetBuilder的时候,要确保对应的GetxController被初始化
  3. 使用 id 参数可以实现局部更新,减少不必要的界面重建。

2.Obx

        在 Flutter 中,Obx 是 GetX 提供的一种响应式小部件(widget),用于监听和响应数据变化。与 GetBuilder 不同,Obx 使用了 GetX 的响应式变量(Rx 类型),可以自动响应变量的变更并刷新对应的界面,不需要手动调用 update() 方法。Obx 的特点是简单、灵活,特别适合数据频繁变化的场景。

1.简单的计时器

        我们还以计时器代码为例:

        当我们使用Obx的时候,第一步先定义一个控制器,包含响应式变量counter和增加计数的方法。

import 'package:get/get.dart';

class CounterController extends GetxController {
  // 定义一个响应式变量
  var counter = 0.obs;

  // 增加计数的方法
  void increment() {
    counter++; // 更新变量,Obx 会自动响应变化
  }
}

        然后我们就可以在界面中使用Obx。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart'; // 引入控制器

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化控制器
    final CounterController counterController = Get.put(CounterController());

    return Scaffold(
      appBar: AppBar(
        title: Text('Obx 示例'),
      ),
      body: Center(
        child: Obx(() {
          // Obx 会自动监听 counter 变量的变化
          return Text(
            '点击次数: ${counterController.counter}',
            style: TextStyle(fontSize: 24),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterController.increment(); // 调用 increment 更新 counter
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

2.多个响应式变量实例

        如果控制器中有多个响应式变量,每个变量改变时都会触发 Obx 的重建。

        控制器的代码如下:

import 'package:get/get.dart';

class MultiCounterController extends GetxController {
  var counter1 = 0.obs;
  var counter2 = 0.obs;

  void incrementCounter1() {
    counter1++;
  }

  void incrementCounter2() {
    counter2++;
  }
}

        在界面中分别用Obx监听counter1和counter2的变化。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'multi_counter_controller.dart';

class MultiCounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MultiCounterController counterController = Get.put(MultiCounterController());

    return Scaffold(
      appBar: AppBar(title: Text('Obx 多变量示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('计数器1: ${counterController.counter1}', style: TextStyle(fontSize: 24))),
            Obx(() => Text('计数器2: ${counterController.counter2}', style: TextStyle(fontSize: 24))),
            ElevatedButton(
              onPressed: counterController.incrementCounter1,
              child: Text('增加计数器1'),
            ),
            ElevatedButton(
              onPressed: counterController.incrementCounter2,
              child: Text('增加计数器2'),
            ),
          ],
        ),
      ),
    );
  }
}

3.总结

  1. Obx 非常适合频繁变化的小范围状态管理,自动监听并响应 Rx(响应式)变量的变化。

  2. 使用 Obx 无需手动调用 update(),代码更简洁。

  3. 适合响应频繁或实时性较高的场景,比如计数器、表单输入等

3.GetX小组件

        在 Flutter 中使用 GetX 包装器可以直接在 UI 中使用 GetX 的响应式管理。你这里的代码使用 GetX 小部件来监听和显示 UserController 中 user 的数据变化。这种方法可以简化代码,将状态更新与 UI 绑定在一起。下面是完整的代码示例,解释如何通过 GetX 实现对用户数据的实时更新。

        我们以更新用户名称为例,看一下GetX小组件如何和UI绑定。

1.第一步:创建爱你UserController

import 'package:get/get.dart';

class User {
  String name;
  User({required this.name});
}

class UserController extends GetxController {
  // 创建一个响应式的 user 对象
  var user = User(name: 'John Doe').obs;

  // 更新用户名称的方法
  void updateUser(String newName) {
    user.update((val) {
      val?.name = newName;
    });
  }
}

2.第二步:在界面中使用GetX绑定数据

        在界面中使用 GetX<UserController> 小部件来监听 user 的变化。每当 user 的 name 属性发生变化时,Text 小部件将自动更新。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'user_page.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: UserPage(),
    );
  }
}

4.GetX其它的一些实用功能

1.设置动画效果

        我们可以设置路由跳转时候的一些动画效果,例如缩放效果:

        图8.路由跳转缩放效果

        一行代码即可实现上述的功能:

Get.to(()=>const OtherPage(),transition: Transition.zoom);

2.国际化

        GetX提供了国际化的功能,我们只需要继承Translations,把要国际化的内容以键值对的形式放在字典里即可:

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'en_US': {
          'hello': 'Hello World',
        },
        'de_DE': {
          'hello': 'Hallo Welt',
        }
      };
}

        使用的时候,只要将.tr追加到指定的键上,就会使用Get.localeGet.fallbackLocale的当前值进行翻译。

Text('title'.tr);

        传递参数给GetMaterialApp来定义语言和翻译。

return GetMaterialApp(
    translations: Messages(), // 你的翻译
    locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
    fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在
);

        当我们需要修改语言的时候,调用Get.updateLocale(locale)来更新语言环境。然后翻译会自动使用新的locale。

var locale = Locale('en', 'US');
Get.updateLocale(locale);

        读取系统语言,使用window.locale。

import 'dart:ui' as ui;

return GetMaterialApp(
    locale: ui.window.locale,
);

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

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

相关文章

【无标题】从网红长沙看背后的湘菜产业

“吃什么&#xff1f;” 相信这是每一个来长沙旅游的人&#xff0c;面临的第一个问题。 近年来&#xff0c;长沙以美食为媒介&#xff0c;成功吸引了无数游客的目光。而湘菜&#xff0c;作为湖南最具特色的美食名片&#xff0c;无疑在这场美食盛宴中占据了举足轻重的地位。 …

使用 Qt 实现自定义罗盘控件

用 Qt 编写一个简单的罗盘控件&#xff0c;该控件能够动态显示方向。该控件实现了一个带有北&#xff08;N&#xff09;和南&#xff08;S&#xff09;标记的圆形罗盘面盘&#xff0c;具有可以根据输入角度旋转的指针。 代码功能概述 该项目定义了一个 CompassWidget 类&…

算法|牛客网华为机试21-30C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试10-20C 文章目录 HJ21 简单密码HJ22 汽水瓶HJ23 删除字符串中出现次数最少的字符HJ24 合唱队HJ25 数据分类处理HJ26 字符串排序HJ27 查找兄弟单词HJ28 素数伴侣HJ29 字符串加解密HJ30 字符串合并处理 HJ21 简单密码 题目描…

使用 MMDetection 实现 Pascal VOC 数据集的目标检测项目练习(二) ubuntu的下载安装

首先&#xff0c;Linux系统是人工智能和深度学习首选系统。原因如下: 开放性和自由度&#xff1a;Linux 是一个开源操作系统&#xff0c;允许开发者自由修改和分发代码。这在开发和研究阶段非常有用&#xff0c;因为开发者可以轻松地访问和修改底层代码。社区支持&#xff1a;…

【ECMAScript标准】深入解析ES5:现代JavaScript的基石

&#x1f9d1;‍&#x1f4bc; 一名茫茫大海中沉浮的小小程序员&#x1f36c; &#x1f449; 你的一键四连 (关注 点赞收藏评论)是我更新的最大动力❤️&#xff01; &#x1f4d1; 目录 &#x1f53d; 前言1️⃣ ES5的概述2️⃣ ES5的关键特性3️⃣ ES5与之前版本的区别4️⃣ …

【万户软件-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

第2章 Android App开发基础

第 2 章 Android App开发基础 bilibili学习地址 github代码地址 本章介绍基于Android系统的App开发常识&#xff0c;包括以下几个方面&#xff1a;App开发与其他软件开发有什么不一 样&#xff0c;App工程是怎样的组织结构又是怎样配置的&#xff0c;App开发的前后端分离设计…

文本分段Chunking综述-RAG

为什么要分段&#xff1f; 即便大模型开始普通支持更大的上下文&#xff0c;但 RAG 技术目前仍然具有不可替代的价值&#xff0c;RAG 需要外部知识库。外部知识文档往往比较长&#xff0c;可能是包含几十页甚至数百页的内容&#xff0c;如果直接使用会存在以下问题&#xff1a…

R语言 | paletteer包:拥有2100多个调色板!

看到 PMID:39024031 文章的代码中&#xff0c;有颜色设置的语句&#xff1a; pal <- paletteer_d("ggsci::category20_d3")[c(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18)]DimPlot(MM,reduction umap,group.by "sample",label F,pt.size 0.1,c…

怎么看AI大模型(LLM)、智能体(Agent)、知识库、向量数据库、知识图谱,RAG,AGI 的不同形态?

前言 在 AI 人工智能时代&#xff0c;智能体将会是未来最主流的大模型应用方式&#xff1f;人人都有机会通过智能体&#xff0c;解锁成为【超级个体】。 在人工智能的快速发展中&#xff0c;LLM、Agent、知识库、向量数据库、RAG&#xff08;检索增强生成&#xff09;、知识图…

照片不完整?来试试智能扩图,简直不要太满意!(不是广告)

生活中有些照片拍过之后&#xff0c;当时觉得很满意&#xff0c;但过段时间就恨当初没有拍一张完整的图片&#xff01; ——来自小白的感慨 当时跟家里的叮当一起去旅游&#xff0c;我给他拍了一张好看的照片&#xff1a; 今天这张照片如果是整图就好了&#xff01;好气哦&am…

idea连接数据库出现错误的解决方式

在使用idea连接数据库时&#xff0c;出现错误&#xff1a; The server has terminated the handshake. The protocol list option (enabledTLSProtocols) is set, this option might cause connection issues with some versions of MySQL. Consider removing the protocol li…

1. STM32环境搭建

1. MDK5(keil) 安装 安装包获取&#xff0c;可以在官网下载 https://www.keil.com/demo/eval/arm.htm 或者通过其他方式获取&#xff0c;下载 下载完有一个安装包和 “钥匙”&#xff0c;解压时关闭杀毒软件&#xff0c;防止被清理掉 1.1 安装 软件安装位置选择&#xff1a;…

map的oj题

第一题 . - 力扣&#xff08;LeetCode&#xff09; 第二题 单词识别_牛客题霸_牛客网 解题思路&#xff1a; 1&#xff0c;将数据放入set或者map中去重和更新次数, 即利用set和map的[ ] 2. 将数据放到vector 进行排序 &#xff0c;还应该利用仿函数写出 Compare() ,因为s…

Android13预置应用及授权开发

在android13中&#xff0c;要预置一个对讲应用&#xff0c;从预置和授权&#xff0c;梳理了一下&#xff0c;以便后续查询使用。在此记录 一放置应用 我的apk应用放在vendor下面&#xff0c; 路径&#xff1a;projectroot/vendor/fly/package/apps/DMR/flydmr.apk (vendor/fl…

【深度学习中的注意力机制9】11种主流注意力机制112个创新研究paper+代码——滑动窗口注意力(Sliding Window Attention)

【深度学习中的注意力机制9】11种主流注意力机制112个创新研究paper代码——滑动窗口注意力&#xff08;Sliding Window Attention&#xff09; 【深度学习中的注意力机制9】11种主流注意力机制112个创新研究paper代码——滑动窗口注意力&#xff08;Sliding Window Attention…

RK3568平台(PWM篇)红外遥控适配

一.红外遥控简介 红外遥控的发射电路是采用红外发光二极管来发出经过调制的红外光波;红外接收电路由红外 接收二极管、三极管或硅光电池组成,它们将红外发射器发射的红外光转换为相应的电信号,再送 后置放大器。 鉴于家用电器的品种多样化和用户的使用特点,生产厂家对进行…

【Linux初阶】指令操作

上一篇文章&#xff08;⭐点这里⭐⭐点这里&#xff09;我们初步对Linux有了一些基本的认识&#xff0c;了解到了Windows的图形化界面操作和Linux的纯命令指令是操作上二者最大的区别&#xff0c;今天我们来继续深入的学习Linux的操作指令&#xff0c;学习一些基本的指令来控制…

跨平台开发支付组件,实现支付宝支付

效果图&#xff1a; custom-payment &#xff1a; 在生成预付订单之后页面中需要弹出一个弹层&#xff0c;弹层中展示的内容为支付方式&#xff08;渠道&#xff09;&#xff0c;由用户选择一种支付方式进行支付。 该弹层组件是以扩展组件 uni-popup 为核心的&#xff0c;关于…

MFC图形函数学习04——画矩形函数

MFC中绘制矩形函数是MFC的基本绘图函数&#xff0c;它的大小和位置由左上角和右下角的坐标决定&#xff1b;若想绘制的矩形边框线型、线宽、颜色以及填充颜色都还需要其它函数的配合。 一、绘制矩形函数 原型&#xff1a;BOOL Rectangle(int x1,int y1,int x2,int y2); …