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 

                                          ],
                                        ),
                                      )
                                    ]
                                   )
                                )
                               );
                          }

因此，在点击功能上，我称此功能为expandingList（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

您现在要做的是-每次点击即可：

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

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

ExpansionTile是一个小部件，包含：

每个插槽可容纳3个小部件（或树）：
1. 小部件leading-通常，您将头像/图标/复选框放在此处
2. 小部件title-磁贴的主要内容
3. 小部件trailing-磁贴的末尾，是下拉箭头的最佳位置（默认情况下包含在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熟悉代码格式的热键组合，并且始终使用逗号结尾-代码将自动格式化更好的格式

点选时从卡片清单检视中无法开启Flutter扩充磁贴

1 个答案: