我正在嘗試使用 getx 獲取 slider 圖像但出現錯誤

Question

#這是我的 model class

List<SliderModel> sliderModelFromJson(String str) => List<SliderModel>.from(json.decode(str).map((x) => SliderModel.fromJson(x)));

String sliderModelToJson(List<SliderModel> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class SliderModel {
  SliderModel({
    this.id,
    this.title,
    this.description,
    this.image,
    this.type,
    this.url,
    this.schoolid,
  });

  int id;
  String title;
  dynamic description;
  String image;
  String type;
  String url;
  String schoolid;

  factory SliderModel.fromJson(Map<String, dynamic> json) => SliderModel(
    id: json["id"],
    title: json["title"],
    description: json["description"],
    image: json["image"],
    type: json["type"],
    url: json["url"],
    schoolid: json["schoolid"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "title": title,
    "description": description,
    "image": image,
    "type": type,
    "url": url,
    "schoolid": schoolid,
  };
}

#這是我的服務 class 我稱之為 api

  static Future<List<SliderModel>> getSliderData(String id) async{
    var dio = don.Dio();
    don.Response response =await dio.get("https://shikshyasoftware.com.np/CoreApplicationandAPIService-4617993073/api/shikshyanotice?schoolid=$id") ;
    try{
      var responseData = response.data;
      if(response.statusCode==200){
        print("responseData:-${responseData}");
        return sliderModelFromJson(jsonEncode(responseData));
      }
    }catch(e){
      rethrow;
    }
  }

#這是我的 controller class

class SliderController extends GetxController{
  var isLoading = true.obs;
  var sliderData = <SliderModel>[];

  Future<void> fetchImageSilder(String id) async{
    try{
      isLoading(true);
      var slider = await Services.getSliderData(id);
      sliderData = slider;
      print(sliderData.length);
    }finally{
      isLoading(false);
    }
  }

  SliderModel findById(String id){
    return sliderData.firstWhere((e) => e.schoolid == id,orElse: ()=>null);
  }
}

#這是我的觀點，我試圖調用 controller 並像這樣加載圖像

  var isInit = true;
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    if(isInit) {
      final schoolId = ModalRoute.of(context).settings.arguments;
      Get.put(SliderController().fetchImageSilder(schoolId));
    }
    isInit = false;
    super.didChangeDependencies();
  }




 SliderController sliderData = Get.put(SliderController());
 Obx((){
                  if(sliderData.isLoading.value){
                    return Center(
                      child: LinearProgressIndicator(
                        minHeight: 95.h,
                        color: Colors.grey.shade100,
                        backgroundColor: Colors.grey.shade200,
                      ),
                    );
                  }else{
                    return SizedBox(
                      // height: MediaQuery.of(context).size.height*0.15,
                      // width: MediaQuery.of(context).size.width*0.99,
                      height: 95.h,
                      width: double.infinity,
                      child:CarouselSlider(
                        items:sliderData.sliderData.map((e) =>ClipRRect(
                          borderRadius: BorderRadius.circular(5.r),
                          child: Stack(
                            fit: StackFit.expand,
                            children: [
                              Image.network(e.image??Image.asset("icons/shik_banner_20200553123753.png"),fit: BoxFit.fill,errorBuilder:  (BuildContext context, Object exception, StackTrace stackTrace) {
                                return Image.asset("icons/shik_banner_20200553123753.png");
                              },)
                            ],
                          ),
                        ) ).toList()
                        , options: CarouselOptions(viewportFraction: 1,autoPlay: false,autoPlayAnimationDuration: const Duration(milliseconds: 800),
                      ),
                      ),
                    );
                  }

#我沒有收到任何錯誤，但我的加載屏幕繼續加載並且圖像未顯示，我將顯示此 W/Choreographer(22264)：未來幀時間為 16.052103 毫秒。 檢查圖形 HAL 是否使用正確的時基生成 vsync 時間戳。 在我的跑步中，我不知道該怎么做才能加載我的圖像需要你的幫助提前謝謝

Answer 1

嘗試使用以下代碼。 如果您的方法具有參數，我會建議使用StatefulWidget Widget 來專門調用您的方法。 initState有助於調用我們的函數。 如果您覺得這個答案有幫助，請點贊

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

    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }

class _MyHomePageState extends State<MyHomePage> {
final _sliderController= Get.put(SliderController());
 @override
 void initState() {
  super.initState();
  _sliderController.fetchImageSilder(schoolId);//Here you can pass parameters to your function
}

@override
Widget build(BuildContext context) {

  return Scaffold(
  appBar: AppBar(
   
    title: Text(widget.title),
   ),
   body: Obx((){
       if(sliderData.isLoading.value){
            return Center(
                child: LinearProgressIndicator(
                   minHeight: 95.h,
                   color: Colors.grey.shade100,
                   backgroundColor: Colors.grey.shade200,
              ),
            );
       }else{
     return Widget()// Pass your Widget
    }
  );
 }
}

// Getx Controller

class SliderController extends GetxController{
var isLoading = true.obs;
RxList<SliderModel> sliderData = [].obs; // If you are using `Obx()` then your list type should be obs 

Future<void> fetchImageSilder(String id) async{
     try{
          isLoading(true);
          var slider = await Services.getSliderData(id);
          sliderData.add(slider); // Add your data into `RxList`
          print(sliderData.length);
       }finally{
          isLoading(false);
       }
    }

  SliderModel findById(String id){
      return sliderData.firstWhere((e) => e.schoolid == id,orElse: ()=>null);
  }
}