Flutter如何在按下Chip時在螢屏上顯示Chips文本？

想知道當用戶點擊芯片時我如何在螢屏上顯示芯片內的文本，希望文本在芯片下方，當用戶按下芯片和文字顯示并且沒有水平空格比單詞應該放在下面的新行上。

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) {
                            return GestureDetector(
                                onTap: () {},
                                child: Chip(
                                  label: Text(
                                    widget.QuizList[index].toString(),
                                    style: TextStyle(
                                        fontSize: 20.sp,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  backgroundColor: Color(0xFF50CFFD),
                                ));
                          })))
                ]);
              }
              return Center(child: CircularProgressIndicator());
            }));
  }
}

所以影像是我現在想要實作的我只有上面有文字的芯片，我想當用戶按下芯片時我希望芯片內的單詞顯示在沒有水平空間時顯示文本在新的一行]點擊圖片

uj5u.com熱心網友回復：

添加一個名為chipText之類的變數，然后在這部分

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

在您的 Stack 子項串列中創建一個新的 Text 小部件（或任何其他您希望顯示點擊的文本）。

之后，設定狀態，或您使用應用程式的任何狀態管理方式。

uj5u.com熱心網友回復：

如果我沒記錯的話，你正在實作這一目標：

我只是為每個專案的模型類添加了布爾變數，然后在用戶按下芯片時分配了可見性，然后添加了Visibility小部件來管理顯示文本。

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

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

  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  List<QuizInfo> data = [
    QuizInfo(
      title: "Twitter",
    ),
    QuizInfo(
      title: "Instagram",
    ),
    QuizInfo(title: "Facebook"),
    QuizInfo(title: "Stackoverflow"),
    QuizInfo(title: "Github"),
  ];

  

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
          margin: const EdgeInsets.only(top: 50),
          padding: const EdgeInsets.all(20),
          child: Wrap(
              direction: Axis.horizontal,
              spacing: 20,
              children: List<Widget>.generate(data.length, (int index) {
                return GestureDetector(
                    onTap: () => setState(() => data[index].visible = !data[index].visible),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Chip(
                          label: Text(
                            data[index].title.toString(),
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          backgroundColor: Color(0xFF50CFFD),
                        ),
                        Visibility(
                          visible: data[index].visible,
                          child: Text(
                            data[index].title.toString(),
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        )
                      ],
                    ));
              }))),
    );
  }
}

標籤：扑 镖 颤振布局

上一篇：顫振卡高度不適用于卡頂

下一篇：如何創建這個進度指示器？特別不知道怎么做Flow影片