我在列中有几个扩展的小部件。首先我展开一个小部件。当我展开第二个时，第一个应该自动折叠

Posted 2023-02-23

【中文标题】我在列中有几个扩展的小部件。首先我展开一个小部件。当我展开第二个时，第一个应该自动折叠

【英文标题】：I have several expanded widgets in column. First I expand one widget. when I expanding the second one first one should auto collapse

【发布时间】：2021-12-24 05:15:22

【问题描述】：

我已经使用扩展小部件实现了几个扩展项。

这些是步骤

所有小部件在开始时都是折叠的 第一个小部件已展开 第二个小部件也展开了，但第一个没有折叠

我想在展开第二个时自动折叠第一个

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

     class CustomExpansionTile extends StatefulWidget 
     final Widget HeaderBody;
     final Widget ExpandedBody;
     final Color HeaderColor;
     final Color ExpandedBodyColor;
     final double Padding;

     const CustomExpansionTile(
     Key? key,
     required this.HeaderBody,
     required this.ExpandedBody,
     required this.HeaderColor,
     required this.ExpandedBodyColor,
     required this.Padding,
     ) : super(key: key);
     @override
    _CustomExpansionTileState createState() => _CustomExpansionTileState();
     

     class _CustomExpansionTileState extends State<CustomExpansionTile> 
     @override
     Widget build(BuildContext context) 
     return Column(
     children: [
     Card(
      elevation: 0,
      child: ExpansionWidget(
        initiallyExpanded: false,
        titleBuilder:
            (double animationValue, _, bool isExpaned, toogleFunction) 
          return Container(
            decoration: BoxDecoration(
                color: widget.HeaderColor,
                borderRadius: BorderRadius.circular(6)),
            height: 59,
            child: InkWell(
                onTap: () 
                  toogleFunction(animated: true);
                ,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: widget.Padding),
                  child: Row(
                    children: [
                      widget.HeaderBody,
                      const Spacer(),
                      Transform.rotate(
                        angle: 0,
                        child: Icon(
                            isExpaned
                                ? Icons.keyboard_arrow_down_rounded
                                : Icons.keyboard_arrow_right,
                            size: 40),
                        alignment: Alignment.centerRight,
                      )
                    ],
                  ),
                )),
          );
        ,
        content: Container(
          color: widget.ExpandedBodyColor,
          width: double.infinity,
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [widget.ExpandedBody],
          ),
          ),
          ),
          ),
          ],
           );
          
          

这是我调用自定义小部件的代码

  CustomExpansionTile(
                              HeaderBody: Row(
                                children: [
                                  Text('Hellooo'),
                                  Text('Hellooo'),
                                ],
                              ),
                              ExpandedBody: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: [
                                  Text('Hellooo'),
                                   Text('Hellooo'),                                  
                                ],
                              ),
                              HeaderColor: Colors.white,
                              ExpandedBodyColor: Colors.white,
                              Padding: 0,
                            ),

【问题讨论】：

嘿 NavodDinidu，您可以为展开的小部件的数量创建一个布尔列表，并将初始展开分配给该列表的索引。每次点击时调用状态更改，这样您可以切换每个小部件的扩展

【参考方案1】：

要实现这一点，您可以执行以下操作之一：

1- [O(n): O(1)] 创建一个名为 currentSelectedItem 的新属性，其类型为您的数据模型类型，onTap 方法将其值更改为您点击的项目，不要忘记将检查添加到扩展属性扩展卡为 -> expanded: currentSelectedItem == itemModel,

2- [O(n): O(n)] 为您的模型项添加一个名为“isExpanded”的新布尔属性，并配置点击操作以循环抛出所有模型列表更改项的isExpanded to false 并更新当前点击的item's isExpanded to true