在Flutter中的组件上方覆盖一条线

Question

我在其中一个组件中具有以下布局，并希望像这样在其上面放置一行：

那是我当前的代码，并且已经在Flutter的API文档中进行了一段时间的搜索，没有找到合适的方法来实现。

new Row(
  children: <Widget>[
    new Expanded(
      child: const Text("Some text"),
    ),
    const Text("Some other text"),
  ],
)

任何指示或想法如何做到这一点？

Answer 1

好的。通过使用自定义项使其正常工作Decoration。
这是我的代码：

class StrikeThroughDecoration extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return new _StrikeThroughPainter();
  }
}

class _StrikeThroughPainter extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final paint = new Paint()
      ..strokeWidth = 1.0
      ..color = Colors.black
      ..style = PaintingStyle.fill;

    final rect = offset & configuration.size;
    canvas.drawLine(new Offset(rect.left, rect.top + rect.height / 2), new Offset(rect.right, rect.top + rect.height / 2), paint);
    canvas.restore();
  }
}

在我的组件中像这样使用：

new Container(
  foregroundDecoration: new StrikeThroughDecoration(),
  child: new Row(
    children: <Widget>[
      new Expanded(
        child: const Text("Some text"),
      ),
      const Text("Some other text"),
    ],
  )
)