首页 > 其他分享 >Selector组件的用法

Selector组件的用法

时间:2024-09-04 22:24:24浏览次数:11  
标签:builder 数据类型 用法 组件 共享 Selector 方法 属性

文章目录


我们在上一章回中介绍了组件之间共享数据相关的内容,本章回中将继续介绍该内容.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

知识回顾

我们在前面章回中介绍了全局共享数据相关的内容,当时介绍了获取共享数据的三种方法,本章回将介绍其中的一种方法:使用Selector获取共享数据。

使用方法

Selector是一个Widget,它提供了builder,selector,shouldRebuild和child四个属性,一方面它可以转换数据类型,另一方面它可以获取共享数据。我们可以
通过selector属性获取到共享数据类型的对象,然后就可以使用共享类型提供的getter方法获取对象中的共享数据,把共享数据转换后再返回给builder属性。我们重
点介绍Selector的builder属性,selector属性和shouldRebuild属性,前两个属性都是必选属性,也就是说我们必须给这些属性赋值。

builder属性

该属性是方法类型,方法中包含三个参数,方法返回Widget对象,该方法和Consumer中buidler属性对应的方法相似,不同的地方只方法中第二个参数的类型,该方法
中三个参数的详细功能如下:

  • context:主要用来创建Widget,为创建Widget提供上下文环境;
  • value:是泛型类型,它用来表示转换数据类型后的对象;
  • child:表示Selector组件的子组件,因此它代表的对象和Selector组件的child属性代表的对象相同;

selector属性

该属性是方法类型,方法中包含两个参数,方法返回转换后的数据类型,下面是该方法的函数原型和相关参数的详细介绍:S Function(BuildContext, A) selector,

  • BuildContext:主要用来创建Widget,为创建Widget提供上下文环境;
  • A:它是泛型类型,它用来表示共享数据对象,通过该对象的getter方法可以获取到共享数据,然后就可以转换数据类型;
  • S:它是泛型类型,它用来表示转换数据类型后的对象,它和builder属性中的第二个参数类型相同;

shouldRebuild属性

该属性是方法类型,方法中包含两个参数,方法返回true或者false.返回值表示是否更新组件以及组件中的共享数据。该属性是可选属性,默认返回false.下面是该方
法的函数原型和相关参数的详细介绍:bool Function(T previous, T next)

  • previous:它是泛型类型,它用来表示转换前数据类型的对象;
  • next:它是泛型类型,它用来表示转换后数据类型后的对象;
    注意:这两个属性的类型相同,表示把共享数据类型转换后的数据类型,也就是selecttor属性中的S。

child属性

该属性表示Selector中的子组件,它和builder属性对应方法中的child参数相同。介绍完组件中所有属性相关的内容后,我们通过具体的代码来演示它的使用方法。

示例代码

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Selector<ViewModel, ViewModelAfterTranslate>(
      ///把新类型中数据通过child显示出来
      builder: (context, viewModelAnother,child) {
        print('builder of Selector of Widget C running');
        return Text('Widget C data: ${viewModelAnother.getIntData}');
      },
      ///在selector中进行数据类型转换,通过参数传入原类型,在方法中转换后返回新类型
      selector: (context, viewModel) {
        ViewModelAfterTranslate obj = ViewModelAfterTranslate();
        ///依据共享数据的值来转换数据,转换后的数据通过builder属性显示出来
        /// 字符串是通过button修改产生的,这里写成固定的值,实际项目中不能这样写
        if(viewModel.getData == 'change data') {
          obj.setIntData = 1;
        }else if(viewModel.getData == 'another value'){
          obj.setIntData = 2;
        }else {
          obj.setIntData = 0;
        }
        return obj;
      },
      ///可以配置是否需要更新数据,默认值为false,它是可选属性
      ///注意方法中的参数类型是新数据类型,也就是转换后的数据类型
      // shouldRebuild:(previous,next) => true,
      shouldRebuild:(previous,next) {
        print(' prev: ${previous.getIntData}, next: ${next.getIntData}');
        if (previous.getIntData == next.getIntData) {
          return false;
        } else {
          return true;
        }
      },
      ///没有使用该属性
      child: Text('child'),
    );
  }
}

