GetView介紹

GetView只是對(duì)已注冊(cè)的Controller有一個(gè)名為controller的getter的const Stateless的Widget，如果我們只有單個(gè)控制器作為依賴項(xiàng)，那我們就可以使用GetView，而不是使用StatelessWidget，并且避免了寫(xiě)Get.Find()。

視頻教程地址

零基礎(chǔ)視頻教程地址

GetView如何使用

GetView的使用方法非常簡(jiǎn)單，只是要將你的視圖層繼承自GetView并傳入需要注冊(cè)的控制器并Get.put()即可，我們來(lái)看下代碼演示：

第一步：應(yīng)用程序入口配置

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetViewAndGetWidgetExample/GetViewAndGetWidgetExample.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: GetViewAndGetWidgetExample(),
    );
  }
}

第二步：繼承自GetView并使用狀態(tài)管理

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetViewAndGetWidgetExample/GetViewCountController.dart';
import 'package:get/get.dart';

class GetViewAndGetWidgetExample extends GetView<GetViewCountController> {

  @override
  Widget build(BuildContext context) {

    Get.put(GetViewCountController());
    // Get.create(() => GetViewCountController());

    return Scaffold(
      appBar: AppBar(
        title: Text("GetX GetView"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text(
              "count的值為:  ${controller?.count}",
              style: TextStyle(
                color: Colors.red,
                fontSize: 30
              ),
            )),
            SizedBox(height: 20,),
            ElevatedButton(
                onPressed: () {
                  controller.increment();
                },
                child: Text("點(diǎn)我加1"))
          ],
        ),
      ),
    );
  }
}

效果展示

image

GetWidget介紹

它 "緩存 "了一個(gè)Controller，由于cache，不能成為一個(gè) "const Stateless"（因?yàn)?em>cache，所以不能成為一個(gè)const Stateless）。當(dāng)我們使用Get.create(()=>Controller())會(huì)在每次調(diào)用時(shí)生成一個(gè)新的ControllerGet.find<Controller>()`

GetWidget如何使用

第一步：應(yīng)用程序入口設(shè)置

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetViewAndGetWidgetExample/GetViewAndGetWidgetExample.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: GetViewAndGetWidgetExample(),
    );
  }
}

第二步：繼承自GetWidget并使用

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetViewAndGetWidgetExample/GetViewCountController.dart';
import 'package:get/get.dart';

class GetViewAndGetWidgetExample extends GetWidget<GetViewCountController> {

  @override
  Widget build(BuildContext context) {

    // Get.put(GetViewCountController());
    Get.create(() => GetViewCountController());

    return Scaffold(
      appBar: AppBar(
        title: Text("GetX GetView"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text(
              "count的值為:  ${controller?.count}",
              style: TextStyle(
                color: Colors.red,
                fontSize: 30
              ),
            )),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                controller.increment();
              },
              child: Text("點(diǎn)我加1"))
          ],
        ),
      ),
    );
  }

}

效果展示

image

總結(jié)

在我們平時(shí)的開(kāi)發(fā)過(guò)程中基本上很少會(huì)用到GetWidget，因?yàn)槲覀冊(cè)诖蟛糠智闆r下都不需要緩存Controller。

當(dāng)我們的頁(yè)面中只依賴了一個(gè)控制器的情況話，那么使用GetView將是很好的選擇，因?yàn)樗蟠蠛?jiǎn)化了我們的代碼。