请教个关于聊天界面的问题

[hukejia]

使用 ListView reverse + Align alignment ：TopCenter 的方式实现聊天列表，有个问题
当消息不满一屏的时候，点击发送会执行，关闭键盘-> 添加消息
添加消息消息会往上顶，随着键盘关闭，ListView高度慢慢变大，消息下移，会导致视觉上消息有一个明显的先向上，再向下的跳跃
Align+ListView 反转的方式最主流，可是漏洞也很明显，似乎全网都没有完美方案

[Matkurban]

建议你发送消息时不关闭键盘，因为我看微信也是这么处理的

[LinXunFeng]

请附上录屏和复现问题的示例代码，光看描述不太好理解

[Matkurban]

Screenrecording_20260422_162356.mp4

[hukejia]

建议你发送消息时不关闭键盘，因为我看微信也是这么处理的

聊天会连续发送，可以不关闭键盘，但是像ai问答的都是发送就会关闭键盘，还有不满一屏的时候靠底部也不会有这个问题，可是需求如此，码农很无奈

[Matkurban]

建议你发送消息时不关闭键盘，因为我看微信也是这么处理的

聊天会连续发送，可以不关闭键盘，但是像ai问答的都是发送就会关闭键盘，还有不满一屏的时候靠底部也不会有这个问题，可是需求如此，码农很无奈

我记得Scaffold组件有一个属性resizeToAvoidBottomInset是控制键盘弹出来是键盘下方的容器是否受键盘高度影响的，可以使用这个属性解决，但是这样设置的话你的输入框的显示位置就要你自己来控制

[hukejia]

请附上录屏和复现问题的示例代码，光看描述不太好理解

Widget _buildListView() {
Widget resultWidget = ListView.builder(
// 内含处理保持IM消息位置的核心逻辑
physics: ChatObserverClampingScrollPhysics(observer: chatObserver),
padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 15),
// 切换滚动视图的高度模式，当消息不满一屏时，该值为 true，使消息在顶部展示，
// 消息超一屏时为 false，消息在底部展示，chatObserver 内部会适时变更该值
// 如果你希望一直都是底部展示，可以注释该行
shrinkWrap: chatObserver.isShrinkWrap,
// 消息从底部往上开始排序，所以来新消息时应该插入到 0 的位置
reverse: true,
controller: scrollController,
itemBuilder: ((context, index) {
return ChatItemWidget(...);
}),
itemCount: chatModels.length,
);

// 对滚动视图监听
resultWidget = ListViewObserver(
controller: observerController,
child: resultWidget,
);

// 重点，如果你希望不满一屏时在顶部展示消息，而又不生效时，
// 记得如下所示设置 alignment 为 Alignment.topCenter
resultWidget = Align(
child: resultWidget,
alignment: Alignment.topCenter,
);
return resultWidget;
}

使用这种方式布局，外面包裹Expaned，消息不满一屏的时候，键盘弹起的时候发送并且关闭键盘就能重现，跟这个库应该没有关系，使用这种布局方式就会有这个问题

[hukejia]

建议你发送消息时不关闭键盘，因为我看微信也是这么处理的

聊天会连续发送，可以不关闭键盘，但是像ai问答的都是发送就会关闭键盘，还有不满一屏的时候靠底部也不会有这个问题，可是需求如此，码农很无奈

我记得Scaffold组件有一个属性resizeToAvoidBottomInset是控制键盘弹出来是键盘下方的容器是否受键盘高度影响的，可以使用这个属性解决，但是这样设置的话你的输入框的显示位置就要你自己来控制

可以这样设置，但是如果键盘不影响消息容器高度，那会诞生无数新的问题

[Matkurban]

import 'package:kurban_open_im/services/service_locator.dart';
import 'package:signals/signals_flutter.dart';
import 'package:flutter/material.dart';
import 'package:openim_sdk/openim_sdk.dart';

