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

我這周開始學習 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;
  }
}

uj5u.com熱心網友回復：

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;
  }
}

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

uj5u.com熱心網友回復：

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

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

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

變數 currentPos 用于存盤從名為 getCurrentPosition 的異步函式獲得的值。

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

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

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

標籤：扑 镖 异步等待

上一篇：使用Streambuilder消費流的優勢

下一篇：與其他文本長度的文本間距