Flutter如何将async异步函数（如Geolocator定位）结果用于Text组件展示？

核心问题原因 #

• 你当前使用的StatelessWidget是无状态组件，无法在异步数据返回后触发UI刷新
• getCurrentPosition()是异步函数，then回调执行时buildAppBar已经完成AppBar的构建，赋值的position不会生效
• 待修改的Text组件被const修饰，无法传入动态变量

修改方案 #

你需要将组件改为StatefulWidget，在组件初始化时触发位置获取，拿到位置后通过setState更新UI：

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

// 改为StatefulWidget支持状态更新
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 存储位置信息，初始为null
  Position? _currentPosition;
  // 存储错误提示用于异常场景展示
  String? _errorMsg;

  @override
  void initState() {
    super.initState();
    // 组件初始化时触发位置获取
    _getCurrentPosition();
  }

  Future<void> _getCurrentPosition() async {
    try {
      // 先校验位置服务和权限，避免崩溃
      bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
      if (!serviceEnabled) {
        setState(() {
          _errorMsg = "位置服务未开启";
        });
        return;
      }

      LocationPermission permission = await Geolocator.checkPermission();
      if (permission == LocationPermission.denied) {
        permission = await Geolocator.requestPermission();
        if (permission == LocationPermission.denied) {
          setState(() {
            _errorMsg = "位置权限被拒绝";
          });
          return;
        }
      }
      
      if (permission == LocationPermission.deniedForever) {
        setState(() {
          _errorMsg = "位置权限被永久拒绝，请在设置中开启";
        });
        return;
      } 

      // 拿到位置后更新状态触发UI刷新
      Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high
      );
      setState(() {
        _currentPosition = position;
        _errorMsg = null;
      });
    } catch (e) {
      setState(() {
        _errorMsg = "获取位置失败";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(context),
    );
  }

  AppBar buildAppBar(BuildContext context) {
    // 确定AppBar标题显示内容
    String titleText;
    if (_errorMsg != null) {
      titleText = _errorMsg!;
    } else if (_currentPosition != null) {
      // 直接取纬度，保留2位小数更友好，可按需调整格式
      titleText = _currentPosition!.latitude.toStringAsFixed(2);
    } else {
      titleText = "获取位置中...";
    }

    return AppBar(
      centerTitle: true,
      backgroundColor: kPrimaryColor,
      elevation: 0,
      toolbarHeight: MediaQuery.of(context).size.height * 0.07,
      title: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: const Icon(Icons.place),
            iconSize: 15,
            onPressed: () {},
          ),
          // 去掉const修饰，传入动态文本
          Text(titleText, style: const TextStyle(fontSize: 12)),
        ],
      )
    );
  }
}

注意事项 #

使用Geolocator前需要提前配置平台权限：

• Android端：在android/app/src/main/AndroidManifest.xml的manifest标签下添加权限声明

  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  

• iOS端：在ios/Runner/Info.plist的dict标签下添加权限描述

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>需要获取您的位置来展示位置信息</string>
  

内容的提问来源于stack exchange，提问作者Gustavo B.