Flutter GetX 使用问题汇总

记录一下使用 Flutter GetX 过程中遇到的各种问题和解决方案

发布于  星期日，六月 9 2024

安装 GetX CLI 时报错：Failed to build get_cli:get:

具体报错信息如下：

Building package executables... (2.3s)
Failed to build get_cli:get:
.pub-cache/hosted/pub.flutter-io.cn/dcli-2.3.0/lib/src/util/wait_for_ex.dart:38:17: Error: Method not found: 'waitFor'.
    value = cli.waitFor<T>(wrapped);
                ^^^^^^^

解决方案参考：Failed to build get_cli:get #258

直接从 GitHub 上直接下载而不是去 pub 镜像（从报错信息里可以看到我用的镜像源是pub.flutter-io.cn）下载

flutter pub global activate -s git https://github.com/jonataslaw/get_cli

如何控制 Get.bottomSheet() 的 bottomSheet 弹出层的高度

使用 Get.bottomSheet(const YourModalWidget()) 可以轻松实现一个底部弹窗，还不用传递 context。

但是这种方法的 bottomSheet 弹出层默认最大的高度为手机屏幕高度的一半，如果 YourModalWidget() 的高度过高就会导致报错内容溢出。

那么如何解决呢？可以通过设置 Get.bottomSheet 函数的第二个参数的配置项 isScrollControlled: true 来解决

image.png

从上图我们可以看到 Get.bottomSheet 函数的第一个参数是要显示的 bottomsheet Widget，第二个参数是一个命名的可以参数配置项

Get.bottomSheet(
    const YourModalWidget(),
    isScrollControlled: true,
);

虽然但是配置项 isScrollControlled: true 可以解除 bottomSheet 弹出层最大高度的限制，但也会导致一个问题——bottomSheet 弹出层的高度会占满全屏，这个我们可以通过设置 Constraints(约束) 来解决。

比如设置最大高度为屏幕的 95%：

Get.bottomSheet(
     Container(
      width: double.infinity,
      // 设置 BoxConstraints.maxHeight 为屏幕的 95%
      constraints: BoxConstraints(
        maxHeight: MediaQuery.of(context).size.height * 0.95,
      ),
      padding: const EdgeInsets.all(24),
      child: YourModalWidget(),
    ),
    isScrollControlled: true,
);

如何根据 GetX 的响应式数据动态显示 Get.bottomSheet() 的 bottomSheet 弹出层内容

可以通过 GetX 的 Obx Widget 来包裹 bottomSheet 弹出层 Widget，同时把 GetX 的响应式数据当成参数传递给 bottomSheet 弹出层 Widget

这样不管 GetX 的响应式数据如何变化，Get.bottomSheet() 的 bottomSheet 弹出层总是能拿到最新的数据并渲染，如果在 Get.bottomSheet() 的 bottomSheet 弹出层 中 修改了这个响应式数据，bottomSheet 弹出层会重新渲染

Get.bottomSheet(
    Obx(() => YourModalWidget(someObsData: someObsData))
);
  • Flutter