Question

我正在使用Flutter应用程序，该应用程序获取用户的当前位置，但是在获取位置时，它会显示此ugly red error screen（一旦获取位置，该位置就会消失）。

相反，我想显示一个加载微调器或启动屏幕。我将问题缩小到在initState()期间调用的方法：

void _setCurrentLocation() {
  Geolocator().getCurrentPosition().then((currLoc) {
    setState(() {
      currentLocation = currLoc;
    });
  });
}

整个源文件也可以找到here on GitHub。

谢谢！

Answer 1

使用 FutureBuilder 小部件

在initState方法中调用_setCurrentLocation方法，并将其分配给一个变量，例如getLoc。

Future<Position> getLoc;

@override
void initState() {
// TODO: implement initState
getLoc = _setCurrentLocation();
super.initState();
}

使用return语句更改方法。

Future<Position> _setCurrentLocation() async {
var Location = await Geolocator().getCurrentPosition();
return Location;
}

将所有设计代码放入futurebuilder小部件中

@override
Widget build(BuildContext context) {
return FutureBuilder(
    future: getLoc,
    builder: (context, data) {
      if (data.hasData) {
        return Text(data.data.toString());
      } else {
        return Center(child: CircularProgressIndicator());
      }
    });
}

Answer 2

美国il小部件Visibility()

bool _isLoading = false;

void _setCurrentLocation() {
  _isLoading = true;

  Geolocator().getCurrentPosition().then((currLoc) {
    setState(() {
      _isLoading = false;
      currentLocation = currLoc;
    });
  });
}

 return Scaffold(
      key: scaffoldKey,
      body: Container(
        child: Visibility(
         visible: _isLoading,
          child: Stack(
           children: <Widget>[
             GoogleMap( ...

          replacement: Container(
             child: CircularProgressIndicator(),
           ),

Answer 3

最简单的方法是使用条件渲染。在_setCurrentLocation将其设置为值之前，currentLocation将为空。

class LocationDisplayPage extends StatefulWidget {
  @override
  _LocationDisplayPageState createState() => _LocationDisplayPageState();
}

class _LocationDisplayPageState extends State<LocationDisplayPage> {
  Position currentLocation;

  void _setCurrentLocation() {
    Geolocator().getCurrentPosition().then((currLoc) {
      setState(() {
        currentLocation = currLoc;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    _setCurrentLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: currentLocation == null
            ? CircularProgressIndicator()
            : WidgetToRenderLocation(),
      ),
    );
  }
}

在Flutter中获取当前位置时如何显示加载微调器？

3 个答案: