将表单域输入保存到 sqflite 数据库后,该条目不会显示在概览屏幕上。它确实在热重载后显示
After saving formfield input to an sqflite DB, the entry doesn't show on the overview screen. It does show after hot reload
大家好,
我是 Flutter 的新手,但渴望学习,如果能提供解决方案或建议,我将不胜感激。代码部分拼接在一起,部分是我自己的。
我正在写一本简化的日记,其中有几个标准的标准问题要填写。
基本布局
正在打开带有浮动操作按钮的屏幕以编写新条目。此页面还显示了以前的条目以及未来的 Listviewbuilder。
添加带有文本字段的输入屏幕。保存条目或编辑更新后,用户将返回到初始屏幕。但是,不会显示新条目,也不会显示对以前条目的更新,直到我点击热重载。
我的猜测(用相当有限的 - 如果我们可以称之为 - 经验)是我在状态管理方面遗漏了一些东西。代码看起来很糟糕,我想做一百万件事来让它更短、更简洁。但是,首先我想让它正常运行。
添加条目屏幕的代码:
class AddCircleScreen extends StatefulWidget {
static const routeName = '/AddCircleScreen';
final Circle circle;
const AddCircleScreen({Key key, this.circle}) : super(key: key);
@override
_AddCircleScreenState createState() => _AddCircleScreenState(circle);
}
//TODO: Refactor widgets below
class _AddCircleScreenState extends State<AddCircleScreen> {
Circle circle;
final gebeurtenisTextController = TextEditingController();
final gevoelTextController = TextEditingController();
final gedachtenTextController = TextEditingController();
final gedragTextController = TextEditingController();
final gevolgTextController = TextEditingController();
final toelichtingTextController = TextEditingController();
_AddCircleScreenState(this.circle);
@override
void initState() {
super.initState();
if (circle != null) {
gebeurtenisTextController.text = circle.gebeurtenis;
gevoelTextController.text = circle.gevoel;
gedachtenTextController.text = circle.gedachten;
gedragTextController.text = circle.gedrag;
gevolgTextController.text = circle.gevolg;
toelichtingTextController.text = circle.toelichting;
}
}
@override
void dispose() {
super.dispose();
gebeurtenisTextController.dispose();
gevoelTextController.dispose();
gedachtenTextController.dispose();
gedragTextController.dispose();
gevolgTextController.dispose();
toelichtingTextController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: (Colors.yellow[100]),
appBar: AppBar(
backgroundColor: (Colors.green[400]),
title: Center(
child: Text('Small steps...'),
),
),
body: SafeArea(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Gebeurtenis',
border: OutlineInputBorder(),
hintText: 'Beschrijf kort de situatie'),
controller: gebeurtenisTextController,
),
),
The above code times 6, for all the different textfields.
],
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Icon(Icons.check),
onPressed: () async {
_saveCircle(
gebeurtenisTextController.text,
gevoelTextController.text,
gedachtenTextController.text,
gedragTextController.text,
gevolgTextController.text,
toelichtingTextController.text,
);
setState(() {});
}),
);
}
_saveCircle(String gebeurtenis, String gevoel, String gedachten,
String gedrag, String gevolg, String toelichting) async {
if (circle == null) {
DatabaseHelper.instance.insertCircle(Circle(
gebeurtenis: gebeurtenisTextController.text,
gevoel: gevoelTextController.text,
gedachten: gedachtenTextController.text,
gedrag: gedragTextController.text,
gevolg: gevolgTextController.text,
toelichting: toelichtingTextController.text));
Navigator.pop(context);
} else {
await DatabaseHelper.instance.updateCircle(Circle(
id: circle.id,
gebeurtenis: gebeurtenis,
gevoel: gevoel,
gedachten: gedachten,
gedrag: gedrag,
gevolg: gevolg,
toelichting: toelichting));
Navigator.pop(context);
}
}
}
打开屏幕的代码:
class CircleOverviewScreen extends StatefulWidget {
@override
_CircleOverviewScreenState createState() => _CircleOverviewScreenState();
}
class _CircleOverviewScreenState extends State<CircleOverviewScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cirkels'),
),
body: FutureBuilder<List<Circle>>(
future: DatabaseHelper.instance.retrieveCircles(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(snapshot.data[index].gebeurtenis),
leading: Text(snapshot.data[index].id.toString()),
subtitle: Text(snapshot.data[index].gevolg),
onTap: () =>
_navigateToAddCircleScreen(context, snapshot.data[index]),
trailing: IconButton(
alignment: Alignment.center,
icon: Icon(Icons.delete),
onPressed: () async {
_deleteTodo(snapshot.data[index]);
setState(() {});
}),
);
},
);
} else if (snapshot.hasError) {
return Center(child: Text("Je hebt nog geen 5G'tjes opgeslagen"));
}
return Center(child: CircularProgressIndicator());
},
),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Icon(Icons.create_sharp),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => AddCircleScreen(),
),
),
),
);
}
}
_deleteTodo(Circle circle) {
DatabaseHelper.instance.deleteCircle(circle.id);
}
_navigateToAddCircleScreen(BuildContext context, Circle circle) async {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddCircleScreen(circle: circle)),
);
}
刷新屏幕的一种简单方法是调用 setState()
when the AddCircle
screen is popped. You can do this when the Future
returned by Navigator.push()
completes。
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => AddCircleScreen(),
),
).then((_) => setState(() {})),
在漫长的运行中你应该学会使用AStreamBuilder
widget and proper state management来解决这种问题。
我相信您会喜欢以这种方式使用应用程序!
大家好,
我是 Flutter 的新手,但渴望学习,如果能提供解决方案或建议,我将不胜感激。代码部分拼接在一起,部分是我自己的。
我正在写一本简化的日记,其中有几个标准的标准问题要填写。
基本布局
正在打开带有浮动操作按钮的屏幕以编写新条目。此页面还显示了以前的条目以及未来的 Listviewbuilder。
添加带有文本字段的输入屏幕。保存条目或编辑更新后,用户将返回到初始屏幕。但是,不会显示新条目,也不会显示对以前条目的更新,直到我点击热重载。
我的猜测(用相当有限的 - 如果我们可以称之为 - 经验)是我在状态管理方面遗漏了一些东西。代码看起来很糟糕,我想做一百万件事来让它更短、更简洁。但是,首先我想让它正常运行。
添加条目屏幕的代码:
class AddCircleScreen extends StatefulWidget {
static const routeName = '/AddCircleScreen';
final Circle circle;
const AddCircleScreen({Key key, this.circle}) : super(key: key);
@override
_AddCircleScreenState createState() => _AddCircleScreenState(circle);
}
//TODO: Refactor widgets below
class _AddCircleScreenState extends State<AddCircleScreen> {
Circle circle;
final gebeurtenisTextController = TextEditingController();
final gevoelTextController = TextEditingController();
final gedachtenTextController = TextEditingController();
final gedragTextController = TextEditingController();
final gevolgTextController = TextEditingController();
final toelichtingTextController = TextEditingController();
_AddCircleScreenState(this.circle);
@override
void initState() {
super.initState();
if (circle != null) {
gebeurtenisTextController.text = circle.gebeurtenis;
gevoelTextController.text = circle.gevoel;
gedachtenTextController.text = circle.gedachten;
gedragTextController.text = circle.gedrag;
gevolgTextController.text = circle.gevolg;
toelichtingTextController.text = circle.toelichting;
}
}
@override
void dispose() {
super.dispose();
gebeurtenisTextController.dispose();
gevoelTextController.dispose();
gedachtenTextController.dispose();
gedragTextController.dispose();
gevolgTextController.dispose();
toelichtingTextController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: (Colors.yellow[100]),
appBar: AppBar(
backgroundColor: (Colors.green[400]),
title: Center(
child: Text('Small steps...'),
),
),
body: SafeArea(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Gebeurtenis',
border: OutlineInputBorder(),
hintText: 'Beschrijf kort de situatie'),
controller: gebeurtenisTextController,
),
),
The above code times 6, for all the different textfields.
],
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Icon(Icons.check),
onPressed: () async {
_saveCircle(
gebeurtenisTextController.text,
gevoelTextController.text,
gedachtenTextController.text,
gedragTextController.text,
gevolgTextController.text,
toelichtingTextController.text,
);
setState(() {});
}),
);
}
_saveCircle(String gebeurtenis, String gevoel, String gedachten,
String gedrag, String gevolg, String toelichting) async {
if (circle == null) {
DatabaseHelper.instance.insertCircle(Circle(
gebeurtenis: gebeurtenisTextController.text,
gevoel: gevoelTextController.text,
gedachten: gedachtenTextController.text,
gedrag: gedragTextController.text,
gevolg: gevolgTextController.text,
toelichting: toelichtingTextController.text));
Navigator.pop(context);
} else {
await DatabaseHelper.instance.updateCircle(Circle(
id: circle.id,
gebeurtenis: gebeurtenis,
gevoel: gevoel,
gedachten: gedachten,
gedrag: gedrag,
gevolg: gevolg,
toelichting: toelichting));
Navigator.pop(context);
}
}
}
打开屏幕的代码:
class CircleOverviewScreen extends StatefulWidget {
@override
_CircleOverviewScreenState createState() => _CircleOverviewScreenState();
}
class _CircleOverviewScreenState extends State<CircleOverviewScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cirkels'),
),
body: FutureBuilder<List<Circle>>(
future: DatabaseHelper.instance.retrieveCircles(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(snapshot.data[index].gebeurtenis),
leading: Text(snapshot.data[index].id.toString()),
subtitle: Text(snapshot.data[index].gevolg),
onTap: () =>
_navigateToAddCircleScreen(context, snapshot.data[index]),
trailing: IconButton(
alignment: Alignment.center,
icon: Icon(Icons.delete),
onPressed: () async {
_deleteTodo(snapshot.data[index]);
setState(() {});
}),
);
},
);
} else if (snapshot.hasError) {
return Center(child: Text("Je hebt nog geen 5G'tjes opgeslagen"));
}
return Center(child: CircularProgressIndicator());
},
),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Icon(Icons.create_sharp),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => AddCircleScreen(),
),
),
),
);
}
}
_deleteTodo(Circle circle) {
DatabaseHelper.instance.deleteCircle(circle.id);
}
_navigateToAddCircleScreen(BuildContext context, Circle circle) async {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddCircleScreen(circle: circle)),
);
}
刷新屏幕的一种简单方法是调用 setState()
when the AddCircle
screen is popped. You can do this when the Future
returned by Navigator.push()
completes。
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => AddCircleScreen(),
),
).then((_) => setState(() {})),
在漫长的运行中你应该学会使用AStreamBuilder
widget and proper state management来解决这种问题。
我相信您会喜欢以这种方式使用应用程序!