一辣之、首先,依然是計(jì)數(shù)器的
1.構(gòu)建共享數(shù)據(jù)
-
update()
使用GetBuilder 獲取共享數(shù)據(jù),并操作變化時(shí),需要執(zhí)行update()才能被通知到GetBuilder. -
.obs
給數(shù)據(jù)源加了.obs意味著 將其變成了rx響應(yīng)數(shù)據(jù)(此例子中即RxInt),可以直接使用Obx語法監(jiān)聽,并操作變化.無需調(diào)用update()方法
class CountController extends GetxController {
var _counter = 0.obs;
get counter => _counter;
void increment() {
_counter++;
update();
}
@override
void onInit() {
super.onInit();
print('CountController--onInit');
}
@override
void onReady() {
super.onReady();
print('CountController--onReady');
}
@override
void onClose() {
super.onClose();
print('CountController--onClose');
}
}
2.獲取controller, 操作數(shù)據(jù)
使用GetBuilder獲取controller
1.需要在使用前 或 init參數(shù)中初始化共享數(shù)據(jù)Controller
(1) 使用前初始化的方式:CountController initController = Get.put(CountController());
(2) GetBuilder 的init參數(shù)初始化方式:
GetBuilder<CountController>(
init: CountController(), //這里不初始化 , 就在上面初始化
tag: "init_tag", //這里init不初始化,也不要設(shè)置這個(gè)tag; 設(shè)置了tag 數(shù)據(jù)就不是共享的了
builder: ...
)
-
2.獲取數(shù)據(jù)改變數(shù)據(jù)的方式:
(1)可以使用build內(nèi)返回的controller來獲取數(shù)據(jù)和改變數(shù)據(jù);
(2)可以用初始化initController獲取數(shù)據(jù)和改變數(shù)據(jù)
(3)可以用Get.find<CountController>()可以用來獲取數(shù)據(jù)和改變數(shù)據(jù)
class GetTestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('SimplePage--build');
CountController initController = Get.put(CountController()); //初始化
return GetBuilder<CountController>(
//GetBuilder不監(jiān)聽obs更改,更改必須通過調(diào)用controller.update()
// init: CountController(), //這里不初始化 , 就在上面初始化
// tag: "init_tag", //這里init不初始化,也不要設(shè)置這個(gè)tag; 設(shè)置了tag 數(shù)據(jù)就不是共享的了
builder: (controller) {
print("GetBuilder--refresh");
return Scaffold(
appBar: AppBar(title: Text('Get')),
body: Center(
child: Column(children: [
Text(
controller.counter.toString(),
style: TextStyle(fontSize: 30),
),
Text(
initController.counter.toString(),
style: TextStyle(fontSize: 30),
),
Text(
Get.find<CountController>().counter.toString(),
style: TextStyle(fontSize: 30),
),
FloatingActionButton(
heroTag: "get_test1_increment",
onPressed: () {
controller.increment();
// initController.increment();
// Get.find<CountController>().increment();
},
child: Icon(Icons.add),
),
])),
floatingActionButton: FloatingActionButton(
heroTag: "get_totest2",
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return GetTest2Page();
}));
},
child: Icon(Icons.next_plan),
),
);
});
}
}
使用GetX獲取controller
- 使用及注意事項(xiàng)與GetBuilder相同(需要初始化controller;改變數(shù)據(jù)及獲取數(shù)據(jù)的方式)
class GetTest2Page extends StatelessWidget {
const GetTest2Page({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
CountController initController = Get.put(CountController()); //Obx需要初始化
print('SimplePage2--build');
return Scaffold(
appBar: AppBar(title: Text('Get')),
body: Center(
child: Column(children: [
GetX<CountController>(
// init: CountController(),//默認(rèn)在這里初始化,不初始化的話,將會(huì)使用上邊初始化的Controller
builder: (controller) {
print('GetX--refresh');
return TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () {
controller.increment();
},
child: Text(
'點(diǎn)擊+1-----${controller.counter}',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
);
},
),
Obx(() => TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () {
initController.increment();
},
child: Text(
'點(diǎn)擊+1-----${initController.counter}',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
)),
Obx(() => Text(
'僅顯示===${initController.counter}',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
)),
Obx(() => TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () {
Get.find<CountController>().increment();
},
child: Text(
'點(diǎn)擊+1-----${Get.find<CountController>().counter}',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
)),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue)),
onPressed: () {
Get.find<CountController>().increment();
},
child: Text(
'無法觀察變化 +1 -----${Get.find<CountController>().counter}',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
),
)
]),
),
);
}
}
使用Obx觀察數(shù)據(jù)
- (1)數(shù)據(jù)源一定是Rx...(后面加.obs); 更新方法無需使用update()
- (2)使用前一定要初始化controller
- (3)Obx(() =>widget) widget內(nèi)可以展示數(shù)據(jù),改變數(shù)據(jù)
二篡帕、Get.find<CountController>()的內(nèi)部實(shí)現(xiàn)
- (1)獲取數(shù)據(jù)改變數(shù)據(jù)既然可以直接使用Get.find<CountController>()拿到controller,就能改變數(shù)據(jù),展示數(shù)據(jù),為什么還要使用上述的3種方法?
通過上面例子中的最后一個(gè) "無法觀察變化 +1"此按鈕可以看出,直接使用Get.find<CountController>()拿到的controller,可以改變數(shù)據(jù),但是這個(gè)按鈕本身并不具備觀察功能,改變數(shù)據(jù)時(shí),這個(gè)值并不會(huì)刷新. - (2)通過源碼可以看出,在初始化controller時(shí),Get.put內(nèi)部會(huì)先走_(dá)insert方法,然后走find方法,返回一個(gè)controller.
CountController initController = Get.put(CountController());
image.png
_insert方法 內(nèi)部,會(huì)根據(jù)這個(gè)controller的tag或名字, 生成一個(gè)唯一key,并加入到_singl內(nèi).
image.png
find方法 會(huì)先從_initDependencies內(nèi)部尋找是否有對(duì)應(yīng)tag的controller可以返回(是否初始化,沒有的話先初始化);有的話,直接返回,沒有的話,通過key在_singl中拿到.
image.png
image.png
所以,當(dāng)我們使用Get.find<CountController>()時(shí),也是這樣的調(diào)用流程,獲取到的controller.這個(gè)controller與其他方式獲取到的controller是同一個(gè)controller.
三异袄、實(shí)際使用,渲染一個(gè)列表-- obx方式
- 1.共享數(shù)據(jù)
import 'package:get/get.dart';
class TestGetLogic extends GetxController {
RxList _list = [].obs;
get list => _list;
addListData(List data){
_list.addAll(data);
// update();
}
}
- 2.使用頁面
class TestGetPage extends StatefulWidget {
@override
_TestGetPageState createState() => _TestGetPageState();
}
class _TestGetPageState extends State<TestGetPage> {
TestGetLogic logic;
_TestGetPageState() {
logic = Get.put(TestGetLogic());
}
@override
void initState() {
///模擬網(wǎng)絡(luò)請(qǐng)求,拿到數(shù)據(jù)
Future.delayed(Duration(milliseconds: 360), () {
logic.addListData(["達(dá)拉崩吧", "崩德比迪")]);
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Obx(() { //Obx配合.obs 數(shù)據(jù)刷新
return Text("${logic.list.length}");
}),
Obx(() {
return Expanded(
child: ListView.builder(
itemCount: logic.list.length,
itemBuilder: (context, index) {
return _listItem(logic.list[index]);
}),
);
}),
],
),
);
// body: GetBuilder<TestGetLogic>(
// builder: (controller) { //刷新需要配合update()
// return ListView.builder(
// itemCount: logic.list.length,
// itemBuilder: (context, index) {
// return _listItem("${logic.list[index]}");
// });
// }));
}
Widget _listItem(String str) {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
padding: const EdgeInsets.all(5.0),
color: Colors.black12,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
str,
maxLines:1,
style: TextStyle(fontSize: 18,fontWeight: FontWeight.w500),
),
],
),
),
);
}
}
問題
本例僅實(shí)現(xiàn)了向list里面增加數(shù)據(jù), 那如何清空數(shù)據(jù),修改數(shù)據(jù)呢 ?(以下示例無法實(shí)現(xiàn))
refreshListData(List data){
_list = data.obs;
}
removeAll(){
_list = [].obs;
}
歡迎點(diǎn)點(diǎn)小心心哦~
