點選時從卡片清單檢視中無法開啟Flutter擴充磁貼

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

您現在要做的是-每次點擊即可：

• 調用print方法-打印到控制台。
• 調用返回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),
          ),
        );
      }),
    );
    }

如果要自定義箭頭，請使用自定義trailing將所需的內容放在leading和title折疊圖塊上。

  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熟悉代碼格式化熱鍵組合，並始終在結尾加上逗號-代碼將自動格式化更好