如何将StatefulWidget中定位逻辑与isLoading重构至独立LocationService类

核心思路 #

把定位相关的业务逻辑（权限申请、获取位置）抽成独立的LocationService类，这个类只负责处理定位操作，不碰任何UI状态；TestScreen组件自己维护isLoading、权限状态、位置信息这些UI相关状态，通过调用服务的异步方法，在操作开始时设isLoading=true，操作完成（成功或失败）后设isLoading=false——这是行业通用的简单直接方案。

1. 实现独立的LocationService类 #

新建location_service.dart文件，封装所有定位逻辑：

import 'package:geolocator/geolocator.dart';

class LocationService {
  // 单例模式（可选，避免重复创建实例）
  static final LocationService _instance = LocationService._internal();
  factory LocationService() => _instance;
  LocationService._internal();

  // 请求定位权限
  Future<LocationPermission> requestPermission() async {
    return await Geolocator.requestPermission();
  }

  // 获取当前高精度位置
  Future<Position> getCurrentLocation() async {
    return await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
  }

  // 可选：检查当前权限状态
  Future<LocationPermission> checkPermissionStatus() async {
    return await Geolocator.checkPermission();
  }
}

2. 重构TestScreen组件 #

删掉原组件里的定位方法，改成调用LocationService，同时自行管理isLoading状态：

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'location_service.dart';

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final LocationService _locationService = LocationService();
  bool _isLocationPermissionGranted = false;
  Position _currentPosition = const Position(
    latitude: 0,
    longitude: 0,
    accuracy: 0,
    altitude: 0,
    heading: 0,
    speed: 0,
    speedAccuracy: 0,
    timestamp: null,
  );
  bool _isLoading = false;

  Future<void> _checkLocationPermission() async {
    // 开始操作，显示加载状态
    setState(() => _isLoading = true);

    try {
      final permission = await _locationService.requestPermission();
      if (permission == LocationPermission.denied) {
        setState(() => _isLocationPermissionGranted = false);
      } else if (permission == LocationPermission.always || permission == LocationPermission.whileInUse) {
        setState(() => _isLocationPermissionGranted = true);
        // 权限通过后获取当前位置
        final position = await _locationService.getCurrentLocation();
        setState(() => _currentPosition = position);
      }
    } catch (e) {
      print("处理定位权限出错：$e");
    } finally {
      // 无论成功或失败，最终关闭加载状态
      setState(() => _isLoading = false);
    }
  }

  // 可选：单独的刷新位置方法（如果需要单独触发）
  Future<void> _refreshLocation() async {
    setState(() => _isLoading = true);
    try {
      final position = await _locationService.getCurrentLocation();
      setState(() => _currentPosition = position);
    } catch (e) {
      print("获取位置出错：$e");
    } finally {
      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Location Tracking')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              _isLocationPermissionGranted
                  ? '定位权限已授权'
                  : '定位权限未授权',
            ),
            const SizedBox(height: 20),
            Text('纬度：${_currentPosition.latitude}'),
            Text('经度：${_currentPosition.longitude}'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isLoading ? null : _checkLocationPermission,
              child: const Text('申请定位权限'),
            ),
            // 可选：添加刷新位置按钮
            // const SizedBox(height: 10),
            // ElevatedButton(
            //   onPressed: _isLoading ? null : _refreshLocation,
            //   child: const Text('刷新位置'),
            // ),
            if (_isLoading)
              const Padding(
                padding: EdgeInsets.all(20.0),
                child: CircularProgressIndicator(),
              ),
          ],
        ),
      ),
    );
  }
}

进阶方案：让服务管理加载状态（多组件共享场景） #

如果多个组件需要共用定位的加载状态，可以让LocationService用ValueNotifier暴露加载状态，组件监听即可：

修改LocationService： #

import 'package:geolocator/geolocator.dart';
import 'package:flutter/foundation.dart';

class LocationService {
  static final LocationService _instance = LocationService._internal();
  factory LocationService() => _instance;
  LocationService._internal();

  // 暴露加载状态，供组件监听
  final ValueNotifier<bool> isLoading = ValueNotifier(false);

  Future<LocationPermission> requestPermission() async {
    isLoading.value = true;
    try {
      return await Geolocator.requestPermission();
    } finally {
      isLoading.value = false;
    }
  }

  Future<Position> getCurrentLocation() async {
    isLoading.value = true;
    try {
      return await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high,
      );
    } finally {
      isLoading.value = false;
    }
  }
}

组件中使用ValueListenableBuilder： #

// 移除组件内部的_isLoading变量，修改按钮和加载指示器：
ElevatedButton(
  onPressed: _locationService.isLoading.value ? null : _checkLocationPermission,
  child: const Text('申请定位权限'),
),
// 加载指示器替换为：
ValueListenableBuilder<bool>(
  valueListenable: _locationService.isLoading,
  builder: (context, isLoading, child) {
    return isLoading
        ? const Padding(
            padding: EdgeInsets.all(20.0),
            child: CircularProgressIndicator(),
          )
        : const SizedBox();
  },
),

方案说明 #

• 基础方案逻辑简单清晰，组件完全掌控UI状态，符合关注点分离原则：服务负责业务逻辑，组件负责UI展示和状态管理，适合大多数简单场景。
• 进阶方案适合多组件共享定位加载状态的场景，减少重复代码，状态管理更集中。

内容的提问来源于stack exchange，提问作者Lucas Chae