如何在 Flutter 中的文本中使用異步函數的結果？

Question

我這周開始學習 Flutter。 我正在嘗試使用 Geolocator 包獲取設備的位置，但我不習慣異步功能。 我想在 AppBar 標題的文本中使用 position.latitude。 我在代碼中寫了<位置信息在這里>以顯示正確的位置。 下面是我的代碼。

class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);

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

AppBar buildAppBar(context) {
var position = null;

getCurrentPosition().then((position) => {position = position});

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(<position information goes here>,
            style: TextStyle(fontSize: 12)),
      ],
    ));
}

Future<Position> getCurrentPosition() async {
 Position position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high);

  return position;
  }
}

Answer 1

1. 您的頁面必須是有狀態的才能更改它的狀態。 無狀態小部件是靜態的，您可以在小部件不變且用戶不與屏幕交互時使用它們。
2. 您必須調用 setState() 方法，以便您的頁面知道某些內容已更改。
3. 稍后，如果您希望改進您​​的代碼，請使用狀態管理（MobX、GetX、Cubit、RxDart）而不是 setStates。 當您使用 setState 時，widget-tree 下的所有小部件都會重新加載，因此它會消耗更多的 CPU 和 GPU。

嘗試這樣的事情：

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  var position = null;

  @override
  void initState() {
    getCurrentPosition().then((position) {
      setState(() {
        position = position;
      });
    });
    super.initState();
  }

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

  AppBar buildAppBar(context) {
    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(position ?? '', style: TextStyle(fontSize: 12)),
          ],
        ));
  }

  Future<Position> getCurrentPosition() async {
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

    return position;
  }
}

如果您有任何問題，請給我反饋。

Answer 2

我不知道你想如何使用它。 但我會根據我對問題的理解給出我的解決方案。 首先，將 StatelessWidget 更改為 StatefulWidget。

然后您可以在 HomeScreen 類中定義位置變量並將當前位置設置為。 然后將此變量作為參數發送給 buildAppbar 函數：

AppBar buildAppBar(context, dynamic currentPos){...}

變量 currentPos 用於存儲從名為 getCurrentPosition 的異步函數獲得的值。

Text 小部件僅接受 String 數據類型，因此您可以使用 currPos.toString() 方法或根據需要使用它。

要從名為 getCurrentPosition 的異步函數獲取當前位置的值，並在創建小部件時將其分配給位置變量，然后將其發送到 buildAppbar 函數，您可以在代碼中執行以下操作。

*對不起，請參閱圖像中的代碼。 我用手機寫的，因為我現在沒有膝上，當我發布答案時，代碼格式出現錯誤。 因此，我將為代碼添加屏幕截圖並將其添加到此處。