Question

我有一个问题，我试图解决并阅读许多与之相关的答案。但是我只是不明白如何使它工作。

我想显示一个主题对象列表，它是一个异步函数，因为主题来自api调用。所有这些都创建了一个自定义的gridView，所以我很清楚我必须使用FutureBuilder，但是即使使用它，我也会收到此错误消息：

我的代码如下：

 GridView.count(
   crossAxisCount: 2,
   children: <Widget>[
      FutureBuilder<Widget>(
          future: themeColorList.buildCustomGrid(),
          builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
            if(snapshot.hasData)
                print("snapshot.data : ${snapshot.data}");
                return snapshot.data;
            return Container(child: CircularProgressIndicator());
          },
      )
   ]
 )

名为的函数

 buildCustomGrid() async {
    List<ProjectTheme> themeList = await constructTheme();

    List.generate(themes.length, (index) {
       return Container(
         child: Center(
           child: Text(themeList[index].themeName),
         ),
      color: themeList[index].themeColor,
  );
});

}

确定我错过了一些事情，我试图用“ Future List Widget”替换“ Future Widget”（因为它实际上是一个已创建的列表），但错误是相同的，只是第二部分被“ Future List”所取代小部件”。

能帮我吗？

所以我有了一些开始（不再显示错误）。我必须做这样的事情：

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
     FutureBuilder<List<Widget>>(
        future: themeColorList.buildCustomGrid(),
        builder: (BuildContext context, AsyncSnapshot<List<Widget>> snapshot){
         if(snapshot.hasData) {
            for(int i = 0; i< snapshot.data.length; i++) {
             print("snapshot.data : ${snapshot.data[i]}");
             return snapshot.data[i];
            }
          }
          return Container(child: CircularProgressIndicator());
        },
      )
    ]
)

这：

Future<List<Widget>> buildCustomGrid() async {
  List<ProjectTheme> themeList = await constructTheme();

  return List.generate(themes.length, (index) {
    return Container(
     child: Center(
        child: Text(themeList[index].themeName),
     ),
    color: themeList[index].themeColor,
  );
 });
}

当然，它只显示第一个列表元素，这也不好。必须看看如何处理。

Answer 1

我为您制作了完整的工作代码：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class ProjectTheme {
  String themeName;
  Color themeColor;

  ProjectTheme({this.themeName, this.themeColor});
}

class MyApp extends StatelessWidget {
  Future<List<ProjectTheme>> getThemes() async {
    List<ProjectTheme> themeList = [
      ProjectTheme(themeName: "red", themeColor: Colors.red),
      ProjectTheme(themeName: "green", themeColor: Colors.green),
      ProjectTheme(themeName: "blue", themeColor: Colors.blue),
    ];
    return themeList;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: FutureBuilder<List<ProjectTheme>>(
          future: getThemes(),
          builder: (BuildContext context,
              AsyncSnapshot<List<ProjectTheme>> snapshot) {
            if (snapshot.hasData)
              return GridView.count(
                crossAxisCount: 2,
                children: snapshot.data
                    .map(
                      (theme) => Container(
                        child: Center(
                          child: Text(theme.themeName),
                        ),
                        color: theme.themeColor,
                      ),
                    )
                    .toList(),
              );
            return Container(child: CircularProgressIndicator());
          },
        )),
      ),
    );
  }
}

主要是将GridView放在FutureBuilder中。我还重构了“ buildCustomGrid”方法，以使其不应该返回小部件。

希望它能提供帮助！

Answer 2

您可以尝试从构建器中删除“窗口小部件”吗？因为它可以将其视为类，并且可能是导致错误的原因

self

或使用动态代替：

ai_game

类型'Future <dynamic>'不是类型'Future <Widget>'的子类型

2 个答案: