0

我正在从 Firebase 实时数据库中获取标题和描述(在一段中)到扩展面板列表中的 Flutter 扩展面板。

我已经使用可扩展功能成功获取了标题和描述。

但是,我正面临isExpanded扩展面板属性的问题。

每当我设置isExpanded: true时,点击 Oncapheader,所有扩展面板都会被扩展。我想实现,当一个扩展面板展开时,其他面板应该关闭。

下面是我的代码片段:

class Infos extends StatefulWidget {
  @override
  _FaqsState createState() => _FaqsState();
}

class _InfosState extends State<Faqs> {
  Query _ref;
  DatabaseReference reference =
      FirebaseDatabase.instance.reference().child('infos');
 

  @override
  void initState() {
    super.initState();
    _ref = FirebaseDatabase.instance
        .reference()
        .child('infos')
        .orderByChild('description');
    listExpans.add(false);
  }

  Widget _buildInfosItem({Map infos}) {
    return Container(
        color: Color.fromRGBO(238, 238, 238, 1),
        alignment: Alignment.center,
        child: Column(children: <Widget>[
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 20),
            child: ExpansionPanelList(
              expandedHeaderPadding: EdgeInsets.all(0),
              elevation: 0,
              children: <ExpansionPanel>[
                ExpansionPanel(
                  backgroundColor: Color.fromRGBO(238, 238, 238, 1),
                  headerBuilder: (context, isExpanded) {
                    return Padding(
                        padding: const EdgeInsets.only(top: 10),
                        child: ListTile(
                          title: Text(
                            infos['title'],
                            style: TextStyle(
                                fontSize: 18,
                                letterSpacing: 0.32,
                                fontWeight: FontWeight.bold,
                                color: Color.fromRGBO(0, 0, 0, 1)),
                          ),
                        ));
                  },
                  body: Padding(
                    padding: EdgeInsets.only(
                        top: 0, bottom: 10, left: 14, right: 14),
                    child: Text(infos['description'],
                        style: TextStyle(
                            fontSize: 16,
                            color: Color.fromRGBO(51, 51, 51, 1))),
                  ),
                  isExpanded: true, 
                  canTapOnHeader: true,
                ),
              ],
              expansionCallback: (panelIndex, isExpanded) {
                setState(() {
                  listExpans[panelIndex] = !isExpanded;
                });
              },
              animationDuration: kThemeAnimationDuration,
            ),
          )
        ]));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(238, 238, 238, 1),
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Color.fromRGBO(34, 34, 34, 1),
        title: Text(
          'Information',
          style: TextStyle(
            fontSize: 20,
            color: Color.fromRGBO(255, 255, 255, 1),
            fontWeight: FontWeight.bold,
          ),
        ),
        leading: GestureDetector(
          onTap: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => End(),
                ));
          },
          child: SizedBox(
              width: 7.4,
              height: 12,
              child: Icon(Icons.chevron_left,
                  color: Color.fromRGBO(255, 255, 255, 1))),
        ),
        leadingWidth: 40,
      ),
      body: Container(
        height: double.infinity,
        child: FirebaseAnimatedList(
          query: _ref,
          itemBuilder: (BuildContext context, DataSnapshot snapshot,
              Animation<double> animation, int index) {
            Map faqs = snapshot.value;
            faqs['key'] = snapshot.key;
            return _buildInfosItem(infos: infos);
          },
        ),
      ),
    );
  }
}
4

0 回答 0