import 'package:kurban_open_im/constant/constants.dart';
import 'package:kurban_open_im/l10n/app_localizations.dart';
import 'package:kurban_open_im/pages/chat/chat_drawer.dart';
import 'package:kurban_open_im/pages/chat/chat_logic.dart';
import 'package:kurban_open_im/pages/chat/widgets/bottom_widget/chat_bottom_record_effect_widget.dart';
import 'package:kurban_open_im/pages/chat/widgets/bottom_widget/chat_bottom_status_widget.dart';
import 'package:kurban_open_im/pages/chat/widgets/message_item.dart';
import 'package:kurban_open_im/utils/platform_util.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

class ChatView extends StatefulWidget {
  const ChatView({super.key, required this.conversationInfo, this.searchMessage});

  final ConversationInfo conversationInfo;

  final Message? searchMessage;

  @override
  State<ChatView> createState() => _ChatViewState();
}

class _ChatViewState extends State<ChatView> {
  late ChatLogic controller;

  @override
  void initState() {
    super.initState();
    controller = ChatLogic(widget.conversationInfo, widget.searchMessage);
    sl.registerSingleton<ChatLogic>(
      controller,
      instanceName: widget.conversationInfo.conversationID,
    );
  }

  @override
  void dispose() {
    sl.unregister<ChatLogic>(instanceName: widget.conversationInfo.conversationID);
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.sizeOf(context);
    final ThemeData theme = Theme.of(context);
    final TextTheme textTheme = theme.textTheme;
    final ColorScheme colorScheme = theme.colorScheme;
    final AppLocalizations appLocalizations = AppLocalizations.of(context)!;
    controller.fixLayout(context);
    return PopScope<String>(
      canPop: PlatformUtil.isMobile(context) ? controller.inputController.text.isNotEmpty : true,
      onPopInvokedWithResult: controller.onPopInvokedWithResult,
      child: Scaffold(
        key: controller.scaffoldKey,
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: Watch((ctx) {
            return Visibility(
              visible: !controller.showSelect.value,
              replacement: Watch((ctx) {
                return Text(
                  controller.selectMessages.isNotEmpty
                      ? appLocalizations.selectedMessages(controller.selectMessages.length)
                      : appLocalizations.selectMessages,
                );
              }),
              child: Watch((ctx) {
                return Text(
                  controller.groupMemberCount.value > 0
                      ? '${controller.title}(${controller.groupMemberCount.value.toString()})'
                      : controller.title,
                );
              }),
            );
          }),
          leading: Row(
            children: [
              Watch((ctx) {
                return Visibility(
                  visible: controller.showSelect.value,
                  replacement: PlatformUtil.isMobile(context)
                      ? const BackButton()
                      : const SizedBox.shrink(),
                  child: TextButton(
                    onPressed: controller.onCancelSelect,
                    style: TextButton.styleFrom(
                      tapTargetSize: .shrinkWrap,
                      visualDensity: .compact,
                    ),
                    child: Text(appLocalizations.cancel),
                  ),
                );
              }),
            ],
          ),
          actions: [
            Watch((ctx) {
              return Visibility(
                visible:
                    !controller.showSelect.value &&
                    controller.groupStatus.value != .dismissed &&
                    controller.conversation.value.conversationType != ConversationType.notification,
                child: IconButton(
                  icon: const Icon(Icons.more_horiz),
                  onPressed: () => controller.toContactProfile(context),
                ),
              );
            }),
          ],
          bottom: PreferredSize(
            preferredSize: Size(size.width, 2),
            child: Watch((ctx) {
              return Visibility(
                visible: controller.isLoadingHistoryMessages.value,
                child: const LinearProgressIndicator(minHeight: 2),
              );
            }),
          ),
        ),
        body: OverlayPortal(
          controller: controller.recordEffectOverlayController,
          overlayChildBuilder: (BuildContext context) {
            return ChatBottomRecordEffectWidget(
              effectController: controller.recordEffectOverlayController,
            );
          },
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Stack(
                children: [
                  Align(
                    alignment: Alignment.topCenter,
                    child: Watch((ctx) {
                      final List<Message> messages = controller.messages.toList();
                      return ListViewObserver(
                        controller: controller.chatListObserver,
                        child: ListView.builder(
                          reverse: true,
                          controller: controller.scrollController,
                          cacheExtent: size.height,
                          physics: ChatObserverClampingScrollPhysics(
                            observer: controller.chatScrollObserver,
                          ),
                          shrinkWrap: controller.messages.length < 20
                              ? controller.chatScrollObserver.isShrinkWrap
                              : false,
                          itemCount: controller.messages.length,
                          itemBuilder: (BuildContext context, int index) {
                            final Message message = messages.elementAt(index);
                            final UserInfo self = controller.getSelf;
                            bool isMe = message.sendID == self.userID;
                            return RepaintBoundary(
                              child: Watch((ctx) {
                                return MessageItem(
                                  key: ValueKey(message.clientMsgID),
                                  message: message,
                                  self: self,
                                  isMe: isMe,
                                  showNickname: controller.isGroupChat,
                                  backgroundColor: backgroundColor(isMe, colorScheme),
                                  foregroundColor: foregroundColor(isMe, colorScheme),
                                  textTheme: textTheme,
                                  colorScheme: colorScheme,
                                  size: Size(constraints.maxWidth, constraints.maxHeight),
                                  timeline: getShowTime(message),
                                  onUserTap: (value) =>
                                      controller.onUserTap(userID: value, context: context),
                                  onTapQuote: () => controller.onTapQuote(message),
                                  onTapForward: () => controller.onTapForward(message),
                                  onTapFavorite: () => controller.onTapFavorite(message),
                                  onTapDelete: () => controller.onTapDelete(message),
                                  onTapCheck: () => controller.onTapCheck(message),
                                  onTapRevoke: () => controller.onTapRevoke(message),
                                  showSelect: controller.showSelect.value,
                                  selected: controller.selectMessages.contains(message),
                                  onSelectChanged: (value) {
                                    controller.onSelectChanged(value: value, message: message);
                                  },
                                  onTapCall: (type) => controller.startCall(callType: type),
                                  onScrollToMessage: controller.scrollToQuoteMessage,
                                  conversationID: controller.conversationID,
                                  layoutConstraints: constraints,
                                );
                              }),
                            );
                          },
                        ),
                      );
                    }),
                  ),
                  Positioned(
                    bottom: 20,
                    right: 0,
                    child: Watch((ctx) {
                      final int count = controller.unreadMsgCount.value;
                      if (count <= 0) return const SizedBox.shrink();
                      return GestureDetector(
                        onTap: controller.scrollToBottomAndResetUnread,
                        child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                          decoration: BoxDecoration(
                            borderRadius: const BorderRadius.horizontal(
                              left: Radius.circular(16),
                              right: Radius.zero,
                            ),
                            color: colorScheme.surface,
                            boxShadow: chatMenuShadows(colorScheme.onSurface),
                          ),
                          child: Text(
                            appLocalizations.newMessagesCount(count),
                            style: textTheme.bodySmall?.copyWith(color: colorScheme.primary),
                          ),
                        ),
                      );
                    }),
                  ),
                ],
              );
            },
          ),
        ),
        endDrawer: PlatformUtil.isDesktop(context)
            ? Drawer(
                child: ChatDrawer(
                  key: ValueKey(controller.conversationID),
                  conversationID: controller.conversationID,
                ),
              )
            : null,
        onEndDrawerChanged: controller.onEndDrawerChanged,
        bottomNavigationBar: Visibility(
          visible: controller.conversation.value.conversationType != ConversationType.notification,
          child: ChatBottomStatusWidget(
            textTheme: textTheme,
            colorScheme: colorScheme,
            conversationID: widget.conversationInfo.conversationID,
            screenSize: size,
          ),
        ),
      ),
    );
  }
}

