GetView介紹

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

視頻教程地址

零基礎視頻教程地址

GetView如何使用

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

第一步：應用程序入口配置

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("點我加1"))
         ],
       ),
     ),
   );
 }
}

效果展示

image

GetWidget介紹

它 “緩存 “了一個Controller，由于cache，不能成為一個 “const Stateless”（因為cache，所以不能成為一個const Stateless）。當我們使用Get.create(()=>Controller())會在每次調用時生成一個新的ControllerGet.find<controller style="box-sizing: border-box;">()`</controller>

GetWidget如何使用

第一步：應用程序入口設置

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("點我加1"))
          ],
        ),
      ),
    );
  }

}

效果展示

image

總結

在我們平時的開發(fā)過程中基本上很少會用到GetWidget，因為我們在大部分情況下都不需要緩存Controller。

當我們的頁面中只依賴了一個控制器的情況話，那么使用GetView將是很好的選擇，因為他大大簡化了我們的代碼。

參考:

https://liujunmin.com/flutter/getx/getx_getview_getwidget.html