关于flutter:Flutter-GetX系列教程GetViewGetWidget

49次阅读

共计 2747 个字符,预计需要花费 7 分钟才能阅读完成。

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 并应用状态治理

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"))
          ],
        ),
      ),
    );
  }
}

成果展现

GetWidget 介绍

它 “ 缓存 “ 了一个 Controller,因为_cache_,不能成为一个 “const Stateless”(因为_cache_,所以不能成为一个const Stateless)。当咱们应用 Get.create(()=>Controller()) 会在每次调用时生成一个新的Controller Get.find<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"))
          ],
        ),
      ),
    );
  }

}

成果展现

总结

在咱们平时的开发过程中基本上很少会用到GetWidget,因为咱们在大部分状况下都不须要缓存 Controller。

当咱们的页面中只依赖了一个控制器的状况话,那么应用 GetView 将是很好的抉择,因为他大大简化了咱们的代码。

正文完
 0