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

【问题标题】：Align Text widgets in a row widget在行小部件中对齐文本小部件
【发布时间】：2018-11-08 08:29:59
【问题描述】：

我有一排有 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,
        ),
      ),
    ],
  );

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案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,
              ),
            ),
          ),
        ],
        ),
      ));
  }

【讨论】：

我建议查看有关 IntrinsicHeight 的文档：/// This class is relatively expensive, because it adds a speculative layout /// pass before the final layout phase. Avoid using it where possible. In the /// worst case, this widget can result in a layout that is O(N²) in the depth of /// the tree.

【解决方案2】：

你总是可以做 Column -> [Expanded(text), Expanded(Container(), Expanded(text)] 并根据需要调整空白框的弹性。

还有容器（或列/行）-> 堆栈-> [Column(mainAxis start), Column(mainAxis end)]。

更聪明地工作，而不是更努力地工作。 IntrinsicHeight 小部件的计算成本很高，我不建议为此使用它。

【讨论】：

【解决方案3】：

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

我相信还有其他解决方案

【讨论】：