具有动态项目的 Listview.builder

Question

我对 Flutter 还很陌生，正在尝试制作一个简单的应用程序，在其中使用 API 获取数据并尝试显示结果。

这个函数负责获取数据（这个函数工作正常，我获取数据）：

Connection connection = Connection();
  String textValue = '';
  Future<void> createlist() async {
    List<MoviesByTitle> movieTitle = [];
    String response = await connection.getMovieByTitle();
    var data = jsonDecode(response);
    var results = data['results'];
    for (int i = 0; i < results.length; i++) {
      movieTitle.add(
        MoviesByTitle(
          movieId: results[i]['id'],
          title: results[i]['original_title'],
          shortDescription: results[i]['overview'],
          year: results[i]['release_date'],
        ),
      );
    }
  }

屏幕本身来了：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Movies app"),
      ),
      body: Column(
        children: [
          TextField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Movie title',
            ),
            onSubmitted: (value) {
              textValue = value;
            },
            onChanged: (value) {
              textValue = value;
            },
          ),
          TextButton(
            onPressed: () {
              createlist();
            },
            child: Text("Press"),
          ),
          Expanded(
            child: ListView.builder(
                itemCount: 30,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        children: [
                          Text("Movie title"),
                          Text("Short decscription"),
                        ],
                      ),
                    ),
                  );
                }),
          ),
        ],
      ),
      bottomNavigationBar: BottomMenu(),
    );
  }

我想要的是：如果按下 TextButton 以在单独的卡中显示电影的数据。不知何故，我找不到一种根据 API 中的数据动态创建卡片的方法（也许我会用 Visibility 小部件包装 ListView 构建器）。

有没有办法动态改变卡片的数量及其内容？

Answer 1

您已将项目添加到列表 movieTitle.. 您可以使用它作为构建用户界面的参考.. 您可以尝试

ListView.builder(
                itemCount: movieTitle.length,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        children: [
                          Text("${movieTitle[index].title}"),
                          Text("${movieTitle[index].shortDescription}>"),
                        ],
                      ),
                    ),
                  );
                }),

此外，您可能必须将 movieTitle 变量移到 fetch api 方法之外，以便也可以从 ui 部分访问它。