Я хочу, чтобы первый элемент ExpansionTile по умолчанию был открыт. Я хочу Когда я нажимаю на другой элемент, текущий элемент закрывается. Как мне это сделать?

Question

 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: 
                            );
                      },
                        )
                ]
                    ),
          )           
        ),

пример

Я пытаюсь создать личный список с ExpansionTile во флаттере. Персональный список имеет свойства и детализацию. Я хочу, чтобы первый элемент ExpansionTile по умолчанию был открыт. И я хочу, чтобы при нажатии на другой элемент текущий элемент был закрыт. Так что только один элемент будет открыт всегда. Как мне это сделать? Спасибо.

Answer 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; 
                                                });        
                                        })
                                      ),

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

Answer 2

Вместо initiallyExpanded: false, вы можете использовать initiallyExpanded: index == 0. Сделав это, вы проверите индекс вашего элемента, и если он равен 0, он будет первоначально расширен.

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

Чтобы свернуть ExpandedTile после выбора элемента, вы можете проверить следующие ссылки

Флаттер - свертывание плитки расширения после выбора элемента

Flutter - ExpansionTile разворачивается и сворачивается при нажатии