在Flutter中使文本和虛線基本對齊

Question

我正在嘗試為Flutter應用創建類似這樣的內容：

現在，我已經成功地用一行文字，一條虛線和較大的文字來說明問題。 我似乎無法解決的最后一個問題是擺脫不同大小文本中的可變大小差距。

[編輯]我的意思是將所有內容都對齊在同一條紅線上：

看着這個答案，我發現我可以做同樣的事情，並將所有文本放置在定位的堆棧中。 但是，這破壞了我的布局，給了我這個錯誤：

I/flutter (26439): The following assertion was thrown during performLayout():
I/flutter (26439): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (26439): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (26439): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (26439): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (26439): space in the vertical direction.
I/flutter (26439): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (26439): cannot simultaneously expand to fit its parent.
I/flutter (26439): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (26439): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (26439): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (26439): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (26439): constraints provided by the parent.
I/flutter (26439): The affected RenderFlex is:
I/flutter (26439):   RenderFlex#c7fb1 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26439): The creator information is set to:
I/flutter (26439):   Column ← Expanded ← Row ← Column ← Padding ← RepaintBoundary-[<0>] ← IndexedSemantics ←
I/flutter (26439):   NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← SliverList ←
I/flutter (26439):   MediaQuery ← ⋯
I/flutter (26439): See also: https://flutter.dev/layout/

這是我的相關代碼：

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Text('Salary Cap'),
    // Stack( // Will cause error
    //   fit: StackFit.expand,
    //   children: <Widget>[
    //     Positioned(
    //       top: 0,
    //       left: 0,
    //       width: 200,
    //       child: Text('Salary Cap'),
    //     ),
    //   ],
    // ),
    Expanded(
      child: Container(
        width: double.infinity,
        child: CustomPaint(painter: LineDashedPainter()),
      ),
    ),
    RichText(
      text: TextSpan(
        children: <TextSpan>[
          TextSpan(text: '\$'),
          TextSpan(
            text:
                '${oCcy.format(salaryLimit)}',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    ),
  ],
),

有什么建議嗎？

Answer 1

我為您創建了一個示例，您可以自定義字體顏色等。

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

用法

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("My Flutter App"),
          backgroundColor: Colors.red,
        ),
        body: Column(
          children: <Widget>[
            MoneyRow(
              name: "Cash",
              ammout: "300.3",
            ),
            MoneyRow(
              name: "Cash",
              ammout: "300.3",
            ),
            MoneyRow(
              name: "Cash",
              ammout: "300.3",
            )
          ],
        ));
  }

要么

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

值得一提的是，虛線是受此SO帖子啟發的