我得到了什么-
import 'package:flutter/material.dart';
class ExpandableContainer extends StatefulWidget {
const ExpandableContainer({Key? key}) : super(key: key);
@override
State<ExpandableContainer> createState() => _ExpandableContainerState();
}
class _ExpandableContainerState extends State<ExpandableContainer> {
int selectedIndex = -1;
List dataList = [
{
"title": "Title 1",
"items": [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
],
},
{
"title": "Title 2",
"items": [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7",
"Item 8",
],
},
{
"title": "Title 3",
"items": [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
],
},
{
"title": "Title 4",
"items": [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7",
"Item 8",
"Item 9",
"Item 10",
],
},
{
"title": "Title 5",
"items": [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7",
],
},
];
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: SizedBox(
height: size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
dataList.length,
(index) => GestureDetector(
onTap: () => setState(() {
selectedIndex = index;
}),
child: Container(
height: size.height / dataList.length,
width: size.width,
padding: const EdgeInsets.fromLTRB(32.0, 16.0, 0.0, 16.0),
// alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: 8.0, color: Colors.grey),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
dataList[index]["title"].toUpperCase(),
style: const TextStyle(
fontSize: 38.0,
color: Colors.black,
fontWeight: FontWeight.w900,
letterSpacing: -2.0,
),
),
for (var item in dataList[index]["items"])
Text(
selectedIndex == index ? item : "",
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
height: selectedIndex == index ? 1.5 : 0.0,
),
),
],
),
),
),
),
),
),
);
}
}
uj5u.com熱心網友回復：
請使用 ExpansionTile 進行擴展
ExpansionTile(
iconColor:Colors.blue,
textColor:Colors.black,
title: Text('Privacy Policy',style: TextStyle(fontSize: 16)),
children: [
ListTile(
title: Text('item1',textAlign: justifyText,),
),
ListTile(
title: Text('item2',textAlign: justifyText,),
),
ListTile(
title: Text('item3',textAlign: justifyText,),
),
ListTile(
title: Text('item4',textAlign: justifyText,),
),
],
),
uj5u.com熱心網友回復：
試試這個，你可以在 dartpad 上測驗它，所以現在它阻礙了容器上的大小，所以如果你選擇某個索引，使容器高度為空，以便它將結果包裝在里面。
return Scaffold(
backgroundColor: Colors.white,
body: SizedBox(
child: ListView.builder(
shrinkWrap: true,
itemCount: dataList.length,
itemBuilder:(context,index)
=>GestureDetector(
onTap:(){
setState((){
selectedIndex = index;
print( dataList[index]['items'].map((e)=> e).toList());
});
},
child: Container(
height: selectedIndex == index ? null
: size.height / dataList.length,
width: size.width,
padding: const EdgeInsets.fromLTRB(32.0, 16.0, 0.0, 16.0),
// alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: 8.0, color: Colors.grey),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
dataList[index]["title"].toUpperCase(),
style: const TextStyle(
fontSize: 38.0,
color: Colors.black,
fontWeight: FontWeight.w900,
letterSpacing: -2.0,
),
),
...dataList[index]['items'].map((e)=>
selectedIndex == index ?
Text(
e,
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
height: selectedIndex == index ? 1.5 : 0.0,
) ,
) : Container(),).toList()
],
),
),
),
),
),
);
uj5u.com熱心網友回復：
解決方案 1
為此，您可以使用 ExpansionTile 類，
此小部件通常與 ListView 一起使用以創建“展開/折疊”串列條目。當與 ListView 等滾動小部件一起使用時，必須指定唯一的 PageStorageKey 以使 ExpansionTile 在滾動進出視圖時能夠保存和恢復其展開狀態。
這是關于 ExpansionTile 的鏈接
為此，您可以使用 ExpandableGroup
這是關于 ExpandableGroup 的鏈接
https://pub.dev/packages/expandable_group
如果你不想使用插件，只需檢查這個插件代碼，它的邏輯很簡單
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/442755.html
上一篇：布局期間引發了以下斷言：ARenderFlex在底部溢位了X個像素
下一篇：自定義ListviewsetonItemClickListner在DialogFragment中使用kotlin中的Viewbinding不起作用