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

问题描述

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

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屋！