是的，你说的这个问题我也遇见过，但是我觉得这种方式是最优解，因为容器的高度变化而出现的上下便宜的错觉几乎每个软件中都存在。不能为了改变一个人们习惯的方式而引出更多的问题。

[Matkurban]

bottomNavigationBar 属性中设置的是我的输入框

[Matkurban]

在移动端浏览器中打开 jsontodart.cn 会访问到我使用 flutter 写的一个聊天软件，或许可能能帮助到你。

[hukejia]

import 'package:kurban_open_im/services/service_locator.dart';
import 'package:signals/signals_flutter.dart';
import 'package:flutter/material.dart';
import 'package:openim_sdk/openim_sdk.dart';

import 'package:kurban_open_im/constant/constants.dart';
import 'package:kurban_open_im/l10n/app_localizations.dart';
import 'package:kurban_open_im/pages/chat/chat_drawer.dart';
import 'package:kurban_open_im/pages/chat/chat_logic.dart';
import 'package:kurban_open_im/pages/chat/widgets/bottom_widget/chat_bottom_record_effect_widget.dart';
import 'package:kurban_open_im/pages/chat/widgets/bottom_widget/chat_bottom_status_widget.dart';
import 'package:kurban_open_im/pages/chat/widgets/message_item.dart';
import 'package:kurban_open_im/utils/platform_util.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

