Flutter 如何实现点击Chip后在下方展示其文本并自动换行？

核心修改说明 #

• 替换状态变量：使用字符串列表存储点击过的Chip文本，支持按点击顺序拼接展示
• 优化文本换行能力：给展示文本组件添加自动换行配置，同时约束宽度为屏幕可用宽度，超出自动折行
• 调整布局结构：将原来的Stack布局替换为Column布局，避免Chip区域和下方展示区域重叠
• 可选支持点击取消：如果需要重复点击Chip可以移除对应展示的文本，可直接使用代码中附带的去重逻辑

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;
  // 替换原来的单个索引，存储选中的文本列表
  List<String> selectedWords = [];
  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: $counter -',
                      style: TextStyle(fontSize: 18.sp),
                    ),
                  ))
            ])),
        body: FutureBuilder<List<QuizInfo>?>(
            future: futureData,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                List<QuizInfo>? data = snapshot.data;
                return Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage(
                            'assets/background.PNG',
                          ),
                          fit: BoxFit.cover)),
                  child: Column(
                    children: [
                      // Chip展示区域
                      Container(
                          margin: EdgeInsets.all(20),
                          child: Wrap(
                            direction: Axis.horizontal,
                            spacing: 20,
                            runSpacing: 12,
                            children: List<Widget>.generate(widget.QuizList.length,
                                    (int index) {
                                  var chipsText = widget.QuizList[index].toString();

                                  void _handleTap(int index) {
                                    setState(() {
                                      // 点击逻辑：已存在则移除，不存在则添加，不需要可直接改为add
                                      if(selectedWords.contains(chipsText)){
                                        selectedWords.remove(chipsText);
                                      }else{
                                        selectedWords.add(chipsText);
                                      }
                                    });
                                  }

                                  return GestureDetector(
                                      onTap: () {
                                        _handleTap(index);
                                      },
                                      child: Chip(
                                        label: Text(
                                          chipsText,
                                          style: TextStyle(
                                              fontSize: 20.sp,
                                              color: Colors.white,
                                              fontWeight: FontWeight.bold),
                                        ),
                                        backgroundColor: selectedWords.contains(chipsText) ? Colors.pinkAccent : Color(0xFF50CFFD),
                                      ));
                                }),
                          )),
                      const Spacer(),
                      // 下方文本展示区域
                      Container(
                        width: 100.w - 80,
                        margin: const EdgeInsets.only(bottom: 20, left: 40, right: 40),
                        child: Text(
                          // 用空格拼接所有选中的文本
                          selectedWords.join(" "),
                          softWrap: true,
                          maxLines: null,
                          style: TextStyle(
                              fontSize: 20.sp,
                              color: Color(0xFF50CFFD),
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                      // 下划线
                      Padding(
                        padding: const EdgeInsets.only(bottom: 155, left: 30, right: 30),
                        child: Divider(
                          thickness: 5,
                          color: Colors.pinkAccent,
                        ),
                      ),
                    ],
                  ),
                );
              }
              return const Center(child: CircularProgressIndicator());
            }));
  }
}

额外配置说明 #

如果不需要点击取消选中的逻辑，直接把_handleTap里的判断逻辑替换为selectedWords.add(chipsText)即可；如果需要点击Chip替换展示内容而非累加，只需要把selectedWords改为单个字符串变量，点击时直接赋值即可。

内容的提问来源于stack exchange，提问作者LearnFlutter