如何解决如何在Flutter中配置自定义Listview以及自定义可编辑子ListView？
我有一个要实现的功能，我需要配置每个包含TextField和按钮的小部件的自定义列表视图。子窗口小部件包含每个窗口小部件的列表视图，其中包含一个用于输入新课程的TextField。
以下是功能。
- 第1步是进入课程的静态字段。
- 进入课程后，单击课程字段中的“添加”按钮将添加任何主题的动态窗口小部件的ListView（父listview）。
- 加载主题小部件后，单击右侧的添加按钮需要将另一个动态小部件的子级列表视图追加到子主题的父级（子级列表视图）。
- 因此，在上图中，2、4是父级列表视图，而3、5需要是子级列表视图
以下是我的代码。
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),child: Icon(
Icons.add_box,color: isTopicCreationEnabled
? Colors.green
: Colors.blueGrey,Container(
child: Expanded(
child: getAllTopicsListView(),);
}
Widget getAllTopicsListView() {
ListView topicList = new ListView.builder(
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> {
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,boxShadow: [
BoxShadow(
color: Colors.grey[400],child: Center(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,child: Container(
child: TextField(
onChanged: (text) {
enableSubTopicCreation(text);
},hintText: "Enter the topic",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(
itemCount: newSubTopicList.length,index) {
return new ListTile(
title: new NewSubTopic(),);
},);
return subTopicList;
}
}
class NewSubTopic extends StatefulWidget {
@override
_NewSubTopicState createState() => _NewSubTopicState();
}
class _NewSubTopicState extends State<NewSubTopic> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
margin: EdgeInsets.only(top: 20,left: 50,right: 10),child: Center(
child: Container(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,hintText: "Enter the sub topic",);
}
}
这是问题
Assertion failed: file:///C:/src/flutter/packages/flutter/lib/src/rendering/sliver_multi_box_adaptor.dart:545:12
child.hasSize
is not true
任何帮助/建议将不胜感激。 预先感谢。
解决方法
您只需要收缩包装ListViews：
ListView topicList = new ListView.builder(
shrinkWrap: true,itemCount: newTopicList.length,//...
ListView subTopicList = new ListView.builder(
shrinkWrap: true,itemCount: newSubTopicList.length,ListView基本上是一个CustomScrollView，其中包含单个SliverList 其CustomScrollView.slivers属性。
如果滚动视图不收缩包装，则滚动视图将扩展到scrollDirection中允许的最大大小。如果滚动视图在scrollDirection中具有无限制的约束，则收缩包装必须为true。
您可以在ListView中进一步了解shrinkWrap和official documentaion。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。