Flutter 将循环变量合并到小部件中

Question

我想将循环变量合并到小部件中。所以我有这样的代码，但收到警报[缺少“State.build”的具体实现。]前提……数据​​已经插入DB

class Classname extends StatefulWidget {
  Classname({Key key}) : super(key: key);

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

class _ClassnameState extends State<Classname> {
  String test;
  String test2;
  String test3;

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

  void getData() async {
    String path = join(await getDatabasesPath(), 'dbname.db');

    Database database = await openDatabase(path, version: 1,
        onCreate: (Database db, int version) async {
          await db.execute(
              "CREATE TABLE tablename(id INTEGER PRIMARY KEY, test TEXT, test2 TEXT, test3 TEXT)");
        });

    List<Map> result = await database.rawQuery('SELECT * FROM tablename');

    for (Map data in result) {
      test = data['test'];
      test2 = data['test2'];
      test3 = data['test3'];

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(30),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        child: Text(
                          test,                             
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(15),
                      ),
                      Container(
                        child: Text(
                          test2
                        ),
                      ),
                    ],
                  ),
                  Container(
                    child: Text(
                      test3,                      
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
  }

我尝试了其他方法，例如，添加 List variable = [] 并使用 add 方法，但效果不佳，因为列表没有变成动态的。请告诉我该怎么做。

Answer 1

问题是您没有提供构建函数。如果您是初级程序员，则必须研究您的面向对象编程概念。在这里，我刚刚修复了您的代码。您不能在另一个函数中提供构建函数。构建函数与状态相关联。所以，state 需要定义一个名为 build 的函数。您实际上以(非常)错误的方式提供了该功能。就像您的代码对编译器没有意义一样。这是编译时错误。

就 for 循环合并而言，您只需要使用 List.generate 或您想要的任何其他方法(如函数或循环)根据数据生成列表。查看您的代码似乎不会获得太多细节。但是Enjoy下面的代码就可以了

class Classname extends StatefulWidget {
  Classname({Key key}) : super(key: key);

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

class _ClassnameState extends State<Classname> {
  String test;
  String test2;
  String test3;

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

  Future<List<Map>> getData() async {
    String path = join(await getDatabasesPath(), 'dbname.db');

    Database database = await openDatabase(path, version: 1,
        onCreate: (Database db, int version) async {
      await db.execute(
          "CREATE TABLE tablename(id INTEGER PRIMARY KEY, test TEXT, test2 TEXT, test3 TEXT)");
    });

    List<Map> result = await database.rawQuery('SELECT * FROM tablename');
    return result;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: FutureBuilder<List<Map>>(
          future: getData(),
          builder: (context, result) {
            if (result.connectionState == ConnectionState.waiting) {
              return Center(
                  child:
                      CircularProgressIndicator()); //while you are calculating your data show the loading.
            }
            if (!result.hasData) {
              return Center(
                  child: Text(
                      "No Data")); //if there is no data available show the No data message.
            }
            //otherwise we will have some data
            return SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.all(30),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: List.generate(result.data.length, (index) {
                      var data = result.data[index];
                      test = data['test'];
                      test2 = data['test2'];
                      test3 = data['test3'];
                      return Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                child: Text(
                                  test,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.all(15),
                              ),
                              Container(
                                child: Text(test2),
                              ),
                            ],
                          ),
                          Container(
                            child: Text(
                              test3,
                            ),
                          ),
                        ],
                      );
                    })),
              ),
            );
          }),
    );
  }
}