我想要第一个 ExpansionTile 的项目默认是打开的。我想当我单击另一个项目时，当前项目将关闭。我该怎么做？

Posted 2023-02-23

【中文标题】我想要第一个 ExpansionTile 的项目默认是打开的。我想当我单击另一个项目时，当前项目将关闭。我该怎么做？

【英文标题】：I want first ExpansionTile's item default is open. I want to When I click another item, current item is will close. How can I do it?

【发布时间】：2020-05-06 06:49:19

【问题描述】：

 body: Container(color: Colors.white,
          child: SingleChildScrollView(
              child : Column( 
                children : [
                  Padding(padding: EdgeInsets.only(left : 23.0, top: 23.0, right: 23.0, bottom: 5.0), 
                              child : Text("Title", style: MyTextStyles.textNormal,)),

                  ListView.builder(
                      padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: PersonModel.icData.length,
                      itemBuilder: (context, index) 
                        PersonModel _model = PersonModel.icData[index];
                        return Column(
                          children: <Widget>[
                            Divider(
                              height: 17.0,
                              color: MyColors.white,
                            ), 
                                  ExpansionTile(
                                        key:  PageStorageKey<String>(index.toString()),
                                        initiallyExpanded: false,
                                        leading: 
                                        new ClipOval(
                                                child: SvgPicture.asset(
                                                    _model.picture,
                                                    height: 57.0,
                                                    width: 57.0,
                                                ),
                                            ),

                                        title: Text(_model.title,style: TextStyle(color: Color(0xFF09216B), fontFamily: 'ProximaNova-Bold')), 
                                        subtitle: Text(_model.subtitle, style: TextStyle(color: Colors.black, fontSize: 13.0,),),
                                        children: <Widget>[                                       
                                          Padding(padding: EdgeInsets.only(left: 20.0, top: 15.0), 
                                                      child : Text(_model.title + ' ' +_model.detail,)
                                                      ) 
                                        ],
                                        onExpansionChanged: ((newState)
                                             print(' is now : ' + newState.toString());
                                        )
                                      ),

                              ]
                              //trailing: 
                            );
                      ,
                        )
                ]
                    ),
          )           
        ),

example

我尝试在 Flutter 中使用 ExpansionTile 创建人员列表。人员列表具有属性和详细信息。 我想要第一个 ExpansionTile 的项目默认是打开的。 我想当我单击另一个项目时，当前项目将关闭。 所以只有一个项目会一直打开。 我该怎么做？ 谢谢。

【参考方案1】：

这个很棒的解决方案

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'ExpansionTile Collapse',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ExpansionTile Collapse'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 

  // selected's value = 0. For default first item is open.
  int selected = 0; //attention

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,title: Text('ExpansionTile Collapse', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
      ),
      body: Container(color: Colors.white,
          child: SingleChildScrollView(
              child : Column( 
                children : [                  
                  ListView.builder(

                      key: Key('builder $selected.toString()'), //attention

                      padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: 5,
                      itemBuilder: (context, index)                         
                        return Column(
                          children: <Widget>[
                            Divider(
                              height: 17.0,
                              color: Colors.white,
                            ), 
                                  ExpansionTile(  

                                        key: Key(index.toString()), //attention                                                                  
                                        initiallyExpanded : index==selected, //attention

                                        leading: Icon(Icons.person, size: 50.0, color: Colors.black,),
                                        title: Text('Faruk AYDIN $index',style: TextStyle(color: Color(0xFF09216B), fontSize: 17.0, fontWeight: FontWeight.bold)), 
                                        subtitle: Text('Software Engineer', style: TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.bold),),
                                        children: <Widget>[                                       
                                          Padding(padding: EdgeInsets.all(25.0), 
                                                      child : Text('DETAİL $index \n' + 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',)
                                                      ) 
                                        ],
                                        onExpansionChanged: ((newState)
                                            if(newState)
                                                setState(() 
                                                  Duration(seconds:  20000);
                                                  selected = index; 
                                                );
                                                else setState(() 
                                                  selected = -1; 
                                                );        
                                        )
                                      ),

                              ]
                            );
                      ,
                        )
                ]
                    ),
          )           
        )
    );
  

【讨论】：

感谢您的回答，但有没有办法在不丢失动画的情况下做到这一点？

【参考方案2】：

您可以使用initiallyExpanded: index == 0 代替initiallyExpanded: false,。通过这样做，您将检查您的项目的索引，如果它是 0，它将最初被扩展。

 ListView.builder(itemCount: 10, itemBuilder: (context, index) 
      return ExpansionTile(
        initiallyExpanded: index == 0,
        title: Text('Title #$index'), 
        children: <Widget> [
          Text('Expansion #$index'),
        ],
      );
    ),

选择项目后折叠ExpandedTile，您可以查看以下链接

Flutter - Collapsing ExpansionTile after choosing an item

Flutter- ExpansionTile expand and collapse on click

【讨论】：

你能用代码解释一下吗？对不起，我不明白。对不起，但不起作用如果我使用这个 'initiallyExpanded = index == 0'

对不起，我打错了。不是'initiallyExpanded = index ==0'，应该是'initiallyExpanded: index == 0'

我给你做了一个小例子，请查看编辑后的答案

我检查您发送给我的链接。但是 AppExpansionTile 在我的代码中不起作用。我无法创建全局密钥 final GlobalKey expansionTile = new GlobalKey();

我找不到折叠项目的方法。但是如果可以的话我会告诉你的