Flutter GetX：在 WebView 中使用 updateLoading() 时 Obx 不更新

Question

我使用 Flutter 和 GetX 进行状态管理。我在 Stack 中有一个 WebView，我想在加载 WebView 时显示 CircularProgressIndicator。然而，Obx 小部件似乎对加载状态下的更新没有反应。

这是我的代码的相关部分：

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late InAppWebViewController webViewController;
  final WebController _controller = Get.put(WebController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarWidget(),
      endDrawer: Drawer(),
      body: _buildMobileWebView(),
    );
  }

  Widget _buildMobileWebView() {
    return Stack(
      children: [
        VerticalSpacing(10),
        InAppWebView(
          initialUrlRequest: URLRequest(
              url: WebUri(_controller.currentUrl.string)), // Initial URL
          initialSettings: InAppWebViewSettings(
            javaScriptEnabled: true,
            useShouldOverrideUrlLoading: true,
            mediaPlaybackRequiresUserGesture: false,
          ),
          onWebViewCreated: (InAppWebViewController controller) {
            webViewController = controller;
          },
          onLoadStart: (controller, url) {
            _controller.updateLoading(true); // Start loading
            _controller.updateUrl(url.toString());
            // Update URL
          },
          onLoadStop: (controller, url) async {
            _controller.updateLoading(false); // Stop loading
            _controller.updateUrl(url?.toString() ?? ''); // Update URL
          },
          onProgressChanged: (controller, progress) {
            if (progress < 100) {
              _controller
                  .updateLoading(true); // Show loading until it's complete
            } else {
              _controller.updateLoading(false); // Stop loading at 100%
            }
          },
        ),
        Obx(() {
          return _controller.isLoading.value
              ? Center(child: CircularProgressIndicator())
              : SizedBox.shrink();
        }),
      ],
    );
  }
}

class WebController extends GetxController {
  var isLoading = true.obs;
  var currentUrl = 'https://mpfsts.mp.gov.in/'.obs;

  void updateLoading(bool loading) {
    print('Loading state updated: $loading');
    isLoading.value = loading;
  }

  void updateUrl(String url) {
    currentUrl.value = url;
    print("Susheel: ${currentUrl.value}");
  }
}

问题： 在 WebView 加载事件期间调用 _controller.updateLoading(true/false) 时，Obx 小部件似乎不会对 isLoading 可观察到的更改做出反应。 CircularProgressIndicator 未按预期显示。

我尝试过的： 检查 isLoading 状态是否使用 print 语句正确更新。 确保 Get.put(WebController()) 仅初始化一次。 已验证 Obx 是否正确侦听 isLoading.value。 问题： 我在这里缺少什么？为什么 Obx 小部件在通过 updateLoading() 更新时没有反映加载状态的变化？

Answer 1

虽然我无法确定您的代码中导致错误行为的具体问题，但您的设计有两个巨大的错误。

1. 您正在使用有状态的小部件。 GetX 最大的优点之一是它允许我们完全避免 StatefulWidgets。

2. 您不使用 Binding 来实例化 GetxController。

遵循这些指南，GetX 将使您在余下的开发者生活中感到快乐。