rxflutter的简单介绍

flutter 之Provider 非常简单。

几种常见情况，

成都创新互联长期为成百上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为伊春企业提供专业的成都网站设计、网站建设，伊春网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

看下 ChangeNotifierProvider 用法，一个单一的观察者模式

看下 StreamProvider 用法,和RxJava一样可以多次触发并回调

看下 FutureProvider 用法，用于一次性请求比较好, 例如用户界面, 一个界面就几个地方需要变一下.

如果TestWidget 里面是这样写的，用Future+ Consumer则是单控件刷新. 如果是UserPageData currentUserData = Provider.ofUserPageData(context, listen: true);则是整个布局刷新

看一下ValueListenableProvider, 它的数据改变一般针对单一的数据.不需要调动notify

Flutter 与 Android 互调

在做这个小 demo 的时候，遇到了一些坑，到文章发布 坑 还是没有填好，无奈，只得用了别的方式实现了本篇文章的功能。

我这个人的缺点就是 爱钻牛角尖，哎

废话不多说，看效果图

那么，我们开始吧！

我们先看界面逻辑，先不考虑功能，然后将此布局给予上层

注意看这一行

这行其实作用就是声明了 链接 Android 原生的 MethodChannel

当然了，里面的内容随意， 你看我写的多随意

而真正的调用逻辑是

对 就是 invokeMethod 这个方法

当然这个方法的使用还有「带参数的使用方法」

再来看下方法的实现

ok，到此，Flutter 的逻辑就基本走完了，现在来看下 Android 的逻辑

这里，是我浪费了点时间的一个坑，我以为我可以直接在 Flutter 的项目结构下去更改 Android 的项目，结果证明我还是 too young 了，好了，说下我的方法，我是直接切换到了 Android 的项目结构，如下图

这样就可以进入 Android 的结构了

很简单，你想实现相互调用，那么肯定得有 暗号 吧

这里是通过

来实现的

其中 MethodCall 能够判断 Flutter 传递过来什么名称的参数，得到参数的内容等

而 MethodChannel.Result 则能够返回结果给 Flutter

上面的截图就是通过这两个类来实现的逻辑

定义依赖

定义 Bean

定义网络接口

实现 RetrofitHelper

通过 jakewharton 封装的 rxrelay 结合 rxjava2 实现 rxbus

Android Flutter 互调

MethodChannel 在 Flutter 及 Android 中的使用

Flutter 页面跳转

RxBus 封装

Bingo

谢谢小伙伴的关注、收藏、点赞，谢谢~~

Flutter GetX基础教程（十二）：RxList、Rx([])、.obs对比分析

首先我们知道 GetX 组件里面 obs 状态管理有三种创建属性的方式，我们这里以 List 为例

视频讲解链接

我们声明了一个类ListController 继承自 GetxController ，用于属性创建以及状态通知的方法，首先我们用三种方式来创建属性并且通过 convertToUpperCase 方法进行对值的改变，然后我们通过调用 update()`方法来进行数据更新，最后我们使用该属性状态的值，接下来我们看一下三种使用方式的对比。

import 'dart:convert';

import 'package:get/get.dart';

class ListController extends GetxController {

// 第一种

final listOne = RxListMap([

{

"name": "Jimi",

"age": 18

}

]);

// 第二种

final listTwo = RxList([

{

"name": "Jimi",

"age": 18

}

]);

// 第三种

final listThree = [{

"name": "Jimi",

"age": 18

}].obs;

void convertToUpperCase() {

listOne.value[0]["name"] = listOne.value.first["name"].toUpperCase();

listTwo.toList().first["name"] = listTwo.toList().first["name"].toString().toUpperCase();

listThree.toList().first["name"] = listTwo.toList().first["name"].toString().toUpperCase();

update();

}

}

我们在页面中获取状态更新的值

import 'package:flutter/material.dart';

import 'package:flutter_getx_dvanced_example/ListController.dart';

import 'package:get/get.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

ListController listController = Get.put(ListController());

@override

Widget build(BuildContext context) {

return GetMaterialApp(

title: "GetX",

home: Scaffold(

appBar: AppBar(

title: Text("GetX"),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

GetBuilderListController(

init: listController,

builder: (controller) {

return Text(

"我的名字是 {controller.listTwo.first['name']}",

style: TextStyle(color: Colors.green, fontSize: 30),

);

},

),

SizedBox(height: 20,),

GetBuilderListController(

init: listController,

builder: (controller) {

return Text(

"我的名字是 ${controller.listThree.first['name']}",

style: TextStyle(color: Colors.green, fontSize: 30),

);

},

),

SizedBox(height: 20,),

ElevatedButton(

onPressed: () {

listController.convertToUpperCase();

},

child: Text("转换为大写"))

],

),

),

),

);

}

}

/pre

|`

效果展示

RxT 继承自 _RxImplT ， _RxImplT 又继承 RxNotifierT 并混合 RxObjectMixinT 类

