如何使Flutter中的聊天气泡灵活，以避免溢出

huangapple
go评论96阅读模式
英文:

How to make this chat bubble flexible in flutter to avoid overflow

问题

以下是代码的中文翻译部分：

class MessageThread extends StatelessWidget {
  const MessageThread({
    super.key,
    required this.message,
    required this.time,
    required this.isMe,
    this.readed = false,
  });

  final String message;
  final String time;
  final bool isMe;
  final bool readed;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: isMe
          ? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
          : const EdgeInsets only(left: 30, top: 10, bottom: 10),
      child: Row(
        mainAxisAlignment:
            isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Column(
            mainAxisAlignment:
                isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
            crossAxisAlignment:
                isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
            children: [
              LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  return Container(
                    constraints: BoxConstraints(
                      maxWidth: constraints.maxWidth,
                    ),
                    decoration: BoxDecoration(
                      color: isMe ? null : AppColor.userChatBox,
                      gradient: isMe ? AppColor.bgColor : null,
                      borderRadius: isMe
                          ? const BorderRadius.only(
                              topLeft: Radius.circular(15),
                              topRight: Radius.circular(15),
                              bottomLeft: Radius.circular(15),
                            )
                          : const BorderRadius.only(
                              topLeft: Radius.circular(15),
                              topRight: Radius.circular(15),
                              bottomRight: Radius.circular(15),
                            ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(18.0),
                      child: Text(
                        message,
                        style: TextStyle(color: isMe ? Colors.white : null),
                      ),
                    ),
                  );
                },
              ),
              Constants.height10,
              Padding(
                padding: isMe
                    ? const EdgeInsets.only(right: 10)
                    : const EdgeInsets.only(left: 10),
                child: Row(
                  children: [
                    Text(
                      time,
                      style: const TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                    const SizedBox(width: 5),
                    if (isMe)
                      if (readed)
                        const Icon(
                          Icons.done_all,
                          color: AppColor.blue,
                          size: 20,
                        )
                  ],
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

当处理长文本时出现溢出问题，您可以使用以下方法来使它具有动态宽度，以解决此问题：

  1. 使用Wrap小部件替换Row以允许文本自动换行。
  2. 使用Flexible小部件包装文本以根据内容自动调整宽度。
  3. 如果需要，可以添加最大宽度以限制文本框的宽度。

这样，无论文本内容是长还是短，它都会根据其内容动态调整宽度，而不会导致溢出。

英文:

here is the chat bubble that i created on my own in flutter, i tried using packages like chat_bubbles but i can't use gradient colours on that, so i created this widget. here is the code

class MessageThread extends StatelessWidget {
const MessageThread({
super.key,
required this.message,
required this.time,
required this.isMe,
this.readed = false,
});
final String message;
final String time;
final bool isMe;
final bool readed;
@override
Widget build(BuildContext context) {
return Padding(
padding: isMe
? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
: const EdgeInsets.only(left: 30, top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Column(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
decoration: BoxDecoration(
color: isMe ? null : AppColor.userChatBox,
gradient: isMe ? AppColor.bgColor : null,
borderRadius: isMe
? const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
)
: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
message,
style: TextStyle(color: isMe ? Colors.white : null),
),
),
);
},
),
Constants.height10,
Padding(
padding: isMe
? const EdgeInsets.only(right: 10)
: const EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
time,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(width: 5),
if (isMe)
if (readed)
const Icon(
Icons.done_all,
color: AppColor.blue,
size: 20,
)
],
),
)
],
),
],
),
);
}
}

but when it comes to long text it's causing an overflow, here is the example

如何使Flutter中的聊天气泡灵活，以避免溢出

i can set fixed width to solve this, but if user text small text like 'Hi', it'll look weird in long width, so how do i make it dynamic.
how do i fix this?

答案1

得分: 1

请参考以下代码：

import 'package:flutter/cupertino.dart';

class MessageThread extends StatelessWidget {
  const MessageThread({
    super.key,
    required this.message,
    required this.time,
    required this.isMe,
    this.readed = false,
  });

  final String message;
  final String time;
  final bool isMe;
  final bool readed;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: isMe
          ? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
          : const EdgeInsets.only(left: 30, top: 10, bottom: 10),
      child: Row(
        mainAxisAlignment:
        isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment:
              isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
              crossAxisAlignment:
              isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
              children: [
                LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    return Container(
                      constraints: BoxConstraints(
                        maxWidth: constraints.maxWidth,
                      ),
                      decoration: BoxDecoration(
                        color: isMe ? null : AppColor.userChatBox,
                        gradient: isMe ? AppColor.bgColor : null,
                        borderRadius: isMe
                            ? const BorderRadius.only(
                          topLeft: Radius.circular(15),
                          topRight: Radius.circular(15),
                          bottomLeft: Radius.circular(15),
                        )
                            : const BorderRadius.only(
                          topLeft: Radius.circular(15),
                          topRight: Radius.circular(15),
                          bottomRight: Radius.circular(15),
                        ),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text(
                          message,
                          style: TextStyle(color: isMe ? Colors.white : null),
                        ),
                      ),
                    );
                  },
                ),
                Constants.height10,
                Padding(
                  padding: isMe
                      ? const EdgeInsets only(right: 10)
                      : const EdgeInsets.only(left: 10),
                  child: Row(
                    children: [
                      Text(
                        time,
                        style: const TextStyle(
                          color: Colors.grey,
                        ),
                      ),
                      const SizedBox(width: 5),
                      if (isMe)
                        if (readed)
                          const Icon(
                            Icons.done_all,
                            color: AppColor.blue,
                            size: 20,
                          )
                    ],
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

请注意，代码中的一些变量和样式可能需要根据您的应用程序的实际需求进行调整。

英文:

Try this :

import 'package:flutter/cupertino.dart';
class MessageThread extends StatelessWidget {
const MessageThread({
super.key,
required this.message,
required this.time,
required this.isMe,
this.readed = false,
});
final String message;
final String time;
final bool isMe;
final bool readed;
@override
Widget build(BuildContext context) {
return Padding(
padding: isMe
? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
: const EdgeInsets.only(left: 30, top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Expanded(
child: Column(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
decoration: BoxDecoration(
color: isMe ? null : AppColor.userChatBox,
gradient: isMe ? AppColor.bgColor : null,
borderRadius: isMe
? const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
)
: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
message,
style: TextStyle(color: isMe ? Colors.white : null),
),
),
);
},
),
Constants.height10,
Padding(
padding: isMe
? const EdgeInsets.only(right: 10)
: const EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
time,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(width: 5),
if (isMe)
if (readed)
const Icon(
Icons.done_all,
color: AppColor.blue,
size: 20,
)
],
),
)
],
),
),
],
),
);
}
}

huangapple
  • 本文由 发表于 2023年4月11日 15:53:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/75983599.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定