class ChatView extends StatefulWidget {
const ChatView({super.key, required this.conversationInfo, this.searchMessage});

final ConversationInfo conversationInfo;

final Message? searchMessage;

@OverRide
State createState() => _ChatViewState();
}

class _ChatViewState extends State {
late ChatLogic controller;

@OverRide
void initState() {
super.initState();
controller = ChatLogic(widget.conversationInfo, widget.searchMessage);
sl.registerSingleton(
controller,
instanceName: widget.conversationInfo.conversationID,
);
}

@OverRide
void dispose() {
sl.unregister(instanceName: widget.conversationInfo.conversationID);
controller.dispose();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {
final Size size = MediaQuery.sizeOf(context);
final ThemeData theme = Theme.of(context);
final TextTheme textTheme = theme.textTheme;
final ColorScheme colorScheme = theme.colorScheme;
final AppLocalizations appLocalizations = AppLocalizations.of(context)!;
controller.fixLayout(context);
return PopScope(
canPop: PlatformUtil.isMobile(context) ? controller.inputController.text.isNotEmpty : true,
onPopInvokedWithResult: controller.onPopInvokedWithResult,
child: Scaffold(
key: controller.scaffoldKey,
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Watch((ctx) {
return Visibility(
visible: !controller.showSelect.value,
replacement: Watch((ctx) {
return Text(
controller.selectMessages.isNotEmpty
? appLocalizations.selectedMessages(controller.selectMessages.length)
: appLocalizations.selectMessages,
);
}),
child: Watch((ctx) {
return Text(
controller.groupMemberCount.value > 0
? '${controller.title}(${controller.groupMemberCount.value.toString()})'
: controller.title,
);
}),
);
}),
leading: Row(
children: [
Watch((ctx) {
return Visibility(
visible: controller.showSelect.value,
replacement: PlatformUtil.isMobile(context)
? const BackButton()
: const SizedBox.shrink(),
child: TextButton(
onPressed: controller.onCancelSelect,
style: TextButton.styleFrom(
tapTargetSize: .shrinkWrap,
visualDensity: .compact,
),
child: Text(appLocalizations.cancel),
),
);
}),
],
),
actions: [
Watch((ctx) {
return Visibility(
visible:
!controller.showSelect.value &&
controller.groupStatus.value != .dismissed &&
controller.conversation.value.conversationType != ConversationType.notification,
child: IconButton(
icon: const Icon(Icons.more_horiz),
onPressed: () => controller.toContactProfile(context),
),
);
}),
],
bottom: PreferredSize(
preferredSize: Size(size.width, 2),
child: Watch((ctx) {
return Visibility(
visible: controller.isLoadingHistoryMessages.value,
child: const LinearProgressIndicator(minHeight: 2),
);
}),
),
),
body: OverlayPortal(
controller: controller.recordEffectOverlayController,
overlayChildBuilder: (BuildContext context) {
return ChatBottomRecordEffectWidget(
effectController: controller.recordEffectOverlayController,
);
},
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Watch((ctx) {
final List messages = controller.messages.toList();
return ListViewObserver(
controller: controller.chatListObserver,
child: ListView.builder(
reverse: true,
controller: controller.scrollController,
cacheExtent: size.height,
physics: ChatObserverClampingScrollPhysics(
observer: controller.chatScrollObserver,
),
shrinkWrap: controller.messages.length < 20
? controller.chatScrollObserver.isShrinkWrap
: false,
itemCount: controller.messages.length,
itemBuilder: (BuildContext context, int index) {
final Message message = messages.elementAt(index);
final UserInfo self = controller.getSelf;
bool isMe = message.sendID == self.userID;
return RepaintBoundary(
child: Watch((ctx) {
return MessageItem(
key: ValueKey(message.clientMsgID),
message: message,
self: self,
isMe: isMe,
showNickname: controller.isGroupChat,
backgroundColor: backgroundColor(isMe, colorScheme),
foregroundColor: foregroundColor(isMe, colorScheme),
textTheme: textTheme,
colorScheme: colorScheme,
size: Size(constraints.maxWidth, constraints.maxHeight),
timeline: getShowTime(message),
onUserTap: (value) =>
controller.onUserTap(userID: value, context: context),
onTapQuote: () => controller.onTapQuote(message),
onTapForward: () => controller.onTapForward(message),
onTapFavorite: () => controller.onTapFavorite(message),
onTapDelete: () => controller.onTapDelete(message),
onTapCheck: () => controller.onTapCheck(message),
onTapRevoke: () => controller.onTapRevoke(message),
showSelect: controller.showSelect.value,
selected: controller.selectMessages.contains(message),
onSelectChanged: (value) {
controller.onSelectChanged(value: value, message: message);
},
onTapCall: (type) => controller.startCall(callType: type),
onScrollToMessage: controller.scrollToQuoteMessage,
conversationID: controller.conversationID,
layoutConstraints: constraints,
);
}),
);
},
),
);
}),
),
Positioned(
bottom: 20,
right: 0,
child: Watch((ctx) {
final int count = controller.unreadMsgCount.value;
if (count <= 0) return const SizedBox.shrink();
return GestureDetector(
onTap: controller.scrollToBottomAndResetUnread,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(16),
right: Radius.zero,
),
color: colorScheme.surface,
boxShadow: chatMenuShadows(colorScheme.onSurface),
),
child: Text(
appLocalizations.newMessagesCount(count),
style: textTheme.bodySmall?.copyWith(color: colorScheme.primary),
),
),
);
}),
),
],
);
},
),
),
endDrawer: PlatformUtil.isDesktop(context)
? Drawer(
child: ChatDrawer(
key: ValueKey(controller.conversationID),
conversationID: controller.conversationID,
),
)
: null,
onEndDrawerChanged: controller.onEndDrawerChanged,
bottomNavigationBar: Visibility(
visible: controller.conversation.value.conversationType != ConversationType.notification,
child: ChatBottomStatusWidget(
textTheme: textTheme,
colorScheme: colorScheme,
conversationID: widget.conversationInfo.conversationID,
screenSize: size,
),
),
),
);
}
}
是的，你说的这个问题我也遇见过，但是我觉得这种方式是最优解，因为容器的高度变化而出现的上下便宜的错觉几乎每个软件中都存在。不能为了改变一个人们习惯的方式而引出更多的问题。

