Flutter 如何在可扩展列表视图的扩展部分添加常规列表视图
我有以下问题,我想将常规列表视图添加到可扩展列表视图的扩展部分,我已尝试使用以下代码执行此操作:Flutter 如何在可扩展列表视图的扩展部分添加常规列表视图,flutter,flutter-layout,Flutter,Flutter Layout,我有以下问题,我想将常规列表视图添加到可扩展列表视图的扩展部分,我已尝试使用以下代码执行此操作: body: ListTile( leading: Checkbox( value: info.completed, onChanged: (value) { setState(() { // Here you toggle the che
body: ListTile(
leading: Checkbox(
value: info.completed,
onChanged: (value) {
setState(() {
// Here you toggle the checked item state
infos.firstWhere((currentInfo) => info == currentInfo)
..completed = value;
});
}),
title: ListView.builder(
itemCount: info.expandedValueData.length ,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(info.expandedValueData[index].title,
style: TextStyle(
decoration: info.completed
? TextDecoration.lineThrough
: null))),
);
},),
subtitle: Text(
"Drücke auf den Mülleimer, um diesen Abschnitt bis zum Neustart der App zu löschen"),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() {
infos.removeWhere((currentInfo) => info == currentInfo);
});
},
)),
这样我就不会有任何错误,但是如果我打开一个列表平铺,它不会描述我想要的数据,它只是空的,这里有一张图片:
任何关于我做错了什么的建议&我如何纠正
编辑:这或多或少是基本代码,我找到了部分问题的解决方案(第62行),您将看到是否测试列表中描述的代码,但不管怎样,我得到了一个render Flex溢出,并且可勾选框不会放在可扩展部分中每个文本块的旁边
这里是完整的代码(添加了可能更多的数据)
导入“包装:颤振/材料.省道”;
void main(){
runApp(MyApp());
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
),
家:脚手架(
正文:扩展文件(
标题:文本(“Generelles Vorgehen”),
子项:[扩展列表()],
),
),
);
}
}
类ExpansionList扩展StatefulWidget{
最终信息;
常量扩展列表({
关键点,
这个.info,
}):super(key:key);
@凌驾
_ExpansionListState createState()=>\u ExpansionListState();
}
类_ExpansionListState扩展状态{
小部件_buildListPanel(){
返回ExpansionPanelist(
expansionCallback:(int索引,bool扩展){
设置状态(){
infos[index].isExpanded=!isExpanded;
});
},
子项:infos.map((Info){
返回扩展面板(
headerBuilder:(BuildContext上下文,bool isExpanded){
返回列表块(
标题:文本(信息标题值),
);
},
正文:ListTile(
前导:复选框(
值:info.completed,
一旦更改:(值){
设置状态(){
//在这里,您可以切换选中的项目状态
infos.firstWhere((currentInfo)=>info==currentInfo)
..完成=价值;
});
}),
标题:SizedBox(
高度:200,//这是解决方案,我不知道为什么,但您必须在此处指定高度,以便内容得到whon
子项:ListView.builder(
itemCount:info.expandedValueData.length,
itemBuilder:(上下文,索引){
回程卡(
孩子:ListTile(
标题:文本(info.expandedValueData[index]。标题,
样式:TextStyle(
装修:信息已完成
?text.lineThrough
:null)),
);
},
),
),
字幕:文本(
“Mülleimer博士,嗯,我的名字叫Abschnitt bis zum Neustart der App zu löschen”),
尾随:图标按钮(
图标:图标(Icons.delete),
已按下:(){
设置状态(){
infos.removeWhere((currentInfo)=>info==currentInfo);
});
},
)),
iExpanded:info.iExpanded);
}).toList(),
);
}
@凌驾
小部件构建(构建上下文){
返回SingleChildScrollView(
子:容器(
子项:_buildListPanel(),
),
);
}
}
类扩展值{
最终int id;
最后的字符串标题;
常数扩展值({
这个身份证,
这个名字,
});
}
班级信息{
字符串头值;
布尔展开;
布尔完成;
最终列表扩展值数据;
信息(
{this.headerValue,
this.isExpanded=false,
this.completed=false,
此参数为.expandedValueData});
}
列表信息=[
信息(
headerValue:“Außenasicht”,
expandedValueData:[
expandedValue(id:1,标题:“Roststellen”),
扩展值(
id:2,
标题:
“Farbunterschiede im Lack,unrelmäßigkeiten[Problemstellenübermalt]”,
扩展值(
id:3,
标题:“kleine Kratzer[腹地卡洛塞里·格里尔·福尔格什登]”,
扩展值(
id:4,标题:“Dichtungen an Scheiben&Türen[porös,rissig]”,
扩展值(
id:5,
标题:
“沃拉勒姆·温德楚茨基·奥夫·克拉泽·乌特斯切恩[Gefahr gröerer Rissbildung]”,
扩展值(
id:6,
标题:
“Lampen untersuchen,funktionsfähig?Innen beschlagene Scheinwerfer[Gefahr durch Wasserschaden]”,
expandedValue(id:7,标题:“Reifen[Risse o.abgefahrenes Profil?]”,
],
),
信息(
headerValue:“Innenraum”,
expandedValueData:[
扩展值(
id:1,
标题:“你是谁?”,
expandedValue(id:2,标题:“funktionierende Elektrik”),
expandedValue(id:3,标题:“Sitze”),
expandedValue(id:4,标题:“剩余”),
],
),
信息(
headerValue:“Motorraum”,
expandedValueData:[
扩展值(
id:1,
标题:
“沃姆格劳芬汽车厂?【事件解决方案启动问题】”,
扩展值(
id:2,
标题:“Batteriepole angerostet?[Gefahr vorzeitiger Entladung]”,
扩展值(
id:3,标题:“Gibt esÖl Order Bremsflüssigkeitsspuren an:”,
扩展值(
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: ExpansionTile(
title: Text("Generelles Vorgehen"),
children: [ExpansionList()],
),
),
);
}
}
class ExpansionList extends StatefulWidget {
final Info info;
const ExpansionList({
Key key,
this.info,
}) : super(key: key);
@override
_ExpansionListState createState() => _ExpansionListState();
}
class _ExpansionListState extends State<ExpansionList> {
Widget _buildListPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
infos[index].isExpanded = !isExpanded;
});
},
children: infos.map<ExpansionPanel>((Info info) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(info.headerValue),
);
},
body: ListTile(
leading: Checkbox(
value: info.completed,
onChanged: (value) {
setState(() {
// Here you toggle the checked item state
infos.firstWhere((currentInfo) => info == currentInfo)
..completed = value;
});
}),
title: SizedBox(
height: 200, //this was the solution I dont know why, but you have to specify a hight here, so that the content gets whon
child: ListView.builder(
itemCount: info.expandedValueData.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(info.expandedValueData[index].title,
style: TextStyle(
decoration: info.completed
? TextDecoration.lineThrough
: null))),
);
},
),
),
subtitle: Text(
"Drücke auf den Mülleimer, um diesen Abschnitt bis zum Neustart der App zu löschen"),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() {
infos.removeWhere((currentInfo) => info == currentInfo);
});
},
)),
isExpanded: info.isExpanded);
}).toList(),
);
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildListPanel(),
),
);
}
}
class expandedValue{
final int id;
final String title;
const expandedValue({
this.id,
this.title,
});
}
class Info {
String headerValue;
bool isExpanded;
bool completed;
final List<expandedValue> expandedValueData;
Info(
{this.headerValue,
this.isExpanded = false,
this.completed = false,
this.expandedValueData});
}
List<Info> infos = [
Info(
headerValue: "Außenansicht",
expandedValueData: <expandedValue>[
expandedValue(id: 1, title: "Roststellen"),
expandedValue(
id: 2,
title:
"Farbunterschiede im Lack, Unregelmäßigkeiten [Problemstellen übermalt]"),
expandedValue(
id: 3,
title: "kleine Kratzer [hinter Karosserie größere Folgeschäden?]"),
expandedValue(
id: 4, title: "Dichtungen an Scheiben & Türen [porös, rissig]"),
expandedValue(
id: 5,
title:
"Vorallem Windschutzscheibe auf Kratzer untersuchen [Gefahr größerer Rissbildung ]"),
expandedValue(
id: 6,
title:
"Lampen untersuchen, funktionsfähig? Innen beschlagene Scheinwerfer [Gefahr durch Wasserschaden]"),
expandedValue(id: 7, title: "Reifen [Risse o. abgefahrenes Profil?]"),
],
),
Info(
headerValue: "Innenraum",
expandedValueData: <expandedValue>[
expandedValue(
id: 1,
title: "klappern Türen oder deren Seitenverkleidung beim Schließen?"),
expandedValue(id: 2, title: "funktionierende Elektrik"),
expandedValue(id: 3, title: "Sitze"),
expandedValue(id: 4, title: "Rest"),
],
),
Info(
headerValue: "Motorraum",
expandedValueData: <expandedValue>[
expandedValue(
id: 1,
title:
"Motor schon vom Verkäufer warmgelaufen? [eventuell sollen Startprobleme vertuscht werden]"),
expandedValue(
id: 2,
title: "Batteriepole angerostet? [Gefahr vorzeitiger Entladung]"),
expandedValue(
id: 3, title: "Gibt es Öl oder Bremsflüssigkeitsspuren an:"),
expandedValue(
id: 4,
title:
"Sprudelt Kühlswasser bei laufendem Motor [eventuell Zylinderkopfdichtung defekt]"),
expandedValue(id: 5, title: "Ölstand prüfen"),
],
),
Info(
headerValue: "Unterboden",
expandedValueData: <expandedValue>[
expandedValue(id: 1, title: "Roststellen?"),
expandedValue(
id: 2,
title:
"neuer Unterbodenschutz? [möglicher Versuch Problemstellen zu verdecken (z.B Schweißnähte etc.)]"),
expandedValue(
id: 3, title: "sitzt der Auspuff fest, arbeitet der Motor leise?"),
],
),
Info(
headerValue: "Dokumenten- & Zahlencheck",
expandedValueData: <expandedValue>[
expandedValue(id: 1, title: "Reperaturenabrechnungen vorhanden?"),
expandedValue(
id: 2,
title:
"macht Laufleistung Sinn? Mögliche Lufleistungen im Bereich von über 150 000 km, wenn:"),
expandedValue(id: 3, title: "Zulassungsbescheinigung Teil 1&2 "),
expandedValue(id: 4, title: "Wartungen & Rechnungen"),
],
),
Info(
headerValue: "Probefahrt",
expandedValueData: <expandedValue>[
expandedValue(id: 1, title: "vor der Fahrt:"),
expandedValue(id: 2, title: "bei der Fahrt"),
expandedValue(id: 3, title: "nach der Fahrt"),
],
),
Info(
headerValue: "Garantie, Gewehrleistung und Vertrag ",
expandedValueData: <expandedValue>[
expandedValue(
id: 1,
title:
"auf Rechmäßigkeit prüfen, wegen Haftungsgründen verweisen wir hier auf andere Seiten, wie die der Allianz oder Cosmosdirekt o. ä. "),
],
),
];