Flutter Expansion Tile未在卡片列表视图中打开

Question

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

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

  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函数上我调用这个函数expandList（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

你现在做的是 - 每次点击你：

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

但是你没有对返回的值做任何事情，它甚至没有机会进入你的小部件树，它只是简单地构建而没有用它做任何事情。

ExpansionTile是一个小部件，包括：

• 每个3个插槽可以容纳Widget（或树）： 小工具leading - 通常你在这里放置头像/图标/复选框 小工具title - 瓷砖的主要内容 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中放置任何你想要的折叠瓷砖，如果你想自定义箭头 - 使用自定义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熟悉代码格式化热键组合，并始终使用尾随逗号 - 代码将自动格式化更好