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

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,
        ),
      ),
    ],
  );

但是我不确定如何将底部引号与文本的底部对齐（目前位于顶部）。

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

Answer 2

您始终可以执行 Column -> [Expanded(text), Expanded(Container(), Expanded(text)] 并根据需要调整空白框的 Flex。

还有容器（或列/行）-> 堆栈-> [列（mainAxis 开始），列（mainAxis 结束）]。

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