如何将列表项显示到另一个页面

Question

从下面的代码中，当我创建用户（学生）数据时，它将显示为一个列表。每个学生信息将由 ListTile 小部件显示。当我滑动并按下 ListTile 上的已完成按钮时，我希望我的 ListTile 显示在“已完成”页面列表视图中。我目前正在使用 sqlite。我很难弄清楚这一点。

ma​​in.dart

import 'package:flutter/material.dart';
import '../database/db.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:crypto/crypto.dart';
import 'dart:convert';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return (MaterialApp(
        home: Scaffold(
      body: PageView(children: <Widget>[Home(), Completed()]),
    )));
  }
}

//Uncompleted
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        title: Text("Students"),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AddInfo()),
              ).then((value) {
                setState(() {});
              });
            },
            icon: Icon(Icons.add),
          )
        ],
      ),
      body: userInfoBuilder(context),
    );
  }

  Future<List<UserInfo>> loadUserInfo() async {
    DBHelper sd = DBHelper();
    return await sd.userInfo();
  }

  Future<void> deleteUserInfo(String id) async {
    DBHelper sd = DBHelper();
    sd.deleteUserInfo(id);
  }

  Widget userInfoBuilder(BuildContext parentContext) {
    return FutureBuilder<List<UserInfo>>(
      builder: (context, snap) {
        if (snap.data == null || snap.data.isEmpty) {
          return Container();
        }
        return ListView.builder(
          itemCount: snap.data.length,
          itemBuilder: (context, index) {
            UserInfo userInfo = snap.data[index];
            return Slidable(
              actionPane: SlidableBehindActionPane(),
              actions: <Widget>[
                IconSlideAction(
                    caption: 'delete',
                    icon: Icons.delete,
                    color: Colors.red,
                    onTap: () {
                      setState(() {
                        deleteUserInfo(userInfo.id);
                      });
                    })
              ],
              secondaryActions: <Widget>[
                IconSlideAction(
                    caption: 'completed',
                    icon: Icons.check,
                    color: Colors.green,
                    onTap: () {}),
              ],
              child: ListTile(
                title: Text(
                  userInfo.name,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                trailing: Text(
                  '${userInfo.grade}-${userInfo.classnum}-${userInfo.studentnum}',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
            );
          },
        );
      },
      future: loadUserInfo(),
    );
  }
}

//completed
class Completed extends StatefulWidget {
  @override
  _CompletedState createState() => _CompletedState();
}

class _CompletedState extends State<Completed> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        title: Text(
          "Completed",
        ),
      ),
      body: userInfoBuilder(context),
    );
  }

  Widget userInfoBuilder(BuildContext parentContext) {
    return FutureBuilder<List<UserInfo>>(
      builder: (context, snap) {
        if (snap.data == null || snap.data.isEmpty) {
          return Container();
        }
        return ListView.builder();
      },
      future: loadUserInfo(),
    );
  }

  Future<List<UserInfo>> loadUserInfo() async {
    DBHelper sd = DBHelper();
    return await sd.userInfo();
  }
}

//Add user information
class AddInfo extends StatefulWidget {
  @override
  _AddInfoState createState() => _AddInfoState();
}

