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

Question

我需要在单击选定的小部件项目时在列表视图的小部件内可见 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;
                                }
                              });
                            },
                          ),
                        )
                      ],
                    )),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

有什么办法可以解决这个问题吗？

谢谢！

Answer 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();
                              });
                            },
                          ),
                        )
                      ],
                    )),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

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

How to visible child widget of specific widget in ListView in Flutter?

flutter

dart

listview

flutter-listview