在列表视图构建器中显示项目列表

Question

我试图在 ListView 中展示医生的所有专业，但遇到了我在下面提到的错误：

Error: Expected a value of type 'FutureOr<List<String>>', but got one of type 'List<dynamic>'
    at Object.throw_ [as throw] (http://localhost:64672/dart_sdk.js:5333:11)
    at Object.castError (http://localhost:64672/dart_sdk.js:5304:15)
    at Object.cast [as as] (http://localhost:64672/dart_sdk.js:5620:17)
    at dart.LegacyType.new.as (http://localhost:64672/dart_sdk.js:7218:60)
    at fetchSpecilization (http://localhost:64672/packages/newfypapproach/patient/screens/patientForgotPassword.dart.lib.js:13314:46)
    at fetchSpecilization.next (<anonymous>)
    at http://localhost:64672/dart_sdk.js:39031:33
    at _RootZone.runUnary (http://localhost:64672/dart_sdk.js:38888:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:64672/dart_sdk.js:33874:29)
    at handleValueCallback (http://localhost:64672/dart_sdk.js:34434:49)
    at Function._propagateToListeners (http://localhost:64672/dart_sdk.js:34472:17)
    at _Future.new.[_completeWithValue] (http://localhost:64672/dart_sdk.js:34314:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:64672/dart_sdk.js:34337:35)
    at Object._microtaskLoop (http://localhost:64672/dart_sdk.js:39175:13)
    at _startMicrotaskLoop (http://localhost:64672/dart_sdk.js:39181:13)
    at http://localhost:64672/dart_sdk.js:34688:9

我的 Future 函数和有状态类的代码是：

class bookAppointment extends StatefulWidget {
  String ppatientid;
  //String gender_name;
  bookAppointment({this.ppatientid});

  // const bookAppointment({ Key? key }) : super(key: key);

  @override
  _bookAppointmentState createState() => _bookAppointmentState();
}

class _bookAppointmentState extends State<bookAppointment> {

  // List<Specilization> _specilization = [];
  List _specilization = [];

  Future<List<String>> fetchSpecilization() async {
    var url = baseurl + showSpecilization;
    print('Calling uri: $url');
    http.Response response = await http.get(url);
    // List<Specilization> specilizations = [];

    // var specilize = specilizations; 
    List specilize = [];
    if (response.statusCode == 200){
       var data = response.body;
       Map<String, dynamic> user = jsonDecode(data);
       var user_list = user['message'];
       
       print(user_list);
       for (var specilizationList in user_list){
         for(var specilizeList in specilizationList){
         print(specilizeList);
      //   specilize.add(Specilization.fromJson(specilizationList));
         specilize.add(specilizeList);
         
         }
       }

    }
    print(specilize);
    return specilize; 
  }

这是我在 Specilization.dart 文件中的类，我在上面的未来函数中使用了 Specilization.fromJson 文件

class Specilization{

  String specilization; 
  Specilization(this.specilization);

Specilization.fromJson(String specilizationDoctor) {
    specilization = specilizationDoctor;
  }
}

剩余的有状态类代码

 @override
  void initState() {
    fetchSpecilization().then((value){
      setState(() {
              _specilization.addAll(value);
            });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Specilization"),),
        body: ListView.builder(itemBuilder: (context, index){
          return Card(
            child: Padding(
              padding: const EdgeInsets.only(top: 32.0, bottom: 32.0, left: 16.0, right: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(_specilization[index].specilization,
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold
                  ),
                  ), 
                  
                ],
              ),
            ),

          );
        },
        itemCount: _specilization.length,
        ),
    );
    


  }
}

来自 api 的数据的响应是：

{"message":[["Dentist"],["General Physician"],["Skin Doctor"],["Dermatologist"]],"status":200}

Future 函数以这种形式显示列表： [[牙医]、[全科医生]、[皮肤科医生]、[皮肤科医生]] 牙医 全科医生 皮肤医生 皮肤科医生 返回列表专业：[牙医、全科医生、皮肤科医生、皮肤科医生]

Answer 1

而不是由你自己来管理你的未来。您可以使用 future builder 来处理您未来的状态，如下所示。

 @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Specilization"),),
        
        body: FutureBuilder<List>(future:  fetchSpecilization(),
builder: (context , snapshot) {
       if(snapshot.hasError) {return Center(child: Text("Error Screen")); //replace with your error Widget or Error handling}
       if (snpashot.hasData) {
          return ListView.builder(itemBuilder: (context, index){
          return Card(
            child: Padding(
              padding: const EdgeInsets.only(top: 32.0, bottom: 32.0, left: 16.0, right: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(snapshot.data[index].specilization,
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold
                  ),
                  ), 
                  
                ],
              ),
            ),

          );
        },
        itemCount: snapshot.data.length,
        );
        return CircularProgressIndicator();
    }
)
    
)

  }
}

感谢您的解决方案。我应用这种方式来纠正我的未来函数的返回类型

  Future<List<dynamic>> fetchSpecilization() async {
    var url = baseurl + showSpecilization;
    print('Calling uri: $url');
    http.Response response = await http.get(url);
    // List<Specilization> specilizations = [];

    // var specilize = specilizations; 
    List specilize = [];
    if (response.statusCode == 200){
       var data = response.body;
       print(data);
       Map<String, dynamic> user = jsonDecode(data);
       var user_list = user['message'];
       
       print(user_list);
       for (var specilizationList in user_list){
         for(var specilizeList in specilizationList){
         print(specilizeList);
      //   specilize.add(Specilization.fromJson(specilizationList));
         specilize.add(specilizeList);
         
         }
       }

    }
    print(specilize);
    return specilize; 
  }

然后改写我的有状态类代码

 Widget build(BuildContext context) {
return FutureBuilder<List>(
      future:  fetchSpecilization(),
      // ignore: missing_return
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Scaffold(
            appBar: AppBar(title: Text("Specilization"),),
            body: ListView.builder(
            itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: (){
                Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Specilizations(
                                    docSpecilizations: snapshot.data[index],)));
                      },
              
              child: Card(
                elevation: 10,
                child: Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
                  child: Text(
                    snapshot.data[index],
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),
            );
          })
          );
        }
        else{
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}