在行小部件中对齐文本小部件 [英] Align Text widgets in a row widget

问题描述

我一行中有3个文本小部件.

I've got a row with 3 text widgets in it.

中间的文本条目可以跨越几行，但是前两行确实很小.

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.

基本上与这张图片相似

因此，基本上第一个小部件将是开头的报价，然后是第三个小标题.

So basically the first widget would be the opening quote, then the 3rd the ending quote.

我可以在行上设置一个crossAxisAlignment来开始或结束，这将移动引号，但是它将同时移动两个引号.

I can set a crossAxisAlignment on the row to start or end and that will move the quotes, but it'll move both of them.

此刻我有这样的东西:

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

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

but I'm not sure how to align the bottom quote to the bottom of the text, at the moment it sits at the top.

推荐答案

IntrinsicHeight是您要查找的小部件.那个小部件工作正常.

IntrinsicHeight is the widget you are looking for. It's working fine with that widget.

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

这篇关于在行小部件中对齐文本小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！