class _AddInfoState extends State<AddInfo> {
  hideKeyboard() {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus) {
      currentFocus.unfocus();
    }
  }

  final formKey = GlobalKey<FormState>();
  String _grade;
  final List<String> _grades = ['1', '2', '3'];

  String name = '';
  String classNum = ' ';
  String studentNum = ' ';

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          hideKeyboard();
        },
        child: Scaffold(
          appBar: AppBar(
              leading: IconButton(
                  icon: Icon(Icons.arrow_back),
                  color: Colors.black,
                  onPressed: () {
                    Navigator.pop(context);
                    hideKeyboard();
                  })),
          body: Form(
            key: formKey,
            child: Column(
              children: <Widget>[
                usrNameField(),
                Row(
                  children: <Widget>[
                    Expanded(child: usrGradeField()),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 20.0),
                    ),
                    Expanded(child: usrClassField()),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 20.0),
                    ),
                    Expanded(child: usrNumField()),
                  ],
                ),
                submitButton()
              ],
            ),
          ),
        ));
  }

  Widget usrNameField() {
    return TextFormField(
        keyboardType: TextInputType.name,
        decoration: InputDecoration(
          labelText: 'name',
        ),
        onChanged: (String name) {
          this.name = name;
        },
        validator: (input) => input.trim().isEmpty ? 'Enter name' : null);
  }

  Widget usrGradeField() {
    return DropdownButtonFormField(
      icon: Icon(Icons.arrow_drop_down_circle),
      iconSize: 22.0,
      items: _grades.map((String grade) {
        return DropdownMenuItem(
          value: grade,
          child: Text(
            grade,
            style: TextStyle(color: Colors.black, fontSize: 18.0),
          ),
        );
      }).toList(),
      style: TextStyle(fontSize: 18.0),
      decoration: InputDecoration(
        labelText: 'Grade',
      ),
      validator: (input) => input.trim().isEmpty ? 'Enter grade.' : null,
      onChanged: (value) {
        setState(() {
          _grade = value;
        });
      },
      value: _grade,
    );
  }

  Widget usrClassField() {
    return TextFormField(
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        labelText: 'Class',
      ),
      validator: (input) => input.trim().isEmpty ? 'Enter class.' : null,
      onChanged: (String classNum) {
        this.classNum = classNum;
      },
    );
  }

  Widget usrNumField() {
    return TextFormField(
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        labelText: 'Number',
      ),
      validator: (input) => input.trim().isEmpty ? 'Enter number' : null,
      onChanged: (String studentNum) {
        this.studentNum = studentNum;
      },
    );
  }

  Widget submitButton() {
    return MaterialButton(
      color: Colors.blue,
      child: Text(
        'submit',
        style: TextStyle(color: Colors.white),
      ),
      onPressed: () {
        hideKeyboard();

        if (formKey.currentState.validate()) {
          saveDB();
          Navigator.pop(context);
        }
      },
    );
  }

  Future<void> saveDB() async {
    DBHelper sd = DBHelper();
    var fido = UserInfo(
      id: str2sha512(DateTime.now().toString()),
      name: this.name,
      grade: this._grade,
      classnum: this.classNum,
      studentnum: this.studentNum,
    );
    await sd.insertUserInfo(fido);
    print(await sd.userInfo());
  }

  String str2sha512(String text) {
    var bytes = utf8.encode(text);
    var digest = sha512.convert(bytes);
    return digest.toString();
  }
}

db.dart

import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

class UserInfo {
  final String id;
  final String name;
  final String grade;
  final String classnum;
  final String studentnum;

  UserInfo({
    this.id,
    this.name,
    this.grade,
    this.classnum,
    this.studentnum,
  });

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'grade': grade,
      'classnum': classnum,
      'studentnum': studentnum,
    };
  }

  @override
  String toString() {
    return 'userInfo{id: $id, name: $name, grade: $grade, classnum: $classnum, studentnum: $studentnum}';
  }
}

final String TableName = 'userInfo';

class DBHelper {
  var _db;

  Future<Database> get database async {
    if (_db != null) return _db;
    _db = openDatabase(
      join(await getDatabasesPath(), 'userInfo.db'),
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE userInfo(id TEXT PRIMARY KEY, name TEXT, grade TEXT, classnum TEXT, studentnum TEXT, phonenumber TEXT, status INTEGER)",
        );
      },
      version: 1,
    );
    return _db;
  }

  Future<void> insertUserInfo(UserInfo userInfo) async {
    final db = await database;

    await db.insert(
      TableName,
      userInfo.toMap(),
      conflictAlgorithm: ConflictAlgorithm.replace,
    );
  }

  Future<List<UserInfo>> userInfo() async {
    final db = await database;

    final List<Map<String, dynamic>> maps = await db.query('userInfo');

    return List.generate(maps.length, (i) {
      return UserInfo(
        id: maps[i]['id'],
        name: maps[i]['name'],
        grade: maps[i]['grade'],
        classnum: maps[i]['classnum'],
        studentnum: maps[i]['studentnum'],
      );
    });
  }

  Future<void> updateUserInfo(UserInfo userInfo) async {
    final db = await database;

    await db.update(
      TableName,
      userInfo.toMap(),
      where: "id = ?",
      whereArgs: [userInfo.id],
    );
  }

  Future<void> deleteUserInfo(String id) async {
    final db = await database;

    await db.delete(
      TableName,
      where: "id = ?",
      whereArgs: [id],
    );
  }
}

Answer 1

您可以使用 Provider 包来监听您的应用程序的更改并通知任何监听器并将此处的 UI 更新为 A link 为来自 Flutter 开发人员的示例