Layout 颤振中的基准对齐文本和虚线

我正在尝试为我的颤振应用程序创建类似的内容：

现在我已经成功地得到了一行文字，一条虚线和更大的文字的钱。我似乎无法解决的最后一个问题是消除不同大小文本中的可变大小差异

[编辑] 我的具体意思是让所有东西都在同一条红线上对齐：

看着这些，我想我可以做同样的事情，把所有的文本放在定位的堆栈中。但是，这会破坏我的布局，并导致以下错误：

I/Flatter 26439:在performLayout期间抛出了以下断言： I/Flatter 26439:RenderFlex子项具有非零弯曲，但传入的高度约束是无限的。 I/颤振26439：当柱位于不提供有限高度约束的父项中时，例如 I/flatter26439：在垂直滚动中，它将尝试沿垂直轴收缩包裹其子对象。设定 I/Flatter 26439：在子对象上弯曲，例如，使用展开表示子对象将展开以填充剩余部分 I/颤振26439：垂直方向上的空间。 I/flatter 26439：这两个指令是互斥的。如果父对象要收缩包装其子对象，则子对象 I/Flatter 26439:无法同时展开以适合其父对象。 I/Frutter 26439：考虑将MaxAxIsSead设置为MainAxisSize.min，并使用FractFi。 I/Flatter 26439：儿童使用灵活的而不是扩展的。这将允许灵活的孩子调整尺寸 I/flatter26439：他们自己的空间小于他们被迫占据的无限剩余空间，并且 I/Flatter 26439:然后将导致RenderFlex收缩包裹子对象，而不是展开以适应最大值 I/颤振26439：父级提供的约束。 I/颤振26439：受影响的RenderFlex为： I/颤振26439:RenderFlexc7fb1 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT I/Flatter 26439:创建者信息设置为： I/flatter26439：列← 扩大← 一行← 柱← 衬料← 重新绘制边界-[]← 指数符号学← I/flatter26439：通知侦听器← 保持活力← 自动开机← 银表← I/flatter26439:MediaQuery← ⋯ I/颤振26439：另请参见：https://flutter.dev/layout/ 这是我的相关代码：

一行 crossAxisAlignment:crossAxisAlignment.end， 儿童：[ “工资上限”文本， //堆栈//将导致错误 //fit:StackFit.expand， //儿童：[ //定位 //排名：0， //左:0,， //宽度：200， //子项：文本“工资上限”， // , // ], // , 扩大 子：容器 宽度：double.infinity， 子项：CustomPaintpainter:LineDashedPainter， , , 超文本 text:TextSpan 儿童：[ TextSpantext:“\$”， TextSpan 正文： “${oCcy.formatsalaryLimit}”， 样式：Theme.ofcontext.textTheme.display1， , ], , , ], ,

---

有什么建议吗？

我已经为您创建了一个示例，您可以自定义字体、颜色等

class MoneyRow extends StatelessWidget {
  final String name;
  final String ammout;

  const MoneyRow({Key key, this.name, this.ammout}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Text(name),
        Expanded(child: DashedLine()),
        _price(context)
      ],
    );
  }

  Widget _price(BuildContext context) {
    return RichText(
        text: TextSpan(
            text: "\$",
            style: Theme.of(context)
                .textTheme
                .subhead
                .copyWith(color: Colors.grey),
            children: [
          TextSpan(
              text: ammout,
              style: Theme.of(context)
                  .textTheme
                  .headline
                  .copyWith(color: Colors.black))
        ]));
  }
}

class DashedLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final boxWidth = constraints.constrainWidth();
        final dashWidth = 10.0;
        final dashCount = (boxWidth / (2 * dashWidth)).floor();
        return Row(
          children: List.generate(dashCount, (_) {
            return Text(".");
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
        );
      },
    );
  }
}

---

值得一提的是，虚线的灵感来源于

您可以选择这两条线

crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,

---

试着把你的行放在一个固定宽度的容器中，你想用堆栈实现什么？消除不同大小文本中的可变大小间隙是什么意思？如果您的意思是基线没有对齐，请查找CrossAxisAlignment.baseline（如图所示），以便调整大文本的位置，可以尝试使用Transform.translate，这里有一个示例@siega抱歉，siega，但这对我没有任何帮助@埃德曼，我想这就是我要找的。我添加了两个属性crossAxisAlignment:crossAxisAlignment.baseline、textBaseline:textBaseline.Alpha顺序，并且字符都在对齐，但现在我无法将虚线向下拉。如果这是第二个问题，没问题——我想我可以在这里问一下。哦，从这个@Edman那里得到了一行实现，我是根据你的建议工作的。我只需要在行中添加一个intrinsicHeight，并将容器包装在Align小部件Alignment.bottomCenter中。从那里开始，虚线有点偏离文本基线，所以我只是在10的容器中添加了一个底部边距，现在看起来不错。如果你把答案贴出来，我可以标记你的答案。非常感谢你的帮助。不过，我觉得这不是我想要的。如果我碰巧改变了尾随文本量的文本大小，就像我想在我的文本中做的那样，我最终会遇到同样的问题。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("My Flutter App"),
          backgroundColor: Colors.red,
        ),
        body: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return MoneyRow(name: "Money $index", ammout: "${index * 10}");
            }));
  }

crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,