RxImplT 它主要的作用是管理泛型的所有逻辑的。

RxObjectMixinT 它主要的作用是管理注册到 GetX 和 Obx 的全局对象，比如 Widget 的 Rx 值

RxT 它主要的作用是将自定义模型类用Rx`来进行包装，

class RxT extends _RxImplT {

Rx(T initial) : super(initial);

@override

dynamic toJson() {

try {

return (value as dynamic)?.toJson();

} on Exception catch (_) {

throw '$T has not method [toJson]';

}

}

}

abstract class _RxImplT extends RxNotifierT with RxObjectMixinT {

_RxImpl(T initial) {

_value = initial;

}

void addError(Object error, [StackTrace? stackTrace]) {

subject.addError(error, stackTrace);

}

StreamR mapR(R mapper(T? data)) = stream.map(mapper);

void update(void fn(T? val)) {

fn(_value);

subject.add(_value);

}

void trigger(T v) {

var firstRebuild = this.firstRebuild;

value = v;

if (!firstRebuild) {

subject.add(v);

}

}

}

/pre

|`

RxListE 继承自 ListMixinE 实现了 RxInterfaceListE 并混合了 NotifyManagerListE, RxObjectMixinListE

RxListE 它的主要作用是创建一个类似于 ListT 的一个列表

class RxListE extends ListMixinE

with NotifyManagerListE, RxObjectMixinListE

implements RxInterfaceListE {

RxList([ListE initial = const []]) {

_value = List.from(initial);

}

factory RxList.filled(int length, E fill, {bool growable = false}) {

return RxList(List.filled(length, fill, growable: growable));

}

factory RxList.empty({bool growable = false}) {

return RxList(List.empty(growable: growable));

}

/// Creates a list containing all [elements].

factory RxList.from(Iterable elements, {bool growable = true}) {

return RxList(List.from(elements, growable: growable));

}

/// Creates a list from [elements].

factory RxList.of(IterableE elements, {bool growable = true}) {

return RxList(List.of(elements, growable: growable));

}

/// Generates a list of values.

factory RxList.generate(int length, E generator(int index),

{bool growable = true}) {

return RxList(List.generate(length, generator, growable: growable));

}

/// Creates an unmodifiable list containing all [elements].

factory RxList.unmodifiable(Iterable elements) {

return RxList(List.unmodifiable(elements));

}

@override

IteratorE get iterator = value.iterator;

@override

void operator []=(int index, E val) {

_value[index] = val;

refresh();

}

/// Special override to push() element(s) in a reactive way

/// inside the List,

@override

RxListE operator +(IterableE val) {

addAll(val);

refresh();

return this;

}

@override

E operator [](int index) {

return value[index];

}

@override

void add(E item) {

_value.add(item);

refresh();

}

@override

void addAll(IterableE item) {

_value.addAll(item);

refresh();

}

@override

int get length = value.length;

@override

@protected

ListE get value {

RxInterface.proxy?.addListener(subject);

return _value;

}

@override

set length(int newLength) {

_value.length = newLength;

refresh();

}

@override

void insertAll(int index, IterableE iterable) {

_value.insertAll(index, iterable);

refresh();

}

@override

IterableE get reversed = value.reversed;

@override

IterableE where(bool Function(E) test) {

return value.where(test);

}

@override

IterableT whereTypeT() {

return value.whereTypeT();

}

@override

void sort([int compare(E a, E b)?]) {

_value.sort(compare);

refresh();

}

}

/pre

|`

当我们在调用 .obs 的时候其实内部的实现源码还是通过 RxListe(this) 进行了一层包装，设计这个主要的目的就是为了方便开发者进行使用

ListExtensionE on ListE {

RxListE get obs = RxListE(this);

/// Add [item] to [ListE] only if [item] is not null.

void addNonNull(E item) {

if (item != null) add(item);

}

// /// Add [IterableE] to [ListE] only if [IterableE] is not null.

// void addAllNonNull(IterableE item) {

// if (item != null) addAll(item);

// }

/// Add [item] to ListE only if [condition] is true.

void addIf(dynamic condition, E item) {

if (condition is Condition) condition = condition();

if (condition is bool condition) add(item);

}

/// Adds [IterableE] to [ListE] only if [condition] is true.

void addAllIf(dynamic condition, IterableE items) {

if (condition is Condition) condition = condition();

if (condition is bool condition) addAll(items);

}

/// Replaces all existing items of this list with [item]

void assign(E item) {

// if (this is RxList) {

// (this as RxList)._value;

// }

}

/// Replaces all existing items of this list with [items]

void assignAll(IterableE items) {

// if (this is RxList) {

// (this as RxList)._value;

// }

clear();

addAll(items);

}

}

/pre

|`

我们对 RxT([]) 、 RxListE 、 .obs 进行了一个总结，在我们平时的开发过程中建议大家使用 .obs 即可，因为这是最简单的方式。