在ListView中，向下滚动时，会在颤动中丢失数据
在ListView中，向下滚动时，会在颤动中丢失数据
提问于 2020-09-12 11:06:37
以下是功能。
我有一个flutter中的列表视图，每个列表视图都包含一个TextField。在每个ListView项中，都有一个与另一个TextField项相关联的嵌套列表。
ListView和嵌套ListView是动态创建的。但滚动到末尾时，文本字段中的文本(父部件和子部件listview部件)将被清除，并且不会保持状态。
以下是我的代码。
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(debugShowCheckedModeBanner: false, home: NewCourse()));
}
class NewCourse extends StatefulWidget {
@override
_NewCourseState createState() => _NewCourseState();
}
class _NewCourseState extends State<NewCourse> {
bool isTagSelected = false;
bool isTopicCreationEnabled = false;
List<NewTopic> newTopicList = [];
addNewTopic() {
newTopicList.add(new NewTopic());
setState(() {});
}
enableTopicCreation(String txtTopicName) {
setState(() {
if (txtTopicName.length > 0) {
isTopicCreationEnabled = true;
} else {
isTopicCreationEnabled = false;
}
});
}
@override
Widget build(BuildContext context) {
var _createNewTopic;
if (isTopicCreationEnabled) {
_createNewTopic = () {
addNewTopic();
};
} else {
_createNewTopic = null;
}
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueGrey,
title: Text('ALL COURSES'),
centerTitle: true,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.blueGrey,
child: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
"NEW COURSE",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
fontFamily: 'CodeFont',
color: Colors.white,
),
),
),
),
),
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 20.0,
offset: Offset(0, 10),
),
],
),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 9,
child: Container(
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(8),
child: TextField(
onChanged: (text) {
enableTopicCreation(text);
},
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Course Name",
hintStyle: TextStyle(color: Colors.grey[400]),
),
),
),
),
Expanded(
flex: 3,
child: FlatButton(
onPressed: _createNewTopic,
child: Container(
padding: EdgeInsets.all(18),
margin: EdgeInsets.all(8),
child: Icon(
Icons.add_box,
color: isTopicCreationEnabled
? Colors.green
: Colors.blueGrey,
),
),
),
),
],
),
],
),
),
Container(
child: Expanded(
child: getAllTopicsListView(),
),
),
],
),
);
}
Widget getAllTopicsListView() {
ListView topicList = new ListView.builder(
shrinkWrap: true,
itemCount: newTopicList.length,
itemBuilder: (context, index) {
return new ListTile(
title: new NewTopic(),
);
});
return topicList;
}
}
class NewTopic extends StatefulWidget {
@override
_NewTopicState createState() => _NewTopicState();
}
class _NewTopicState extends State<NewTopic> {
TextEditingController _topicController;
@override
void initState() {
super.initState();
_topicController = new TextEditingController();
}
@override
void dispose() {
super.dispose();
_topicController.dispose();
}
bool isSubTopicCreationEnabled = false;
List<NewSubTopic> newSubTopicList = [];
addNewSubTopic() {
setState(() {
newSubTopicList.add(new NewSubTopic());
});
}
enableSubTopicCreation(String txtTopicName) {
setState(
() {
if (txtTopicName.length > 0) {
isSubTopicCreationEnabled = true;
} else {
isSubTopicCreationEnabled = false;
}
},
);
}
@override
Widget build(BuildContext context) {
var _createNewSubTopic;
if (isSubTopicCreationEnabled) {
_createNewSubTopic = () {
addNewSubTopic();
};
} else {
_createNewSubTopic = null;
}
return Column(
children: [
Container(
margin: EdgeInsets.only(top: 20, bottom: 20, left: 10, right: 50),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 20.0,
offset: Offset(0, 10),
),
],
),
child: Center(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 9,
child: Container(
child: TextField(
controller: _topicController,
onChanged: (text) {
enableSubTopicCreation(text);
},
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter the topic",
hintStyle: TextStyle(color: Colors.grey[400]),
),
),
),
),
Expanded(
flex: 3,
child: FlatButton(
onPressed: _createNewSubTopic,
child: Container(
child: Icon(
Icons.add_box,
color: isSubTopicCreationEnabled
? Colors.green
: Colors.blueGrey,
),
),
),
),
],
),
Row(
children: <Widget>[
Container(
child: Expanded(
//child: Text("Hi There!"),
child: getAllSubTopicsListView(),
),
),
],
),
],
),
),
),
],
);
}
Widget getAllSubTopicsListView() {
ListView subTopicList = new ListView.builder(
shrinkWrap: true,
itemCount: newSubTopicList.length,
itemBuilder: (context, index) {
return new ListTile(
title: new NewSubTopic(),
);
},
);
return subTopicList;
}
}
class NewSubTopic extends StatefulWidget {
@override
_NewSubTopicState createState() => _NewSubTopicState();
}
class _NewSubTopicState extends State<NewSubTopic> {
TextEditingController _subtopicController;
@override
void initState() {
super.initState();
_subtopicController = new TextEditingController();
}
@override
void dispose() {
super.dispose();
_subtopicController.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
margin: EdgeInsets.only(top: 20, bottom: 20, left: 50, right: 10),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 20.0,
offset: Offset(0, 10),
),
],
),
child: Center(
child: Container(
child: TextField(
controller: _subtopicController,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter the sub topic",
hintStyle: TextStyle(color: Colors.grey[400]),
),
),
),
),
),
],
);
}
}我使用了TextEditingController来维护状态，但是没有解决这个问题。
在父小部件和子小部件中TextField小部件中输入的文本将被清除。任何建议都将不胜感激，谢谢。
回答 2
Stack Overflow用户
发布于 2020-09-12 12:28:50
添加这个
class _HomeHomeMadeListState extends State<HomeHomeMadeList> with AutomaticKeepAliveClientMixin { class _HomeHomeMadeListState extends State<HomeHomeMadeList> {
@override
bool get wantKeepAlive => true;Stack Overflow用户
发布于 2021-12-20 04:20:04
我在开发我的一个应用程序时也遇到了同样的问题。
我通过将ListView替换为用SingleChildScrollView包装的Column修复了这个问题。
这是因为ListView只在屏幕上呈现可见的项目。
因此，每当您向上滚动时，子窗口小部件和其中的状态(数据)都会被销毁，并且必须重新运行应用程序才能检索状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63856438
复制相关文章
相似问题
腾讯云开发者
