Flutter ExpansionPanelList.radio - 如何在重建时保留扩展答案

【问题标题】：Flutter ExpansionPanelList.radio - how to preserve expansion on rebuildFlutter ExpansionPanelList.radio - 如何在重建时保留扩展
【发布时间】：2020-04-07 03:35:57
【问题描述】：

我可以创建和显示ExpansionPanelList.radio 就好了。它的children 属性包含ExpansionPanelRadio 项目的列表。一切正常 - 除了一件事：

当我导航到其他选项卡，然后返回到包含我的ExpansionPanelList.radio 的选项卡时，之前展开的ExpansionPanelRadio 项目现在已折叠。

我希望能够保持最后展开的ExpansionPanelRadio 展开，但它的isExpanded 属性是只读的。与ExpansionPanel 不同的是，ExpansionPanelRadio 并没有在其构造函数中定义isExpanded。

知道如何实现这一点吗？谢谢！

编辑：澄清一下，这里是显示EpxpansionPalnelList.radio的代码：

class ProductsByApplicationWidget extends StatelessWidget {
  final ProductsByApplication productsByApplication;
  final int indexOfExpandedFieldOfApplication;

  const ProductsByApplicationWidget(
      {Key key, @required this.productsByApplication, @required this.indexOfExpandedFieldOfApplication})
      : assert(productsByApplication != null),
        assert(indexOfExpandedFieldOfApplication != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _buildPanel(),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      animationDuration: Duration(milliseconds: 300),
      children:
      productsByApplication.productsForApplicationList
          .map<ExpansionPanel>((ProductsForApplication productsForApplication) {
        return ExpansionPanelRadio(
          canTapOnHeader: true,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return FieldOfApplicationHeaderCellWidget(application: productsForApplication.application,);
          },
          body: Container(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Column(
                children:
                productsForApplication.products.map<ProductCellWidget>((Product product) {
                  return ProductCellWidget(product: product);
                }).toList(),
              ),
            ),
          ),
          value: productsForApplication.application.id,

        );
      }).toList(),
    );
  }
}

【问题讨论】：

你能展示最少的代码来更好地了解你是如何实现的吗？
@OMiShah 代码 sn-p 添加。

标签： flutter panel expand

【解决方案1】：

要保持状态，请使用Offstage 实现Stack。这样做将保持状态。顺便说一句，您也可以使用key 属性。

一个例子：

import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/material.dart';

class Demo extends StatefulWidget {

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {

  int _currentIndex = 0; // to keep the index of currently selected tab

  Stack _bodyWidgets() {
    return Stack( children: <Widget>[
      Offstage(
          offstage: _currentIndex != 0,
          child: TickerMode(enabled: _currentIndex == 0, child: _screen1Body())),
      Offstage(
        offstage: _currentIndex != 1,
        child: TickerMode(
          enabled: _currentIndex == 1,
          child: Text(("Screen 2"),
        ),
      )),
      Offstage(
        offstage: _currentIndex != 2,
        child: TickerMode(
          enabled: _currentIndex == 2,
          child: Text("Screen 3")),
        ),
    ]);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text("DEMO"),
        ),
        body: _bodyWidgets(),
        bottomNavigationBar: BottomNavyBar(
            selectedIndex: _currentIndex,
            onItemSelected: (index) => _onTabTapped(index),
            showElevation: true,
            items: [
              BottomNavyBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Screen1')),
              BottomNavyBarItem(
                  icon: Icon(Icons.photo),
                  title: Text('Screen2'),
              ),
              BottomNavyBarItem(
                  icon: Icon(Icons.notifications),
                  title: Text('Screen3'),
                 ),
             
            ]));
  }

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  _screen1Body() {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, i) {
        return Padding(padding: EdgeInsets.all(5), child: Text(i.toString()));
      },
    );
  }
}

【讨论】：