乐趣区

关于flutter:在-Flutter-中探索-GetIt

jiezi

原文

https://medium.com/flutterdev…

参考

  • https://pub.dev/packages/get_it

注释

它的 Flutter 小部件是建设应用一个古代框架。这就像是一种反馈。在这里，咱们从小部件开始创立任何应用程序。屏幕中的每个组件都是一个小部件。这个小部件形容了依据他目前的配置和状态，他的前景应该是什么样的。使您的小部件不具备间接依赖关系，能够使您的代码更好地组织，更容易测试和保护。然而当初您须要一种从 UI 代码拜访这些对象的办法。当我来到 Flutter 从。小部件展现相似于它的想法和以后的设置和状态。Flutter 是一个收费的开源工具，用于开发挪动、桌面、web 应用程序，只须要一个代码库。

在本文中，咱们将用 Flutter 取得它的包装来阐明什么是 Flutter 取得它。在包的帮忙下，以及如何应用他们在您的 Flutter 应用程序。那么让咱们开始吧。

Flutter :

Flutter 是谷歌的用户界面工具包，它能够帮忙你在创纪录的工夫内为挪动设施、网络和桌面构建丑陋的、本地组合的应用程序。Flutter 提供了很棒的开发工具，具备惊人的 hot reload 性能

返回文章页面搞定它:

软件包就是这样一种简略的服务定位器，在这个服务定位器中，你有一个地方注册核心，通过注册类，咱们能够失去一个类的实例，咱们应用它来代替继承的小部件或提供者来拜访对象 Is。从你的用户界面。

服务定位器和依赖注入都是管制反转的一种模式。IOC 容许来自任何中央的申请，从注册其类类型到拜访容器。

实施方案:

第一步: 增加依赖项

将依赖项增加到 pubspec ー yaml 文件。

依赖性:

dependencies:
  get_it: ^7.2.0

第二步: 进口 

import 'package:get_it/get_it.dart';

第三步: 启用 AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

代码施行:

在解释 GetIt 之前，咱们将在上面的参考文献中给出一个在咱们的代码中应用的 GitIt 办法。

这是咱们的服务定位器。

GetIt getIt = GetIt._instance_;

接下来，咱们创立了一个名为 getappmodel 的抽象类，它扩大了 ChangeNotifier。

abstract class GetItAppModel extends ChangeNotifier {void incrementCounter();
  int get counter;
}

当初咱们曾经创立了一个名为 getappmodelimplementation 的类，它从 getappmodel 类中扩大，咱们曾经创立了 incrementCounter () 办法，该办法减少计数器值。

class GetItAppModelImplementation extends GetItAppModel {

  int _counter = 0;

  GetItAppModelImplementation() {Future.delayed(Duration(seconds: 3)).then((_) => getIt.signalReady(this));
  }

  @override
  int get counter => _counter;

  @override
  void incrementCounter() {
    _counter++;
    notifyListeners();}
}

在这之后，咱们将创立一个计数器应用程序，在这个程序中，咱们曾经在外部获取了两个文本部件，内部是 floatingActionButton，点击它将调用 getappmodel () 类，在计数器应用程序中，该值将在下面的列部件中减少，该列部件由 FutureBuilder 和 getIt.allReady () 包装，在将来的属性中定义。

FutureBuilder(future: getIt.allReady(),
    builder: (context, snapshot) {if (snapshot.hasData) {
        return Scaffold(

          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('You have pushed the button this many times:',),
                Text(getIt<GetItAppModel>().counter.toString(),
                  style: Theme._of_(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(onPressed: getIt<GetItAppModel>().incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons._add_),
          ),
        );
      } else {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [Text('Initialisation'),
            SizedBox(height: 16,),
            CircularProgressIndicator(),],
        );
      }
    })

全副代码:

import 'package:flutter/material.dart';
import 'package:flutter_getit_exm/app_model.dart';
import 'package:flutter_getit_exm/main.dart';
class GetItExm extends StatefulWidget {GetItExm({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _GetItExmState createState() => _GetItExmState();
}

class _GetItExmState extends State<GetItExm> {
  @override
  void initState() {
    getIt
        .isReady<GetItAppModel>()
        .then((_) => getIt<GetItAppModel>().addListener(update));
    super.initState();}

  @override
  void dispose() {getIt<GetItAppModel>().removeListener(update);
    super.dispose();}

  void update() => setState(() => {});

  @override
  Widget build(BuildContext context) {
    return Material(
      child: FutureBuilder(future: getIt.allReady(),
          builder: (context, snapshot) {if (snapshot.hasData) {
              return Scaffold(
                appBar: AppBar(title: Text(widget.title),
                ),
                body: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('You have pushed the button this many times:',),
                      Text(getIt<GetItAppModel>().counter.toString(),
                        style: Theme._of_(context).textTheme.headline4,
                      ),
                    ],
                  ),
                ),
                floatingActionButton: FloatingActionButton(onPressed: getIt<GetItAppModel>().incrementCounter,
                  tooltip: 'Increment',
                  child: Icon(Icons._add_),
                ),
              );
            } else {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [Text('Waiting for initialisation'),
                  SizedBox(height: 16,),
                  CircularProgressIndicator(),],
              );
            }
          }),
    );
  }
}

结语:

在本文中，我解释了 Explore GetIt In Flutter，你能够依据本人的批改和试验，这个小介绍来自 Explore GetIt In Flutter 从咱们这边的演示。

我心愿这个博客将为您提供充沛的信息，在尝试在您的 Flutter 我的项目摸索 GetIt 在 Flutter。咱们向你展现了什么是摸索和 Flutter 是在您的 Flutter 利用的工作，所以请尝试它。

© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

退出移动版