在行小部件中对齐文本小部件

Question

我有一个包含3个文本小部件的行。

中间的文本输入可以跨越多行，但前两个很小。

我想要第一个小部件将文本放在行的顶部，第三个小部件将文本放在行的底部。

基本上类似于这张图片：

因此，第一个小部件将是开头引用符，第三个小部件将是结尾引用符。

我可以在该行上设置crossAxisAlignment以开始或结束，并会移动引用符，但两者都会被移动。

目前我的代码大致如下：

return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Text('"'),
      ),
      Expanded(
        child: Text(
          entry.text,
          style: style,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        color: Colors.yellow,
        child: Text(
          '”',
          textAlign: TextAlign.start,
        ),
      ),
    ],
  );

但我不确定如何将底部引用对齐到文本的底部，目前它位于顶部。

- Andrew

Answer 1

IntrinsicHeight 是您正在寻找的小部件。它与该小部件一起运作良好。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new IntrinsicHeight(
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Align(
            alignment: Alignment.topLeft,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text('"'),
            ),
          ),
          Expanded(
            child: Text(
              "The middle text entry can span several lines, but the first two will be really small. I'm wanting to have the first widget have the text at the top of the row and the 3rd widget to have the text at the bottom of the row. It's basically something similar to this image"
            ),
          ),
          new Align(
            alignment: Alignment.bottomRight,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(
                '”',
                textAlign: TextAlign.start,
              ),
            ),
          ),
        ],
        ),
      ));
  }

- Vinoth Kumar

---

我建议查阅有关IntrinsicHeight的文档： “///这个类相对昂贵，因为它在最终布局阶段之前添加了一个推测性的布局 ///避免在可能的情况下使用它。在最坏的情况下，这个小部件可能导致深度为O(N²)的布局树。” - Michał Dobi Dobrzański

Answer 2

你可以始终执行 Column -> [展开（文本），展开（容器），展开（文本）] 并根据需要调整空白框的 flex。

还有 Container（或 Column/Row）-> Stack -> [Column（mainAxis start），Column（mainAxis end）]。

工作更加智能高效。IntrinsicHeight widget 的计算成本很高，我不建议在此使用它。

- C. Lewis

Answer 3

一个想法是创建一个Stack，然后用Positioned小部件包装。将左引号定位到top:和left:，将右引号定位到bottom:和right:。并用Container包装中间文本，从MediaQuery.of(context).size.width - quoteWidth*2计算剩余大小，并将固定大小设置为容器，并在计算出的坐标处定位它。

我相信还有其他解决方案。

- Tree