我用来ListView.builder
显示消息。它基本上是 a ,如果它是当前用户,Row
我会更改。mainAxisAlignment
基本上,如果当前用户,则消息显示在右侧,否则显示在左侧。但问题是,如果消息太长,就会溢出屏幕。
我尝试将其添加overflow: TextOverflow.visible
到Text
小部件中,但它没有解决我的问题。
这是我的Widget build
:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'Chat',
style: TextStyle(
fontFamily: 'Chalet',
fontWeight: FontWeight.w300,
fontSize: widget.deviceWidth * 0.06),
),
),
backgroundColor: whitePrimary,
body: Column(
children: [
Expanded(
child: ListView.builder(
controller: _scrollController,
itemCount: _messages.length,
itemBuilder: (BuildContext context, int index) {
final message = _messages[index];
final isCurrentUser =
message.username == _currentUserUsername;
return ListTile(title: _chatRow(isCurrentUser, message));
}),
),
],
),
);
}
Widget _chatRow(bool isCurrentUser, MessageResponse message) {
// Positions the message depending on if the current user sent it or not
if (isCurrentUser) {
return SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
message.message,
overflow: TextOverflow.visible,
),
const SizedBox(width: 5),
Text(
message.username,
style: const TextStyle(color: orangePrimary),
overflow: TextOverflow.visible,
)
],
),
);
} else {
return SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [Text(message.username), Text(message.message)],
),
);
}
}
显示的消息应该显示在右侧。多行消息,第一行应该有用户名。
使用换行代替行