在 Flutter 中加载数据后，条件小部件不工作或发生变化

Question

我正在使用 flutter 编写一个简单的应用程序。我遇到了需要有条件地显示小部件的情况。我正在使用 应用程序脚本 API 从 Google Sheets 获取数据。我想在加载过程中显示“正在加载...”文本，并想在完成请求后隐藏它。

如果我运行它 within/using Android Studio，则以下代码 可以正常工作 .但是，如果我构建 APK 并将其安装到我的设备上，尽管数据已加载并存储在 listResponse 中，但屏幕上只会显示“正在加载...”文本。

class HomePage extends StatefulWidget {
  const HomePage({Key? key, required this.title, required this.baseUrl}) : super(key: key);
  final String title;
  final String baseUrl;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late List listResponse = [];

  Future categories() async {
    var url = widget.baseUrl + 'categories';
    http.Response response = await http.get(Uri.parse(url));
    if(response.statusCode == 200){
      setState(() {
        listResponse = json.decode(response.body);
        print(listResponse.toString());
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TopBar(title: widget.title),
      body: listResponse.isEmpty ? Center(child: Text('Loading...')) :  Center(child: Text(listResponse.toString()))
    );
  }
}

我搜索了解决方案并在 Whosebug 上找到了一些示例。可能是什么问题，因为该应用程序正在运行ning 正如开发中预期的那样。感谢您的帮助。

Answer 1

您可以使用条件值来显示加载和结果，采用 bool isSuccess = false 并在您的 statusCode==200 setState 中使其成为 isSuccess = true

class _HomePageState extends State<HomePage> {
  late List listResponse = [];
  bool isSuccess = false;

  Future categories() async {
    var url = widget.baseUrl + 'categories';
    http.Response response = await http.get(Uri.parse(url));
    if(response.statusCode == 200){
      setState(() {
        listResponse = json.decode(response.body);
        isSuccess = true;
        print(listResponse.toString());

      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TopBar(title: widget.title),
      body: isSuccess  ? Center(child: Text('Loading...')) :  Center(child: Text(listResponse.toString()))
    );
  }

抓取数据时会正常工作。或者你也可以使用 FutureBiulder

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: categories(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Text(
              'There was an error :(',
              style: Theme.of(context).textTheme.headline,
            );
          } else if (snapshot.hasData) {
            var count = json.decode(snapshot.data).length;
            return Center(child: Text(listResponse.toString()));
          } else {
            return Center(child: Text('Loading...')) 
          }
        });
  }

在 Flutter 中加载数据后，条件小部件不工作或发生变化

Conditional widget is not working or changing after data load in Flutter

android

flutter

dart

flutter-state