BoxConstraints 导致 TextBox 由于换行而未与 Text 对齐。颤动布局

Question

我有一个关于 flutter 的 ui/ux 布局问题。 在我的文本旁边，我看到一个不应该存在的空白。我在图片中用红色标记了它。

我认为这是我在容器内设置的约束造成的。 我怎样才能将文本框与实际文本对齐？

我的一些想法是Flexible、FittedBox 和FractionallySizedBox。但我发现它不适用于这些。

图1 图2

Align(
  alignment: Alignment.topLeft,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Padding(
        padding: EdgeInsets.fromLTRB(0, 8, 8, 0),
        child: CircleAvatar(
          radius: 20,
          backgroundImage: NetworkImage(
            'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
          ),
        ),
      ),
      Column(
        crossAxisAlignment:
            CrossAxisAlignment.start,
        children: [
          Container(
            constraints: BoxConstraints(
              maxWidth: MediaQuery.of(context)
                      .size
                      .width *
                  0.7,
            ),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius:
                  BorderRadius.circular(12),
            ),
            child: Column(
              crossAxisAlignment:
                  CrossAxisAlignment.start,
              children: [
                Padding(
                  padding:
                      const EdgeInsets.fromLTRB(
                    10,
                    10,
                    15,
                    5,
                  ),
                  child: Text(
                    messages[i].name,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.blue,
                    ),
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.fromLTRB(
                    16,
                    0,
                    16,
                    16,
                  ),
                  child: Text(
                    messages[i].message,
                    softWrap:
                        true, // Allow text to wrap
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(7),
            child: Text(
              '${messages[i].timestamp.hour < 10 ? '0${messages[i].timestamp.hour}' : messages[i].timestamp.hour}:${messages[i].timestamp.minute < 10 ? '0${messages[i].timestamp.minute}' : messages[i].timestamp.minute}',
              style: const TextStyle(
                color: Colors.grey,
                fontSize: 12,
              ),
            ),
          )
        ],
      ),
    ],
  ),
)

感谢您的帮助！

Answer 1

使用

Flexible

小部件尝试此操作，看看它是否有效。

试试这个：

Align(
  alignment: Alignment.topLeft,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Padding(
        padding: EdgeInsets.fromLTRB(0, 8, 8, 0),
        child: CircleAvatar(
          radius: 20,
          backgroundImage: NetworkImage(
            'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
          ),
        ),
      ),
      Flexible( 
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(10),
                    child: Text(
                      messages[i].name,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: Text(
                      messages[i].message,
                      softWrap: true,
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(7),
              child: Text(
                '${messages[i].timestamp.hour < 10 ? '0${messages[i].timestamp.hour}' : messages[i].timestamp.hour}:${messages[i].timestamp.minute < 10 ? '0${messages[i].timestamp.minute}' : messages[i].timestamp.minute}',
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 12,
                ),
              ),
            )
          ],
        ),
      ),
    ],
  ),
);

P.S：您可能需要根据所需的输出调整填充参数。