微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter Item ExpansionPanelList不会更改状态

如何解决Flutter Item ExpansionPanelList不会更改状态

我正在尝试从API检索数据,效果很好。

之后,我想在ExpansionPanelList中显示我的数据,该列表由一种方法构建:

class _CartaPageState extends State<CartaPage> {

  
  @override
  Widget build(BuildContext context) {
    // Nos suscribimos al provider
    final productoService = Provider.of<ProductoService>(context);
    final List<Producto> productos = productoService.productos; 
    _productosItems = productosToItem(productos);
    return Scaffold(
      body: Container(
        height: double.infinity,width: double.infinity,child: ListView(
          children: [
            ExpansionPanelList(
              animationDuration: Duration(milliseconds: 300),expansionCallback: (int index,bool isExpanded) {
                setState(() {
                  _productosItems[index].isExpanded = !isExpanded;
                  //productosItems[index].isExpanded = !productosItems[index].isExpanded;
                });
              },//children: productosToItem(productoService.entrantes).map<ExpansionPanel>((Item item) {
              children: _productosItems.map<ExpansionPanel>((Item item) {
                return ExpansionPanel(
                  headerBuilder: (context,isExpanded) {
                    return ListTile(
                      title: Text(item.headerValue),);
                  },................

数据显示完美,但是我的Itemmodel上的状态没有刷新,我认为问题是因为每次我触摸面板列表时小部件都在重绘,从而重新获得了数据从API中访问,永远不会更改状态。

我该如何解决

提前谢谢

编辑:CartaPage的包装者:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ProductoService()),],child: MaterialApp(
        debugShowCheckedModeBanner: false,title: 'Material App',home: CartaPage()
      ),);
  }
}

编辑2:

我同意我正在失去状态,这是将产品转换为商品方法

List<Item> productosToItem(List<Producto> productos) {
  return List.generate(productos.length,(index) {
    return Item(
      headerValue: productos[index].tipo,expandedValue: productos[index].nombre,);
  });
}

解决方法

ExpansionPanel的{​​{1}}是否设置为isExpanded

您从item.isExpanded生成的任何内容中获得isExpanded状态。

当您致电productosToItem()时,您将排队等待新的版本,该版本将再次呼叫setState。不知道该方法的作用,我无济于事。

我建议您研究productosToItem()以及为什么它没有将productosToItem设置为正确的值。

如果isExpanded不是二传手,我想你会失去状态。

编辑1:

您可以创建一个内部状态列表,以保留扩展状态:

_productosItems[index].isExpanded

class Item { Item({ this.expandedValue,this.headerValue,this.producto,this.isExpanded = false,}); String expandedValue; String headerValue; Producto producto; // <------------- ADDED bool isExpanded; } class _CartaPageState extends State<CartaPage> { Map<Producto,bool> expanded = {}; // <------------- ADDED @override Widget build(BuildContext context) { // Nos suscribimos al provider final productoService = Provider.of<ProductoService>(context); final List<Producto> productos = productoService.productos; // NOTE: ----------- converted to a local variable final _productosItems = productosToItem(productos); return Scaffold( body: Container( height: double.infinity,width: double.infinity,child: ListView( children: [ ExpansionPanelList( key: ValueKey(productos.length),// <------------- ADDED animationDuration: Duration(milliseconds: 300),expansionCallback: (int index,bool isExpanded) { // NOTE: ----------- updated final producto = productos[index]; setState(() { expanded[producto] = !isExpanded; }); },children: _productosItems.map<ExpansionPanel>((Item item) { return ExpansionPanel( isExpanded: expanded[item.producto],// <------------- ADDED canTapOnHeader: true,headerBuilder: (context,isExpanded) { return ListTile( title: Text(item.headerValue),); },body: ListTile( title: Text(item.expandedValue),),); }).toList(),],); } List<Item> productosToItem(List<Producto> productos) { // keep a list of previous map final toRemove = Map<Producto,bool>.from(expanded); final items = List.generate(productos.length,(index) { final producto = productos[index]; // set initial expanded state expanded.putIfAbsent(producto,() => false); // the item will be retained toRemove.remove(producto); return Item( headerValue: producto.tipo,expandedValue: producto.nombre,producto: producto,isExpanded: expanded[producto],); }); if (toRemove.isNotEmpty) { // cleanup unused items expanded.removeWhere((key,_) => toRemove.containsKey(key)); } return items; } } 是必要的,因为key: ValueKey(productos.length),对出现或消失的物品具有奇异的作用。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。