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

Question

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



目前，当MessageBubble包含多行时，它的外观将如下所示:



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



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

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

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,
                ),
            ),
        }
    )