在Flutter中的组件上方覆盖一条线 [英] Overlay a line on top of a component in Flutter

问题描述

我在其中一个组件中具有以下布局，并且希望在其上方放置一行：

I have the following layout in one of my components and would like to put a line on top of that like this:

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

That is my current code and already searched through the API documentation of Flutter for a while now and didn't find something suitable to achieve that.

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

任何指针或想法如何实现？

Any pointers or ideas how to do that?

推荐答案

好的。通过使用自定义装饰使其正常工作。

这是我的代码：

Okay. Got it working by using a custom Decoration.
Here is my code:

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

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

Used like that in my component:

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

这篇关于在Flutter中的组件上方覆盖一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！