多行颤动文本字段使用难看的右填充占据了所有灵活空间 [英] Multi-line flutter text field occupies all of Flexible space with ugly right padding

问题描述

我在一个扑扑的应用程序中建立了聊天气泡，这触发了我内心的完美主义者.显示来自另一个聊天用户的传入消息的主要代码是:

I'm building chat bubbles in a flutter app and it's triggered my inner perfectionist. The main code for displaying an incoming message from another chat user is:

  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)间接调用:

Then we have the code that creates the bubble, indirectly called via 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,
                )
              ),
        ),
    );
  }

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

So what I get is this...

单行-可以很好地使用所有水平空间.

Single line - works fine doesn't use all horizontal space.

多行-使用丑陋的右侧包装，使用所有可用的水平空间，直到右边的大小框:

Multi-line - uses all available horizontal space up to the sized box on the right with ugly right-hand-side wrapping:

多行另一个(错误的)示例:

Multi-line another (bad) example:

所以我真正想要的是:

有什么想法吗?我有点想这是不可能的，因为TextField必须基于其内部包装来智能地调整水平配合.但我愿意被您的布局专家证明:-)

Any ideas? I'm kinda thinking it's not possible because the TextField would have to intelligently adjust the horizontal fit based on it's internal wrapping. But I'm willing to be proven otherwise by you layout gurus :-)

推荐答案

您是否在寻找段落.longestLine 属性?

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

这篇关于多行颤动文本字段使用难看的右填充占据了所有灵活空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！