在 Flutter 中以编程方式扩展 ExpansionTile
kir*_*ira 6 dart flutter flutter-layout
我只是想ExpansionTile在 Flutter 中使用，从我修改为这样的示例中：
我想隐藏箭头并用于Switch扩展磁贴，这可能吗？或者我是否需要以编程方式呈现子项的自定义小部件？基本上，我只需要显示/隐藏孩子
这是我的代码：
import 'package:flutter/material.dart';
void main() {
runApp(ExpansionTileSample());
}
class ExpansionTileSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('ExpansionTile'),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) =>
EntryItem(data[index]),
itemCount: data.length,
),
),
);
}
}
// One entry in the multilevel list displayed by this app.
class Entry {
Entry(this.title,[this.question='',this.children = const <Entry>[]]);
final String title;
final String question;
final List<Entry> children;
}
// The entire multilevel list displayed by this app.
final List<Entry> data = <Entry>[
Entry(
'Chapter A',
'',
<Entry>[
Entry(
'Section A0',
'',
<Entry>[
Entry('Item A0.1'),
Entry('Item A0.2'),
Entry('Item A0.3'),
],
),
Entry('Section A1','text'),
Entry('Section A2'),
],
),
Entry(
'Chapter B',
'',
<Entry>[
Entry('Section B0'),
Entry('Section B1'),
],
),
Entry(
'Chapter C',
'',
<Entry>[
Entry('Section C0'),
Entry('Section C1')
],
),
];
// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
class EntryItem extends StatelessWidget {
const EntryItem(this.entry);
final Entry entry;
Widget _buildTiles(Entry root) {
if (root.children.isEmpty) return Container(
child:Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 32.0,
),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
Text(root.title),
Divider(height: 10.0,),
root.question=='text'?Container(
width: 100.0,
child:TextField(
decoration: const InputDecoration(helperText: "question")
),
):Divider()
]
)
)
);
return ExpansionTile(
//key: PageStorageKey<Entry>(root),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
Text(root.title),
Switch(
value:false,
onChanged: (_){},
)
]
),
children: root.children.map(_buildTiles).toList(),
);
}
@override
Widget build(BuildContext context) {
return _buildTiles(entry);
}
}
@diegovoper 的答案几乎没问题，一个没有涵盖的小问题是：它不会将单击Switch进一步传播到ExpansionTile，因此如果您单击外部开关，它就会扩展，而单击则Switch不会执行任何操作。用 包裹它IgnorePointer，并在扩展事件时设置 switch 的值。这是一个有点倒退的逻辑，但效果很好。
...
return ExpansionTile(
onExpansionChanged: _onExpansionChanged,
// IgnorePointeer propogates touch down to tile
trailing: IgnorePointer(
child: Switch(
value: isExpanded,
onChanged: (_) {},
),
),
title: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Text(root.title),
]),
children: root.children.map((entry) => EntryItem(entry)).toList(),
);
...
我认为这会对您有所帮助\n最初扩展：true
\n itemBuilder: (context, index) { \n return Column(\n children: <Widget>[\n Divider(\n height: 17.0,\n color: Colors.white,\n ), \n ExpansionTile( \n\n key: Key(index.toString()), //attention \n initiallyExpanded : true,\n leading: Icon(Icons.person, size: 50.0, color: Colors.black,),\n title: Text('Faruk AYDIN ${index}',style: TextStyle(color: Color(0xFF09216B), fontSize: 17.0, fontWeight: FontWeight.bold)), \n subtitle: Text('Software Engineer', style: TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.bold),),\n children: <Widget>[ \n Padding(padding: EdgeInsets.all(25.0), \n child : Text('DETA\xc4\xb0L ${index} \\n' + 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',)\n ) \n ],\n onExpansionChanged: ((newState){\n if(newState)\n setState(() {\n Duration(seconds: 20000);\n selected = index; \n });\n else setState(() {\n selected = -1; \n }); \n })\n ),\n \n ]\n );\n \n是的，有可能，我稍微修改了你的代码：
class EntryItem extends StatefulWidget {
const EntryItem(this.entry);
final Entry entry;
@override
EntryItemState createState() {
return new EntryItemState();
}
}
class EntryItemState extends State<EntryItem> {
var isExpanded = false;
_onExpansionChanged(bool val) {
setState(() {
isExpanded = val;
});
}
Widget _buildTiles(Entry root) {
if (root.children.isEmpty)
return Container(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 32.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(root.title),
Divider(
height: 10.0,
),
root.question == 'text'
? Container(
width: 100.0,
child: TextField(
decoration: const InputDecoration(
helperText: "question")),
)
: Divider()
])));
return ExpansionTile(
onExpansionChanged: _onExpansionChanged,
trailing: Switch(
value: isExpanded,
onChanged: (_) {},
),
//key: PageStorageKey<Entry>(root),
title: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Text(root.title),
]),
children: root.children.map((entry) => EntryItem(entry)).toList(),
);
}
@override
Widget build(BuildContext context) {
return _buildTiles(widget.entry);
}
}
基本上我从无状态更改为有状态，因为您需要处理小部件的状态Switch。
默认情况下，我在其中放置了一个用于删除小部件的开关的trailing属性。ExpansionTilearrow
聆听 onExpansionChanged: _onExpansionChanged,, 来更改开关的状态。
最后将子项构建为新的小部件：
children: root.children.map((entry) => EntryItem(entry)).toList(),