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

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

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

我相信还有其他解决方案

Answer 3

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

还有 Container (or Column/Row) -> Stack -> [Column(mainAxis start), Column(mainAxis end)].

更聪明地工作，而不是更努力地工作。 IntrinsicHeight 小部件在计算上很昂贵，我不建议为此使用它。

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

Align Text widgets in a row widget

flutter

flutter-layout