Flutter 按下芯片时如何在屏幕上显示芯片文本？

Question

想知道当用户点击芯片时，我如何在屏幕上显示芯片内的文本，希望文本位于芯片下方，当用户按下芯片时，文字显示在那里没有水平空格，单词应该在下面换行。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';
import 'package:femija_musliman/rendit_fjalet_quiz.dart';

import 'dataset.dart';

class RenditFjaletButton extends StatefulWidget {
  RenditFjaletButton({required this.QuizList, Key? key}) : super(key: key);
  late List QuizList;

  @override
  State<RenditFjaletButton> createState() => _RenditFjaletButtonState();
}

class _RenditFjaletButtonState extends State<RenditFjaletButton> {
  late Future<List<QuizInfo>?> futureData;

  int counter = 1;
  int counterForChips = 0;
  bool showWord = true;
  int _selectedChipsIndex = 0;
  List selectReportList = [];

  void initState() {
    super.initState();
    futureData = fetchData1() as Future<List<QuizInfo>?>;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            toolbarHeight: 23.h,
            backgroundColor: Color(0xFFEF6E98),
            title: Column(children: <Widget>[
              Align(
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: const EdgeInsets.only(right: 50),
                  child: Text(
                    'Rendit Fjalet',
                    style: TextStyle(fontSize: 25.sp),
                  ),
                ),
              ),
              Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 60, bottom: 60),
                    child: Text(
                      '- Fjala numer:  -',
                      style: TextStyle(fontSize: 18.sp),
                    ),
                  ))
            ])),
        body: FutureBuilder<List<QuizInfo>?>(
            future: futureData,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                List<QuizInfo>? data = snapshot.data;
                return Stack(children: [
                  Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                              'assets/background.PNG',
                            ),
                            fit: BoxFit.cover)),
                  ),
                  Container(
                      margin: EdgeInsets.all(20),
                      child: Wrap(
                        direction: Axis.horizontal,
                        spacing: 20,
                        children: List<Widget>.generate(widget.QuizList.length,
                            (int index) {
                          var chipsText = widget.QuizList[index].toString();

                          void _handleTap(int index) {
                            setState(() {
                              _selectedChipsIndex = index;
                            });
                          }

                          return GestureDetector(
                              onTap: () {
                                _handleTap(index);
                              },
                              child: Chip(
                                label: Text(
                                  chipsText,
                                  style: TextStyle(
                                      fontSize: 20.sp,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                                backgroundColor: Color(0xFF50CFFD),
                              ));
                        }),
                      )),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 170, left: 40),
                    child: Align(
                      alignment: Alignment.bottomLeft,
                      child: Text(
                        " ${(widget.QuizList[_selectedChipsIndex])}",
                        style: TextStyle(
                            fontSize: 20.sp,
                            color: Color(0xFF50CFFD),
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 155),
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 30),
                        child: Divider(
                          endIndent: 30,
                          thickness: 5,
                          color: Colors.pinkAccent,
                        ),
                      ),
                    ),
                  )
                ]);
              }
              return Center(child: CircularProgressIndicator());
            }));
  }
}

所以图像是我现在想要实现的，我只有带有文字的芯片，我希望当用户按下芯片时，我希望芯片内的单词在没有水平空间时显示文本显示在新行]click for image

Answer 1

如果我没记错的话，你就达到了this：

我只是创建具有相同模型类型的新列表并添加项目，如果该项目被选中。

class QuizInfo {
  String? title;
  bool visible;
  QuizInfo({required this.title, this.visible = false});
}



class RenditFjaletButton extends StatefulWidget {
  const RenditFjaletButton({Key? key}) : super(key: key);

  @override
  State<RenditFjaletButton> createState() => _RenditFjaletButtonState();
}

class _RenditFjaletButtonState extends State<RenditFjaletButton> {
  late Future<List<QuizInfo>?> futureData;

  List<QuizInfo> selectReportList = [];

  List<QuizInfo> quizList = [
    QuizInfo(
      title: "Twitter",
    ),
    QuizInfo(
      title: "Instagram",
    ),
    QuizInfo(title: "Facebook"),
    QuizInfo(title: "Stackoverflow"),
    QuizInfo(title: "Github"),
  ];

  void initState() {
    super.initState();
    futureData = fetchData1() as Future<List<QuizInfo>?>;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            toolbarHeight: 23,
            backgroundColor: const Color(0xFFEF6E98),
            title: Column(children: const [
              Align(
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: EdgeInsets.only(right: 50),
                  child: Text(
                    'Rendit Fjalet',
                    style: TextStyle(fontSize: 25),
                  ),
                ),
              ),
              Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: EdgeInsets.only(right: 60, bottom: 60),
                    child: Text(
                      '- Fjala numer:  -',
                      style: TextStyle(fontSize: 18),
                    ),
                  ))
            ])),
        body: Stack(children: [
          Container(
            decoration: const  BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(
                      'assets/background.PNG',
                    ),
                    fit: BoxFit.cover)),
          ),
          Container(
              margin: const EdgeInsets.all(20),
              child: Wrap(
                direction: Axis.horizontal,
                spacing: 20,
                children: List<Widget>.generate(quizList.length, (int index) {
                  var chipsText = quizList[index].title.toString();

                  return GestureDetector(
                      onTap: () {
                        setState(() {
                          quizList[index].visible = !(quizList[index].visible);
                          if (quizList[index].visible) {
                            selectReportList.add(quizList[index]);
                          } else {
                            selectReportList.remove(quizList[index]);
                            selectReportList.join(', ');
                          }
                        });
                      },
                      child: Chip(
                        label: Text(
                          chipsText,
                          style: const TextStyle(
                              fontSize: 20,
                              color: Colors.white,
                              fontWeight: FontWeight.bold),
                        ),
                        backgroundColor: quizList[index].visible
                            ? Colors.pinkAccent
                            : const Color(0xFF50CFFD),
                      ));
                }),
              )),

          Padding(
            padding: const EdgeInsets.only(bottom: 170, left: 40),
            child: Align(
                alignment: Alignment.bottomLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Wrap(
                              direction: Axis.horizontal,
                              spacing: 20,
                              children: List<Widget>.generate(
                                  selectReportList.length, (int index) {
                                return Text(
                                  " ${(selectReportList[index].title)}",
                                  style: const TextStyle(
                                      fontSize: 20,
                                      color: Color(0xFF50CFFD),
                                      fontWeight: FontWeight.bold),
                                );
                              })),
                          Divider(
                            endIndent: 30,
                            thickness: 5,
                            color: Colors.pinkAccent,
                          ),
                        ],
                      ),
                    ),
                    IconButton(
                        onPressed: () {
                          setState(() {
                            selectReportList.clear();
                            
                          });
                        },
                        icon: Icon(
                          Icons.cancel,
                          color: Colors.pinkAccent,
                        ))
                  ],
                )),
          ),
        ]));
  }
}

Answer 2

添加一个类似于chipText的变量，然后在这部分

    return GestureDetector(
        onTap: () {
            chipText = widget.QuizList[index].toString()
            },

在您的 Stack 子列表中创建一个新的 Text 小部件（或您希望显示点击的文本的任何其他小部件）。

在此之后，设置状态，或您使用应用的任何状态管理方式。