十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
几种常见情况,
成都创新互联长期为成百上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为伊春企业提供专业的成都网站设计、网站建设,伊春网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
看下 ChangeNotifierProvider 用法,一个单一的观察者模式
看下 StreamProvider 用法,和RxJava一样可以多次触发并回调
看下 FutureProvider 用法,用于一次性请求比较好, 例如用户界面, 一个界面就几个地方需要变一下.
如果TestWidget 里面是这样写的,用Future+ Consumer则是单控件刷新. 如果是UserPageData currentUserData = Provider.ofUserPageData(context, listen: true);则是整个布局刷新
看一下ValueListenableProvider, 它的数据改变一般针对单一的数据.不需要调动notify
在做这个小 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
谢谢小伙伴的关注、收藏、点赞,谢谢~~
首先我们知道 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 即可,因为这是最简单的方式。