簡體   English   中英

如何在顫振中實現刷新指示器

[英]how to implement refresh indicator in flutter

''' 我想實現刷新指示器以從 Api(Json) 重新加載數據。 下面的代碼運行良好,但下拉刷新不起作用。 我嘗試使用 initState 獲取數據,然后使用 future builder 查看數據。 我怎樣才能實現刷新指示器來重新加載數據。 我的代碼中缺少什么?

import 'package:flutter/material.dart';
import '../networkhelper/property.dart';
import '../widgets/recommended.dart';
import '../model/property.dart';
import '../shimmer/recommended.dart';
import '../widgets/home_top.dart';

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

  @override
  State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
  late Future<List<PropertyModel>> _propertyData;
  @override
  void initState() {
    _propertyData = PropertyApi.getProperty();
    super.initState();
  }
  Future<void> _refreshData() async {
    setState(() {
      _propertyData = PropertyApi.getProperty();
    });
    await _propertyData;
  }
  @override
  Widget build(BuildContext context) {
    Size _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.blue,
      body: RefreshIndicator(
        onRefresh: () => _refreshData(),
        child: ListView(children: [
          HomeTopView(),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8),
                topRight: Radius.circular(8),
              ),
            ),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: _screenSize.height * 0.02),
                  Padding(
                    padding: EdgeInsets.only(left: _screenSize.width * 0.04),
                    child: Text(
                      "Recommanded",
                      style: TextStyle(
                        fontSize: _screenSize.width * 0.055,
                        color: Colors.blue,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  SizedBox(height: _screenSize.height * 0.01),
                  SizedBox(
                    height: _screenSize.height * 0.3,
                    child: FutureBuilder<List<PropertyModel>>(
                      future: _propertyData,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          List<PropertyModel>? data = snapshot.data;
                          return ListView.builder(
                            shrinkWrap: true,
                            padding: EdgeInsets.only(
                                left: _screenSize.width * 0.015),
                            scrollDirection: Axis.horizontal,
                            physics: const BouncingScrollPhysics(),
                            itemCount: data!.length,
                            itemBuilder: (context, index) {
                              return RecommendedItems(
                                id: data[index].id,
                                propertyName: data[index].name,
                                price: data[index].price,
                                imgUrl: data[index].img[2],
                                bedRoomQuantity: data[index].details.bedroom,
                                bathRoomQuantity: data[index].details.bathroom,
                                propertyArea: data[index].details.area,
                                address: data[index].address.city,
                                propertyType: data[index].details.propertytype,
                              );
                            },
                          );
                        } else if (snapshot.hasError) {
                          return Center(
                            child:
                                Text("Please Check Your Internet Connection"),
                          );
                        }
                        // By default show a loading spinner.
                        return ListView.builder(
                            itemCount: 4,
                            shrinkWrap: true,
                            padding: const EdgeInsets.only(left: 10),
                            scrollDirection: Axis.horizontal,
                            physics: const BouncingScrollPhysics(),
                            itemBuilder: (ctx, index) {
                              return RecommendedShimmer();
                            });
                      },
                    ),
                  ),
                ]),
          ),
          // ),
        ]),
      ),
    );
  }
}

'''

嘗試將您的setState()方法更改為:

setState(() async {
  _propertyData = await PropertyApi.getProperty();
});

嘗試這個 :

Future<void> _refreshData() async {
    _propertyData = PropertyApi.getProperty();
    setState(() {});
    return;
}

此代碼運行順利。

Future<void> _refreshData() async {
  
    _propertyData = PropertyApi.getProperty();
    await _propertyData;
  
    setState(() {});
  }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM