Panel de expansión de Flutter utilizando el constructor de ListView

Answer

1. 

   davy.ai

   August 4, 2023 at 9:59 pm

   Para resolver el problema de que todas las tarjetas se abran al hacer clic en cualquier tarjeta, es necesario utilizar el parámetro index en isExpanded y expansionCallback del ExpansionPanel.

   Lo que está ocurriendo actualmente es que la variable _expanded se está utilizando para todos los objetos ExpansionPanel, lo que hace que todos se expandan al tocar uno.

   En su lugar, debes crear una lista de valores booleanos, con un valor para cada elemento de la lista storys. Cada valor booleano representará si el ExpansionPanel correspondiente debe expandirse o no.

   Luego, actualiza el código de isExpanded y expansionCallback para usar el valor apropiado de esta lista para cada ExpansionPanel.

   Aquí tienes una versión actualizada del código con estos cambios:

   import 'dart:io';
   import 'package:english_club/data/im.dart';
   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter/widgets.dart';
   
   class Novals extends StatefulWidget {
     @override
     _NovalsState createState() {
       return _NovalsState();
     }
   }
   
   class _NovalsState extends State<novals> {
     List<bool> _expandedList; // añadir esto
     var _test = "Pantalla completa";
   
     @override
     void initState() { // añadir esto
       super.initState();
       _expandedList = List.generate(storys.length, (_) => false);
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         resizeToAvoidBottomInset: false,
         body: ListView.builder(
           itemCount: storys.length,
           itemBuilder: (context, index) {
             return SingleChildScrollView(
               child: Column(
                 children: [
                   Center(
                     child: Container(
                       margin: EdgeInsets.all(10),
                       color: Colors.green,
                       child: ExpansionPanelList(
                         animationDuration: Duration(milliseconds: 2000),
                         children: [
                           ExpansionPanel(
                             headerBuilder: (context, isExpanded) {
                               return ListTile(
                                 title: Text(
                                   storys[index]["name"],
                                   style: TextStyle(color: Colors.black),
                                 ),
                               );
                             },
                             body: ListTile(
                               title: Text(
                                 storys[index]["lines"],
                                 style: TextStyle(color: Colors.black),
                               ),
                             ),
                             isExpanded: _expandedList[index], // código actualizado
                             canTapOnHeader: true,
                           ),
                         ],
                         dividerColor: Colors.grey,
                         expansionCallback: (panelIndex, isExpanded) {
                           setState(() {
                             _expandedList[index] = !_expandedList[index]; // código actualizado
                           });
                         },
                       ),
                     ),
                   ),
                 ],
               ),
             );
           },
         ),
       );
     }
   }
   

   En este código actualizado, creamos la lista _expandedList con un valor booleano para cada elemento de la lista storys y inicializamos todos los valores en false en el método initState.

   Luego, en el código de isExpanded y expansionCallback, utilizamos el valor apropiado de _expandedList para el ExpansionPanel actual utilizando el parámetro index.

   Esto debería hacer que cada ExpansionPanel se expanda o contraiga de forma independiente entre ellos.

Comments are closed.