多行颤动文本字段占据所有灵活空间，右填充丑陋

Posted 2023-02-23

【中文标题】多行颤动文本字段占据所有灵活空间，右填充丑陋

【英文标题】：Multi-line flutter text field occupies all of Flexible space with ugly right padding

【发布时间】：2021-05-16 17:26:23

【问题描述】：

我正在 Flutter 应用中构建聊天气泡，它触发了我内心的完美主义者。显示来自另一个聊天用户的传入消息的主要代码是：

  Widget getOtherUserMessageRow() 
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        message.cm.senderIsSameAsPreviousOnSameDay(AppState.i.activeUserId)
          ? SizedBox(width: AppState.i.chatItemOtherUserLeftInset)  // If sender is previous message sender on same day, don't repeat avatar
          : message.getCreatorAvatar(),
        SizedBox(width: AppState.i.chatItemOtherUserAvatarRightPadding),  // Leave fixed gap for other messages
        Flexible(
          fit: FlexFit.loose,
          child: message.cm.messageType.getMessageWidget(message),
        ),
        SizedBox(width: AppState.i.chatItemOtherUserMessageRightPadding),  // Fixed gap for non-user messages
      ],
    );
  

然后我们有了创建气泡的代码，通过 message.cm.messageType.getMessageWidget(message) 间接调用：

  Widget build(BuildContext context) 
    bool isFromAppUser = message.cm.isFromAppUser(AppState.i.activeUserId);

    return Container(
      padding: EdgeInsets.symmetric(
        vertical: AppState.i.chatItemMessageVerticalInset),
      child:
      Container(
        decoration: BoxDecoration(
          color: isFromAppUser ? AppState.i.chatItemUserMessageBackgroundColour : Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(isFromAppUser ? AppState.i.chatItemMessageBorderRadius : 0),
            topRight: Radius.circular(isFromAppUser ? 0 : AppState.i.chatItemMessageBorderRadius),
            bottomRight: Radius.circular(isFromAppUser ? AppState.i.chatItemMessageCurvedBorderRadius : AppState.i.chatItemMessageBorderRadius),
            bottomLeft: Radius.circular(isFromAppUser ? AppState.i.chatItemMessageBorderRadius : AppState.i.chatItemMessageCurvedBorderRadius),
          ),
          boxShadow: [
                BoxShadow(
                  color: AppState.i.chatItemMessageBoxShadowColour,
                  spreadRadius: AppState.i.chatItemMessageBoxShadowSpreadRadius,
                  blurRadius: AppState.i.chatItemMessageBoxShadowBlurRadius,
                  offset: AppState.i.chatItemMessageBoxShadowOffset, // changes position of shadow
                ),
              ],                
        ),
        padding: EdgeInsets.symmetric(
            vertical: AppState.i.chatItemMessageVerInset,
            horizontal: AppState.i.chatItemMessageHorInset),
        child: Text(
                message.cm.messageText,
                style: TextStyle(
                  fontSize: AppState.i.chatItemMessageTextFontSize,
                  color:
                      isFromAppUser ? AppState.i.chatItemMessageUserTextFontColour : AppState.i.chatItemMessageOtherUserTextFontColour,
                )
              ),
        ),
    );
  

所以我得到的是这个......

单行 - 工作正常不使用所有水平空间。

多行 - 使用所有可用的水平空间，直到右侧大小的框，并带有丑陋的右侧环绕：

多行另一个（坏）例子：

所以我真正想要的是：

有什么想法吗？我有点认为这是不可能的，因为 TextField 必须根据它的内部包装智能地调整水平适合度。但我愿意被你的布局大师证明不是这样的:-)

【参考方案1】：

您在寻找Paragraph.longestLine 的房产吗？

Text(
  textWidthBasis: TextWidthBasis.longestLine,
  ...
)

【讨论】：

您先生，真是个天才。这就是我喜欢这个网站的原因。如果可以的话，我会支持你 5 万次。我内心的完美主义者得到了安抚。现在我只需要弄清楚如何将它与我在堆栈中添加消息时间戳的非常可疑的方式集成，哈哈。

提出了一个关于添加消息时间戳的新问题，如果您愿意接受挑战 :-) ***.com/questions/66201124/…