如何在Flutter中获取.map后的单独列表项?

wj8zmpe1  于 2022-11-30  发布在  Flutter
关注(0)|答案(2)|浏览(157)

我是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),但是它不起作用。

qoefvg9y

qoefvg9y1#

试试这个:
更改此

tileColor: isSelected ? Colors.green : Colors.red,

更改为:

tileColor: item.isExpanded ? Colors.green : Colors.red,

必须使用父面板中bool条件

ktca8awb

ktca8awb2#

无论您单击哪个图块,isSelected都将更改,并且每个图块都将识别更改,因为isSelected条件确定了您要显示的颜色。
所以,你必须改变你的isSelected的类型从boolString,当你点击它,你可以设置isSelected的标签,这样,Flutter就知道你想改变哪个瓷砖.

String selected = '';

在您的平铺属性中

tileColor: selected == items[index].header ? Colors.green : Colors.red,
onTap:  () => setState(() => selected = items[index].header),

但是,最好的做法是为Item类设置一个新字段id,或者使用asMap()来声明索引,因为有时候标头可能是相同的。

相关问题