Flutter 对齐行小部件中的文本小部件

Flutter 对齐行小部件中的文本小部件,flutter,flutter-layout,Flutter,Flutter Layout,我有一行有3个文本小部件 中间的文本条目可以跨越几行,但前两行非常小 我想让第一个小部件将文本放在行的顶部,第三个小部件将文本放在行的底部 这基本上与这张图片相似 因此,基本上第一个小部件是开始引用,然后第三个是结束引用 我可以将行上的crossAxisAlignment设置为“开始”或“结束”,这将移动引号,但会同时移动它们 目前,我有这样的想法: return Row( crossAxisAlignment: CrossAxisAlignment.start, childr

我有一行有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,
        ),
      ),
    ],
  );
返回行(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
容器(
填充:常量边集。对称(水平:10.0),
子项:文本(“”),
),
扩大(
子:文本(
entry.text,
风格:风格,
),
),
容器(
填充:常量边集。对称(水平:10.0),
颜色:颜色,黄色,
子:文本(
'”',
textAlign:textAlign.start,
),
),
],
);

但我不确定如何将底部引号与文本底部对齐,因为它位于顶部。

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(
孩子:排(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
新对齐(
对齐:alignment.topLeft,
子:容器(
填充:常量边集。对称(水平:10.0),
子项:文本(“”),
),
),
扩大(
子:文本(
“中间的文本条目可以跨越几行,但前两行非常小。我希望第一个小部件的文本位于行的顶部,第三个小部件的文本位于行的底部。它基本上类似于此图像”
),
),
新对齐(
对齐:对齐。右下角,
子:容器(
填充:常量边集。对称(水平:10.0),
子:文本(
'”',
textAlign:textAlign.start,
),
),
),
],
),
));
}

一个想法是创建一个堆栈,而不是用
定位的
小部件包装
文本()。将左引号置于
顶部:
左侧:
位置,将右引号置于
底部:
右侧:
。并用
容器
包装中间文本,从
MediaQuery.of(context).size.width-qoootewidth*2
计算剩余大小,将固定大小设置为容器,并将其放置在计算出的坐标处


<>我确信还有其他的解决方案,

,你可以总是做列-> [扩展的(文本),扩展的(容器),扩展的(文本)],并根据需要调整空白框的弯曲。 还有容器(或列/行)->堆栈->[列(主轴起点)、列(主轴终点)]


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

我建议查找有关IntrinsicHeight的文档:
///这个类相对昂贵,因为它在最终布局阶段之前添加了一个推测布局///过程。尽可能避免使用它。在///最坏的情况是,此小部件可能会在///树的深度产生O(N²)的布局。