flutter_在Flutter中使用SQflite的ListView – Todo应用程序

flutter

在本教程中，我们将看一下如何在Flutter中使用Sqflite创建ListView。 在上一篇有关Flutter中Sqflite的文章中，我们看到了如何使用Sqflite构建一个简单的todo应用程序。

从那时起，我收到了很多关于创建如何使用Sqflite构建列表视图的文章的要求。 因此，在本教程中，我将扩展相同的应用程序以使用sqflite数据库构建列表视图。

如果您还没有阅读过上一篇文章，我强烈建议您这样做，因为我们将以该文章本身为基础：在Flutter中使用SQLite

继续创建从以前的部分应用在这里。

我们将再添加一个屏幕以显示添加的项目列表。 可以通过顶部工具栏上的按钮进行访问。 在AppBar中创建按钮，如下所示：

 appBar: AppBar(

  title: Text(widget.title),

  actions: <Widget>[

    IconButton(

      icon: Icon(Icons.favorite),

      onPressed: null ,

    )

  ],
 )

为了添加新屏幕，首先创建一个名为favourite_screen.dart的文件，并在其中创建一个有状态的小部件：

 import 'package:flutter/material.dart' ;  FavouritesScreen class extends StatefulWidget {

  static const routeName = '/favourites' ; 
  @override

  _FavouritesScreenState createState() => _FavouritesScreenState();
 }
 _FavouritesScreenState class extends State<FavouritesScreen> {  }

现在，设置导航本身是另一篇文章，但是我们将重点放在仅使用Sqflite创建ListView上。 因此，只需在main.dart的MaterialApp小部件内设置导航，如下所示

 MyApp class extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo' ,

      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,

      ),

      home: MyHomePage(title: 'Listify' ),

      routes: {

        FavouritesScreen.routeName: (ctx) => FavouritesScreen(), // setting up routes

      },

    );

  }
 }

现在，每当用户单击顶部的“收藏夹”按钮时，我们将导航至如下所示的屏幕：

 IconButton(

  icon: Icon(Icons.favorite),

  onPressed: () =>

      Navigator.of(context).pushNamed(FavouritesScreen.routeName),
 )

现在是肉的部分。 我们必须从Sqflite数据库中获取数据并填充到列表视图中。 为了获取数据，我们将使用上一教程中的SqliteDatabaseHelper 。

获取数据的最佳位置是initState方法内部。 这是应该在绘制屏幕之前进行设置的地方。 我们将数据存储在一个名为taskList的类属性中。

 _FavouritesScreenState class extends State<FavouritesScreen> {

  List<Todo> taskList = new List(); 
  @override

  void initState() {

    super .initState(); 
    DatabaseHelper.instance.queryAllRows().then((value) {

      setState(() {

        value.forEach((element) {

          taskList.add(Todo(id: element[ 'id' ], title: element[ "title" ]));

        });

      });

    }).catchError((error) {

      print(error);

    });

  }
 ...

为了使用Sqflite创建ListView，我们将使用构建器模式。 这是我们的方法：

 @override
 Widget build(BuildContext context) {

  return Scaffold(

    appBar: AppBar(

      title: Text( "Favourites" ),

    ),

    body: Container(

      child: ListView.builder(itemBuilder: (ctx, index) {

        if (index == taskList.length) return null ;

        return ListTile(

          title: Text(taskList[index].title),

          leading: Text(taskList[index].id.toString()),

        );

      }),

    ),

  );
 }

如果列表为空，您也可以选择显示其他内容，但是在这里，我们将坚持使用非空的大小写。

让我们继续测试我们的应用程序：

就是这样了。 在flift中创建一个sqview我们的列表视图真的很容易。 如果您仍然遇到任何问题，请在下面的评论部分中告诉我

翻译自: https://www.javacodegeeks.com/2020/08/listview-using-sqflite-in-flutter-todo-application.html

flutter