点击时不会从卡片 ListView 中打开 Flutter Expansion Tile

Question

我有一个 ListView ，它是动态构建的卡片列表。在卡片的一部分中，我放了一列并放了一个向下箭头按钮/图标。单击我想在扩展磁贴中打开更多详细信息。所以我为它创建了一个小部件功能。我注意到正在调用该函数，因为我在其中放置了打印件，但扩展磁贴并未在卡片正下方构建。

第一部分在这里构建我的动态卡片。

  itemBuilder: (BuildContext ctxt, int index) {
                               return new Container(

                                margin: new EdgeInsets.fromLTRB(0, 10, 20, 0),
                                decoration: new BoxDecoration(
                                                          //color:Color.fromRGBO(255, 255,255, 1),
                                                          borderRadius: new BorderRadius.only(
                                                            topRight: const Radius.circular(35),
                                                            bottomRight: const Radius.circular(35)
                                                          ),

                                ),
                                width: double.infinity,
                                height: 55,
                                child:Card(
                                    elevation: 5,
                                    //color: Color.fromRGBO(255, 255, 255, 1),
                                    clipBehavior: Clip.antiAlias,
                                    shape: RoundedRectangleBorder(
                                        borderRadius: new BorderRadius.only(
                                                                topRight: const Radius.circular(35),
                                                                bottomRight: const Radius.circular(35)
                                        ), 
                                   ),

                                   child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[



                                      Container(
                                        width: 90,

                                        child:
                                        Row(
                                          mainAxisAlignment: MainAxisAlignment.center, 
                                          crossAxisAlignment: CrossAxisAlignment.center, 
                                          children: [ 
                                          Column(
                                           mainAxisAlignment: MainAxisAlignment.center, 
                                          crossAxisAlignment: CrossAxisAlignment.center, 
                                          children: [ 
                                          //new Row( 
                                          // mainAxisSize: MainAxisSize.max, 

                                          //children: <Widget>[ 
                                          new Text( 
                                          "200", style: TextStyle(color:Colors.blue),
                                          ), 
                                          new Text( 
                                          "mmm", style: TextStyle(color:Colors.black),
                                          ), 
                                        // new Icon(Icons.account_circle) 
                                          //style: Theme.of(context).textTheme.body2 

                                          ],
                                        ),
                                          Column(
                                            mainAxisAlignment: MainAxisAlignment.center, 
                                            crossAxisAlignment: CrossAxisAlignment.center, 
                                            children: [
                                               GestureDetector( 
                                               onTap: () { 
                                                   print("Calling expansion tile");
                                                   expansionList(context,index);
                                                },
                                              child: Icon(Icons.arrow_drop_down),  
                                              ) 



                                            ]
                                          )
                                          //style: Theme.of(context).textTheme.body2 

                                          ],
                                        ),
                                      )
                                    ]
                                   )
                                )
                               );
                          }

因此在 tap 函数上我称这个函数为 expansionList(context,index);我在下面显示了该功能的详细信息。但是磁贴没有打开。如何使磁贴在点击时动态打开。

Widget expansionList(BuildContext context, int index) {
  print("In expansion tile");
    return new ExpansionTile(

      title: Text(
        "TEST",
        style: TextStyle(fontSize: 28.0),
      ),
      children: <Widget>[
          Column(
                                       mainAxisAlignment: MainAxisAlignment.center, 
                                      crossAxisAlignment: CrossAxisAlignment.center, 
                                      children: [ 
                                      //new Row( 
                                      // mainAxisSize: MainAxisSize.max, 

                                      //children: <Widget>[ 
                                      new Text( 
                                      "200", style: TextStyle(color:Colors.blue),
                                      ), 
                                      new Text( 
                                      "mmm", style: TextStyle(color:Colors.black),
                                      ), 
                                    // new Icon(Icons.account_circle) 
                                      //style: Theme.of(context).textTheme.body2 

                                      ],
               ),


           ]


    );
}

Answer 1

您现在要做的是 - 每次点击您:

• 调用 print 方法 - 它打印到控制台。
• 调用返回 ExpansionTile 小部件的函数。

但是您对返回值什么也不做，它甚至没有机会进入您的小部件树，它只是简单地构建而没有对其进行任何操作。

ExpansionTile 是一个小部件，包括:

• 3 个插槽，每个插槽可以容纳 Widget(或树):

  1. Widget leading - 通常你在这里放置头像/图标/复选框
  2. Widget title - tile 的主要内容
  3. Widget trailing - tile 的末尾，下拉箭头的最佳位置(默认包含在 ExpansionTile 中)

• 和一个 children 数组 - 展开时显示的内容；

代码:

    @override
    Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(itemBuilder: (BuildContext ctxt, int index) {
        return new Container(
          margin: new EdgeInsets.fromLTRB(0, 10, 20, 0),
          decoration: new BoxDecoration(
            //color:Color.fromRGBO(255, 255,255, 1),
            borderRadius: new BorderRadius.only(
                topRight: const Radius.circular(35),
                bottomRight: const Radius.circular(35)),
          ),
          width: double.infinity,
          // height: 55,
          child: Card(
            elevation: 5,
            clipBehavior: Clip.antiAlias,
            shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.only(
                  topRight: const Radius.circular(35),
                  bottomRight: const Radius.circular(35)),
            ),
            child: expansionList(ctxt, index),
          ),
        );
      }),
    );
    }

如果您想自定义箭头，请将您想要的任何内容放在 leading 和 title 的折叠图 block 上 - 使用自定义 trailing。

  Widget expansionList(BuildContext context, int index) {
    print("Building expansion tile");
    return new ExpansionTile(
      initiallyExpanded: false,
      leading: Icon(Icons.all_inclusive),    
      title: Column(
    children: <Widget>[
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text('Content'),
          RaisedButton(
            child: Text('Button'),
            onPressed: () {},
          ),
          Text('Row 1'),
        ],
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text('Content row 2'),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Text('Content row 3')
        ],
      )
    ],
  ),
  children: <Widget>[
    Image.network(
      "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png",
      height: 55,
    ),
  ],
    );
  }

PS 熟悉代码格式化热键组合，并始终在末尾加上逗号 - 代码自动格式化会更好