在上面的代码中,把Selector组件封装到了一个独立的组件中,一方面可以减少代码的耦合,另一方面可以给builder属性和slector属性传递BuildContext类型的
参数,代码中相关的地方都添加了注释,我就不详细介绍了,此外代码给Selector指定了泛型类型:ViewModel和viewModelAnother。前者是共享数据的类型,详
细的定义可以参数前面章回的示例代码。后者是转换数后的类型,它和viewModel的内容类似,不同之处在于把数据类型从String变成了int.用来表示转换数据类型。
和Consumer类似,Selector也有Selector2,Selector3这些类,它们用来对多种数据类型做转换,我在这里就不详细介绍它们的使用方法了,大家可以自己动手去实践。
看官们,关于"全局共享数据之Selector"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:builder,数据类型,用法,组件,共享,Selector,方法,属性
From: https://blog.csdn.net/talk_8/article/details/141905684

相关文章

  • HarmonyOS NEXT开发:ArkUI组件动画-打造组件定制化动效
    组件动画ArkUI为组件提供了通用的属性动画和转场动画能力的同时,还为一些组件提供了默认的动画效果。例如,List的滑动动效,Button的点击动效,是组件自带的默认动画效果。在组件默认动画效果的基础上,开发者还可以通过属性动画和转场动画对容器组件内的子组件动效进行定制。使用组......
  • Vue3 组件封装的一些技巧和心得 转载
    在日常开发的过程中,使用Vue的组件进行业务拆分,代码解耦是一个很好的选择;今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得,希望能够帮助到大家;1.组件特性在Vue中组件是一个独立的实例,每个组件都有共通点,就是:属性、插槽、事件、方法;在日常我们使用第三方组件库的时候......
  • vue3 地图(天地图,百度地图,腾讯地图,高德地图)封装组件调用 带地图搜索功能common_tencent
    废话不多说直接上组件代码:<template><!--地图--><divclass="containerw"><divid="map"class="mapradius-md":style="{width:width,height:height}"></div></div><......
  • Mockito用法总结
    Mockito的是用来做什么的Mockito主要用于单元测试过程中模拟被调用方法的依赖<dependency><groupId>org.mockito</groupId><artifactId>mockito-core</artifactId><version>4.8.0</version><scope>test</scope></dependency......
  • js async/await 用法
    1.使用async/await可以更好地控制事件循环,像处理DOM事件或定时器等场合。eg1......
  • VUE - 动态渲染组件
    VUE-动态渲染组件 环境:vue21. 创建组件 创建文件:wbsgrap.vue<template><divclass="cbox">模型构件cc</div></template><script>exportdefault{data(){return{};},mounted(){},methods:{},};</script>......
  • DevExpress WinForms v24.1亮点- TreeList、折叠组件全新升级
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!DevExpressWinForms控件2024年第一个重大版本......
  • 日程安排组件DHTMLX Scheduler v7.1 - 支持RFC-5545格式
    DHTMLXScheduler是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天、周、月三个种视图显示。此版本包括几个备受期待的特性,可以帮助用户增强DHTMLXScheduler的体验。您可以使用流行的RFC-5545格式在......
  • 创建可调整大小的 React 组件react-resizable
    react-resizable是一个用于创建可调整大小的React组件的库。它为开发者提供了一种简单的方式来实现用户可以通过拖动边缘或角落来调整元素大小的功能。这个库通常用于需要动态调整尺寸的用户界面组件,如面板、窗口、表格列等。 主要特点轻量级:库非常小,只有核心的调整大小......
  • Vue3组件通信详解
    Vue3中的组件通讯是Vue应用开发中非常重要的一环,它允许组件之间传递数据和方法,从而实现数据的共享和功能的调用。下面将分别介绍父子组件、孙子组件(祖孙组件)、兄弟组件之间的通讯方式,并给出示例代码和总结表格。一、父子组件通讯1.父传子(props)父组件通过props向子组......