首页 文章

在一个行小部件中对齐Text小部件

提问于
浏览 次
2

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

中间文本条目可以跨越多行，但前两个将非常小 .

我想让第一个小部件的文本位于行的顶部，第三个小部件的文本位于行的底部 .

它基本上与此图像类似

enter image description here

因此，基本上第一个小部件将是开头报价，然后是第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,
        ),
      ),
    ],
  );

但我不确定如何将底部引号与文本底部对齐，此时它位于顶部 .

flutter flutter-layout

3 回答

  • 0

    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,
              ),
            ),
          ),
        ],
        ),
      ));
  }
    回复于
  • 1

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

    我相信还有其他解决方案

    回复于
  • 1

    您可以随时执行Column - > [Expanded（text），Expanded（Container（），Expanded（text）]并根据需要调整空白框的flex .

    还有容器（或列/行） - >堆栈 - > [列（mainAxis start），列（mainAxis end）] .

    工作更聪明，而不是更难 . IntrinsicHeight小部件的计算成本很高，我不建议使用它 .

    回复于

相关问题