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

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

所以图像是我现在想要实现的，我只有上面有单词的芯片，我想当用户按下芯片时，我希望芯片中的单词显示在那里，当没有水平空间时，文本显示在新行上]点击图像

Answer 1

如果我没有错的话，你正在实现这一点：

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

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小部件(或您希望显示的任何其他文本(。

之后，设置状态，或者使用应用程序的任何状态管理方式。