如何在 Flutter 的 ListView 中显示特定小部件的子小部件？

Posted 2023-02-23

【中文标题】如何在 Flutter 的 ListView 中显示特定小部件的子小部件？

【英文标题】：How to visible child widget of specific widget in ListView in Flutter?

【发布时间】：2021-09-21 02:23:58

【问题描述】：

单击选定的小部件项目时，我需要在列表视图的小部件内可见comment TextFormField。现在试试下面的例子，它在列表视图小部件内的所有 TextFormField 都是可见的。但是我只需要在点击所选卡片小部件的Add Comment按钮时显示一个TextFormField表单（所选小部件的TextFormField）。

例子-

class _ForumState extends State<Forum> 
  TextEditingController comment = TextEditingController();
  bool addComment = false;
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.fromLTRB(18, 0, 18, 0),
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 3,
            itemBuilder: (context, i) 
              return Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0)),
                  elevation: 5,
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(18, 3, 10, 3),
                    child: Container(
                        child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Container(
                                child: Text('Name',
                                    style: GoogleFonts.montserrat(
                                      fontStyle: FontStyle.normal,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w300,
                                    )),
                              ),
                            ),
                            Container(
                              child: Text('2020/07/12',
                                  overflow: TextOverflow.ellipsis,
                                  style: GoogleFonts.montserrat(
                                    fontStyle: FontStyle.normal,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w300,
                                  )),
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Container(
                            child: Text('Contact Herb Seller',
                                style: GoogleFonts.montserrat(
                                  fontStyle: FontStyle.normal,
                                  fontSize: 18,
                                  fontWeight: FontWeight.w700,
                                )),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Container(
                            child: Text(
                                'You Can give your own flyer or ask us to desgin a cover for you. Select the option you want.',
                                style: GoogleFonts.montserrat(
                                  fontStyle: FontStyle.normal,
                                  fontSize: 15,
                                  fontWeight: FontWeight.w300,
                                )),
                          ),
                        ),
                        // This is the place is struggle!!
                        addComment
                            ? TextFormField(
                                controller: comment,
                              )
                            : SizedBox(
                                width: 0,
                                height: 0,
                              ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: RaisedButton(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(40)),
                            color: Color(0xFF91C220),
                            elevation: 8,
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  right: 6, left: 6, top: 4, bottom: 4),
                              child: Text(
                                'Add Comment',
                                style: GoogleFonts.montserrat(
                                    fontStyle: FontStyle.normal,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500,
                                    color: Colors.white),
                              ),
                            ),
                            onPressed: () 
                              // print(position);
                              setState(() 
                                if (addComment) 
                                  addComment = true;
                                 else 
                                  addComment = false;
                                
                              );
                            ,
                          ),
                        )
                      ],
                    )),
                  ),
                ),
              );
            ),
      ),
    );
  

有没有办法解决这个问题？

谢谢！

【问题讨论】：

试试 ExpansionTile。

【参考方案1】：

我找到了解决方案！我使用选定的小部件位置作为条件！

这就是我解决问题的方法！

class _ForumState extends State<Forum> 
  TextEditingController comment = TextEditingController();
  String pos = "";
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.fromLTRB(18, 0, 18, 0),
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 3,
            itemBuilder: (context, i) 
              return Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0)),
                  elevation: 5,
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(18, 3, 10, 3),
                    child: Container(
                        child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Container(
                                child: Text('Name',
                                    style: GoogleFonts.montserrat(
                                      fontStyle: FontStyle.normal,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w300,
                                    )),
                              ),
                            ),
                            Container(
                              child: Text('2020/07/12',
                                  overflow: TextOverflow.ellipsis,
                                  style: GoogleFonts.montserrat(
                                    fontStyle: FontStyle.normal,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w300,
                                  )),
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Container(
                            child: Text('Contact Herb Seller',
                                style: GoogleFonts.montserrat(
                                  fontStyle: FontStyle.normal,
                                  fontSize: 18,
                                  fontWeight: FontWeight.w700,
                                )),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Container(
                            child: Text(
                                'You Can give your own flyer or ask us to desgin a cover for you. Select the option you want.',
                                style: GoogleFonts.montserrat(
                                  fontStyle: FontStyle.normal,
                                  fontSize: 15,
                                  fontWeight: FontWeight.w300,
                                )),
                          ),
                        ),
                        // This was the place is struggle and now I fixed it
                        pos == i.toString()
                            ? TextFormField(
                                controller: comment,
                              )
                            : SizedBox(
                                width: 0,
                                height: 0,
                              ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: RaisedButton(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(40)),
                            color: Color(0xFF91C220),
                            elevation: 8,
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  right: 6, left: 6, top: 4, bottom: 4),
                              child: Text(
                                'Add Comment',
                                style: GoogleFonts.montserrat(
                                    fontStyle: FontStyle.normal,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500,
                                    color: Colors.white),
                              ),
                            ),
                            onPressed: () 
                              // print(position);
                              setState(() 
                                pos = i.toString();
                              );
                            ,
                          ),
                        )
                      ],
                    )),
                  ),
                ),
              );
            ),
      ),
    );