串列視圖構建器不斷給我空-有解無憂

我有這個：

class HonPage extends StatefulWidget {
  final Status? status;

  HonPage({Key? key, this.status}) : super(key: key);

  @override
  _HonPageState createState() {
    return _HonPageState();
  }
}

class _HonPageState extends State<HonPage> {

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


  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text("${widget.status.title ?? ""}"),
          );
        }
    );
  }
}

我的結果：

NULL
NULL
NULL
NULL
NULL
NULL
NULL
NULL
NULL
NULL

無論我做什么，我似乎都無法從JSON.

JSON 和 API URL 適用于所有其他螢屏，因此不會出錯。我在這里做錯了什么？只是我創建了一個新選項卡并想顯示資訊。

編輯：在Status.dart 中，我有這個：

Status(Map<String, dynamic> json) : super(json) {
    status = json["status"];
    title = json["title"];
    ....
}

JSON：

[{"title": "NAME ME", "status": "publish"}]

uj5u.com熱心網友回復：

您應該FutureBuilder在構建 aListView以顯示 API 呼叫的結果時使用：

Widget _buildBody(BuildContext context) {
  return FutureBuilder<List<Status>>(
    future: fetchStatus(), // async API call that returns List<Status>
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasError) {
        return const Text("some error");
      }
      if (snapshot.connectionState != ConnectionState.done) {
        return const Center(child: CircularProgressIndicator());
      }
      if (!snapshot.hasData) {
        return const Text("some error");
      }
      final list = snapshot.data as List<Status>;
      return ListView.builder(
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('${list[index].title ?? ""}'),
          );
        },
      );
    },
  );
}

更新：

您必須創建以下類：

class Status {
  final String title;
  final String status;

  const Status({
    this.title = '',
    this.status = '',
  });

  factory Status.fromJson(Map<String, dynamic> json) => Status(
      title: json['title'] as String? ?? '',
      status: json['status'] as String? ?? '',
    );

  Map<String, dynamic> toJson() => <String, dynamic>{
      'title': title,
      'status': status,
    };
}

您必須撰寫fetchStatus呼叫 API 并回傳的方法List<Status>。

更新 2

return ListTile(
  title: Text('${places[index].title ?? ""}'),
  onTap: () {
    Navigator.pushNamed(
      context,
      '/detail_page',
      arguments: places[index],
    );
  },
);

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/351874.html

標籤：json 扑接口休息镖

上一篇：CORS策略已阻止從源“http://localhost:62521”訪問“localhost:3000/users”處的XMLHttpRequest

下一篇：如何使客戶端可以下載網頁的內容