Question

我正在尝试为消息传递应用程序构建MessageBubble。这是我的MessageBubble包含一行时的样子：

目前，MessageBubble包含多行内容时将如下所示：

但是我想确定在构建过程中是否在文本中显示两行或更多行，所以我可以像这样将必要的填充添加到顶部和底部（这是硬编码的示例）： / p>

在构建过程中，是否有办法获取显示的行数或每行的宽度，然后我可以决定是否在底部和顶部添加一些填充？

到目前为止，这是我的代码：

import 'package:flutter/material.dart';

class BubbleTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.grey[350],
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
      ),
      child: Padding(
        padding: EdgeInsets.only(right: 15.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            CircleAvatar(
              backgroundColor: Colors.grey,
              child: Icon(
                Icons.person,
                color: Colors.white,
              ),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: 40.0,
                maxWidth: 250.0,
              ),
              child: Align(
                heightFactor: 1,
                widthFactor: 1,
                alignment: Alignment.center,
                child: Padding(
                  padding: EdgeInsets.only(left: 15.0),
                  child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus libero, molestie vitae dui non, venenatis maximus sem.',
                    style: TextStyle(
                      fontSize: 18.0,
                    ),
                    textWidthBasis: TextWidthBasis.longestLine,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

如果不确定如何根据大小来布局窗口小部件，可以使用LayoutBuilder。

 LayoutBuilder(
     builder: (context, constraints){
          Padding(
    //based on size if you want to put up your spacing then
                  padding: (constraints.maxHeight < 20)? EdgeInsets.only(left: 15.0): EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
                  child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus libero, molestie vitae dui non, venenatis maximus sem.',
                    style: TextStyle(
                      fontSize: 18.0,
                    ),
                    textWidthBasis: TextWidthBasis.longestLine,
                ),
            ),
        }
    )

Answer 2

我找到了一种方法，可以解决在将填充应用于MessageBubble之前获取Text小部件的实际宽度的需求。相反，我可以向Alignment小部件添加一些常量填充，如下所示：

Padding(
  padding: EdgeInsets.symmetric(vertical: 8.0),
  child: Align(
    heightFactor: 1,
    widthFactor: 1,
    alignment: Alignment.center,
    child: Padding(
      padding: EdgeInsets.only(
        left: 15.0,
      ),
      child: Text(
        text,
        style: TextStyle(
            fontSize: 18.0,
            color: isFromCurrentUser
                ? Colors.white
                : Colors.black),
      ),
    ),
  ),
),

输出：

如果我想让MessageBubble适应不同的文本大小，则可以使CircleAvatar的大小取决于文本的大小。如果文本很大，CircleAvatar的大小可能会增加，因此在MessageBubble中仍会居中放置一行文本

如何在渲染之前获取文本小部件的宽度

2 个答案: