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

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