我是Flutter的新手,我必须创建一个规则列表,列表中的每一项都是绿色的,如果你违反了一个规则,你可以按下它并将颜色更改为红色。我还必须具有可扩展性。我还必须具有可扩展性。在YouTube教程的实现中,我看到我使用.map()
来Map列表中的项,但现在当我必须按下并更改颜色时,所有项目都会改变,而不仅仅是一个项目。
有什么办法解决这个问题吗?
class _MyHomePageState extends State<MyHomePage> {
bool isSelected = true;
static const lawText =
' example text of the laws that are going to be implemented inside here. This is only to fill out the space at the moment';
final List<Item> items = [
Item(header: 'Law 1 ' , body: lawText),
Item(header: 'Law 2 ' , body: lawText),
Item(header: 'Law 3 ' , body: lawText),
Item(header: 'Law 4 ' , body: lawText),
Item(header: 'Law 5 ' , body: lawText),
];
@override
Widget build(BuildContext context) => Scaffold(
drawer: NavBar(),
appBar: AppBar(
title: Text('§ Regel'),
centerTitle: true,
),
body: SingleChildScrollView(
//crossAxisAlignment : crossAxisAlignment,
child:ExpansionPanelList(
expansionCallback: (index, isExpanded) {
setState(() => items[index].isExpanded = !isExpanded);
},
children: items
.map((item) => ExpansionPanel(
isExpanded: item.isExpanded,
headerBuilder:(context, isExpanded) => ListTile(
tileColor: isSelected ? Colors.green : Colors.red,
onTap: () => setState(() => isSelected = !isSelected),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
title:Text(
item.header,
style: TextStyle(fontSize: 20),
),
),
body: ListTile(
title: Text(item.body, style: TextStyle(fontSize: 20) ),
//tileColor: Colors.lightGreen,
//onTap: () => setState(() => isSelected = !isSelected),
),
))
.toList(),
),
),
);
}
class Item {
final String header;
final String body;
bool isExpanded;
Item({
required this.header,
required this.body,
this.isExpanded = false,
});
}
我试着用ListTile
代替普通的list来做所有的事情。我也试着用elementAt(index)
,但是它不起作用。
2条答案
按热度按时间qoefvg9y1#
试试这个:
更改此
更改为:
必须使用父面板中bool条件
ktca8awb2#
无论您单击哪个图块,
isSelected
都将更改,并且每个图块都将识别更改,因为isSelected
条件确定了您要显示的颜色。所以,你必须改变你的
isSelected
的类型从bool
到String
,当你点击它,你可以设置isSelected
的标签,这样,Flutter就知道你想改变哪个瓷砖.在您的平铺属性中
但是,最好的做法是为Item类设置一个新字段
id
,或者使用asMap()
来声明索引,因为有时候标头可能是相同的。