我有一个聊天功能，我可以在其中传递文本，并将其显示在聊天气泡中以进行问答。聊天功能传递的答案有时可能是大量文本（就像在 Whatsapp 中一样），因此需要阅读更多功能，以便只有当他们想阅读时，他们才可以单击按钮并阅读。但是下面的代码，当我单击“阅读更多”时，不会动态更改聊天气泡的大小。
Widget _buildChatBubble(String text, {required bool isQuestion}) {
final double borderRadiusValue = 20.0;
final int maxTextLengthToShow = 200;
bool isTextTooLong = text.length > maxTextLengthToShow;
bool showFullText = false;
return Consumer<ThemeProvider>(
builder: (context, themeProvider, _) {
final String avatarImage = themeProvider.isIconSelected
? 'images/chatbot_icon4.jpg'
: 'images/chatbot_icon4.jpg';
if (!isQuestion) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Container(
margin: EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.centerLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(left: 12.0, right: 5.0),
child: CircleAvatar(
radius: 20,
backgroundImage: AssetImage(avatarImage),
backgroundColor: Colors.transparent,
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: Container(
constraints: BoxConstraints(
maxWidth: 230.0,
),
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: themeProvider.themeData.colorScheme.onError,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(borderRadiusValue),
bottomRight: Radius.circular(borderRadiusValue),
topRight: Radius.circular(borderRadiusValue),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text.length > maxTextLengthToShow
? text.substring(0, maxTextLengthToShow) +
"..."
: text,
style: TextStyle(
color: CustomColor.whiteColor,
fontSize: 16.0,
),
),
if (isTextTooLong)
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
print('Read More button pressed');
setState(() {
showFullText = !showFullText;
});
},
child: Text(
showFullText ? 'Read Less' : 'Read More',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
IconButton(
onPressed: () {
_copyToClipboard(text);
},
icon: const Icon(
size: 20.0,
Icons.content_copy_rounded,
color: Colors.white,
),
),
IconButton(
onPressed: () {
_speak(text);
},
icon: Icon(
size: 20.0,
Icons.volume_up_sharp,
color: Colors.white,
),
),
],
),
],
),
),
),
],
),
),
Row(
children: [
SizedBox(width: MediaQuery.of(context).size.width * 0.12),
Padding(
padding: EdgeInsets.symmetric(horizontal: 12.0),
child: Text(
DateFormat.yMd().add_jm().format(DateTime.now()),
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 12.0,
),
),
),
],
),
SizedBox(height: MediaQuery.of(context).size.height * 0.02),
],
);
} else {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Container(
margin: EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.centerRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Container(
constraints: BoxConstraints(
maxWidth: 230.0,
),
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: themeProvider
.themeData.colorScheme.onBackground,
borderRadius: BorderRadius.only(
topRight: Radius.circular(borderRadiusValue),
bottomRight:
Radius.circular(borderRadiusValue * 0.1),
bottomLeft: Radius.circular(borderRadiusValue),
topLeft: Radius.circular(borderRadiusValue),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
style: TextStyle(
color: themeProvider
.themeData.colorScheme.onPrimary,
fontSize: 16.0,
),
),
],
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 12.0),
child: Text(
DateFormat.yMd().add_jm().format(DateTime.now()),
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 12.0,
),
),
),
],
);
}
},
);
}
请告诉我你们会采取什么措施来解决这个问题？真的很感激！！:-)
我使用的最大文本长度超过200，然后缩短聊天气泡，这有效。问题是，当我单击“阅读更多”时，它不会调整大小，以便我可以阅读整个文本容器。我希望它能够动态更改“阅读更多”和“阅读更少”选项。
问题是您尚未在构建函数上方添加 showFullText 变量，并根据 showFullText 变量更改更改“阅读更多”和“阅读更少”代码逻辑。
我对您的代码做了一些更改，并使其与设置状态一起使用。
请按照以下代码操作。
代码：
The issue is you haven’t added showFullText Variable above build function and change Read More and Read less code Logic as per showFullText variable change.
I have done a couple of changes in your code & make it working with the use of set state.
Please follow the below code.
Code:
class _BuildChatBubbleState extends State<BuildChatBubble> {
bool showFullText = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: _buildChatBubble(
"Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
isQuestion: false,
context));
}
Widget _buildChatBubble(String text, BuildContext context,
{required bool isQuestion}) {
const double borderRadiusValue = 20.0;
const int maxTextLengthToShow = 100;
bool isTextTooLong = text.length > maxTextLengthToShow;
//bool showFullText = false;
//final String avatarImage = 'drawable/ic_clipboard.png';
if (!isQuestion) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Container(
margin: const EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.centerLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const Padding(
padding: EdgeInsets.only(left: 12.0, right: 5.0),
child: CircleAvatar(
radius: 20,
//backgroundImage: AssetImage(avatarImage),
backgroundColor: Colors.transparent,
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: Container(
constraints: const BoxConstraints(
maxWidth: 230.0,
),
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(borderRadiusValue),
bottomRight: Radius.circular(borderRadiusValue),
topRight: Radius.circular(borderRadiusValue),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
//maxLines: 300,
showFullText
? text
: (text.length > maxTextLengthToShow
? "${text.substring(0, maxTextLengthToShow)}..."
: text),
maxLines: showFullText
? null
: text
.length, // Set maxLines to null when showing full text
style: const TextStyle(
color: BaseColors.whiteColor,
fontSize: 16.0,
),
),
if (isTextTooLong)
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
print('Read More button pressed');
showFullText = !showFullText;
setState(() {});
},
child: Text(
//showFullText ? 'Read Less' : 'Read More',
showFullText == true
? "Read Less"
: "Read More",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
//),
),
),
IconButton(
onPressed: () {
// _copyToClipboard(text);
},
icon: const Icon(
size: 20.0,
Icons.content_copy_rounded,
color: Colors.white,
),
),
IconButton(
onPressed: () {
//_speak(text);
},
icon: const Icon(
size: 20.0,
Icons.volume_up_sharp,
color: Colors.black,
),
),
],
),
],
),
),
),
],
),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.02),
],
);
} else {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Container(
margin: const EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.centerRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Container(
constraints: const BoxConstraints(
maxWidth: 230.0,
),
padding: const EdgeInsets.all(12.0),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(borderRadiusValue),
bottomRight: Radius.circular(borderRadiusValue * 0.1),
bottomLeft: Radius.circular(borderRadiusValue),
topLeft: Radius.circular(borderRadiusValue),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
style: const TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
],
),
),
),
),
],
),
)
],
);
}
}
}