这样设置，键盘弹起顶起聊天内容又会出问题，最好的办法就是不满一屏的时候就靠底部显示，可是其他原生应用没有这些问题，说服产品很麻烦，这个问题几年前碰到没找到好的方案，几年后再次碰到，依旧全网找不到好方案

[Matkurban]

import 'package:kurban_open_im/services/service_locator.dart';
import 'package:signals/signals_flutter.dart';
import 'package:flutter/material.dart';
import 'package:openim_sdk/openim_sdk.dart';
import 'package:kurban_open_im/constant/constants.dart';
import 'package:kurban_open_im/l10n/app_localizations.dart';
import 'package:kurban_open_im/pages/chat/chat_drawer.dart';
import 'package:kurban_open_im/pages/chat/chat_logic.dart';
import 'package:kurban_open_im/pages/chat/widgets/bottom_widget/chat_bottom_record_effect_widget.dart';
import 'package:kurban_open_im/pages/chat/widgets/bottom_widget/chat_bottom_status_widget.dart';
import 'package:kurban_open_im/pages/chat/widgets/message_item.dart';
import 'package:kurban_open_im/utils/platform_util.dart';
import 'package:scrollview_observer/scrollview_observer.dart';
class ChatView extends StatefulWidget {
const ChatView({super.key, required this.conversationInfo, this.searchMessage});
final ConversationInfo conversationInfo;
final Message? searchMessage;
@OverRide
State createState() => _ChatViewState();
}
class _ChatViewState extends State {
late ChatLogic controller;
@OverRide
void initState() {
super.initState();
controller = ChatLogic(widget.conversationInfo, widget.searchMessage);
sl.registerSingleton(
controller,
instanceName: widget.conversationInfo.conversationID,
);
}
@OverRide
void dispose() {
sl.unregister(instanceName: widget.conversationInfo.conversationID);
controller.dispose();
super.dispose();
}
@OverRide
Widget build(BuildContext context) {
final Size size = MediaQuery.sizeOf(context);
final ThemeData theme = Theme.of(context);
final TextTheme textTheme = theme.textTheme;
final ColorScheme colorScheme = theme.colorScheme;
final AppLocalizations appLocalizations = AppLocalizations.of(context)!;
controller.fixLayout(context);
return PopScope(
canPop: PlatformUtil.isMobile(context) ? controller.inputController.text.isNotEmpty : true,
onPopInvokedWithResult: controller.onPopInvokedWithResult,
child: Scaffold(
key: controller.scaffoldKey,
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Watch((ctx) {
return Visibility(
visible: !controller.showSelect.value,
replacement: Watch((ctx) {
return Text(
controller.selectMessages.isNotEmpty
? appLocalizations.selectedMessages(controller.selectMessages.length)
: appLocalizations.selectMessages,
);
}),
child: Watch((ctx) {
return Text(
controller.groupMemberCount.value > 0
? '${controller.title}(${controller.groupMemberCount.value.toString()})'
: controller.title,
);
}),
);
}),
leading: Row(
children: [
Watch((ctx) {
return Visibility(
visible: controller.showSelect.value,
replacement: PlatformUtil.isMobile(context)
? const BackButton()
: const SizedBox.shrink(),
child: TextButton(
onPressed: controller.onCancelSelect,
style: TextButton.styleFrom(
tapTargetSize: .shrinkWrap,
visualDensity: .compact,
),
child: Text(appLocalizations.cancel),
),
);
}),
],
),
actions: [
Watch((ctx) {
return Visibility(
visible:
!controller.showSelect.value &&
controller.groupStatus.value != .dismissed &&
controller.conversation.value.conversationType != ConversationType.notification,
child: IconButton(
icon: const Icon(Icons.more_horiz),
onPressed: () => controller.toContactProfile(context),
),
);
}),
],
bottom: PreferredSize(
preferredSize: Size(size.width, 2),
child: Watch((ctx) {
return Visibility(
visible: controller.isLoadingHistoryMessages.value,
child: const LinearProgressIndicator(minHeight: 2),
);
}),
),
),
body: OverlayPortal(
controller: controller.recordEffectOverlayController,
overlayChildBuilder: (BuildContext context) {
return ChatBottomRecordEffectWidget(
effectController: controller.recordEffectOverlayController,
);
},
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Watch((ctx) {
final List messages = controller.messages.toList();
return ListViewObserver(
controller: controller.chatListObserver,
child: ListView.builder(
reverse: true,
controller: controller.scrollController,
cacheExtent: size.height,
physics: ChatObserverClampingScrollPhysics(
observer: controller.chatScrollObserver,
),
shrinkWrap: controller.messages.length < 20
? controller.chatScrollObserver.isShrinkWrap
: false,
itemCount: controller.messages.length,
itemBuilder: (BuildContext context, int index) {
final Message message = messages.elementAt(index);
final UserInfo self = controller.getSelf;
bool isMe = message.sendID == self.userID;
return RepaintBoundary(
child: Watch((ctx) {
return MessageItem(
key: ValueKey(message.clientMsgID),
message: message,
self: self,
isMe: isMe,
showNickname: controller.isGroupChat,
backgroundColor: backgroundColor(isMe, colorScheme),
foregroundColor: foregroundColor(isMe, colorScheme),
textTheme: textTheme,
colorScheme: colorScheme,
size: Size(constraints.maxWidth, constraints.maxHeight),
timeline: getShowTime(message),
onUserTap: (value) =>
controller.onUserTap(userID: value, context: context),
onTapQuote: () => controller.onTapQuote(message),
onTapForward: () => controller.onTapForward(message),
onTapFavorite: () => controller.onTapFavorite(message),
onTapDelete: () => controller.onTapDelete(message),
onTapCheck: () => controller.onTapCheck(message),
onTapRevoke: () => controller.onTapRevoke(message),
showSelect: controller.showSelect.value,
selected: controller.selectMessages.contains(message),
onSelectChanged: (value) {
controller.onSelectChanged(value: value, message: message);
},
onTapCall: (type) => controller.startCall(callType: type),
onScrollToMessage: controller.scrollToQuoteMessage,
conversationID: controller.conversationID,
layoutConstraints: constraints,
);
}),
);
},
),
);
}),
),
Positioned(
bottom: 20,
right: 0,
child: Watch((ctx) {
final int count = controller.unreadMsgCount.value;
if (count <= 0) return const SizedBox.shrink();
return GestureDetector(
onTap: controller.scrollToBottomAndResetUnread,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(16),
right: Radius.zero,
),
color: colorScheme.surface,
boxShadow: chatMenuShadows(colorScheme.onSurface),
),
child: Text(
appLocalizations.newMessagesCount(count),
style: textTheme.bodySmall?.copyWith(color: colorScheme.primary),
),
),
);
}),
),
],
);
},
),
),
endDrawer: PlatformUtil.isDesktop(context)
? Drawer(
child: ChatDrawer(
key: ValueKey(controller.conversationID),
conversationID: controller.conversationID,
),
)
: null,
onEndDrawerChanged: controller.onEndDrawerChanged,
bottomNavigationBar: Visibility(
visible: controller.conversation.value.conversationType != ConversationType.notification,
child: ChatBottomStatusWidget(
textTheme: textTheme,
colorScheme: colorScheme,
conversationID: widget.conversationInfo.conversationID,
screenSize: size,
),
),
),
);
}
}
是的，你说的这个问题我也遇见过，但是我觉得这种方式是最优解，因为容器的高度变化而出现的上下便宜的错觉几乎每个软件中都存在。不能为了改变一个人们习惯的方式而引出更多的问题。

这样设置，键盘弹起顶起聊天内容又会出问题，最好的办法就是不满一屏的时候就靠底部显示，可是其他原生应用没有这些问题，说服产品很麻烦，这个问题几年前碰到没找到好的方案，几年后再次碰到，依旧全网找不到好方案

是的，我 在以前接单时也遇到过这样的需求，我只能使用最笨的方法计算现在的列表中的消息组件能否撑满屏幕，然后设置 topCenter 或者 bottomCenter,但是这样性能会一言难尽

[hukejia]

似乎要想做到原生那样只有重写ListView ，但是社区不太行，好像没人这么干

[Matkurban]

或许可能有人写了，只是我们没发现而已。