flutter text 自定义下划线

Flutter Text Widget是Flutter Framework中用于呈现文本的Widget之一。该Widget可以显示单行或者多行文本，并且支持文字样式、对齐方式、文本溢出方式、行间距等多种属性的设置。在使用Text Widget的过程中，我们可能需要自定义下划线的样式来美化文本。

实现自定义下划线有多种方法，下面我们介绍其中一种方法：

在Text Widget的child组件内添加CustomPaint Widget，通过CustomPainter来绘制下划线。

例如，下面的示例演示了如何使用CustomPainter来绘制一条黑色且宽度为2.0的下划线。

Text(
    'Hello, world!',
    style: TextStyle(fontSize: 24),
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    textScaleFactor: 1.5,
    // 添加下划线
    child: CustomPaint(
        painter: LinePainter(),
        child: Text('Hello, world!'),
    ),
)

// LinePainter绘制下划线
class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2.0;

    canvas.drawLine(Offset.zero, Offset(size.width, 0), paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

通过上面的代码，我们可以看到，在Text Widget的child组件中添加了一个CustomPaint Widget，并通过LinePainter来绘制了下划线。在LinePainter中，我们通过canvas.drawLine方法来画一条宽度为2.0的黑色直线。同时，由于CustomPainter是在Widget绘制完成后才执行的，因此下划线可以自动适应Text Widget的宽度。

在实现自定义下划线的时候，我们可以根据需求来自定义不同的下划线样式。例如，可以通过paint.color、paint.strokeWidth等属性来设置下划线的颜色、宽度等。如果需要实现复杂的下划线效果，也可以通过绘制曲线、添加阴影、使用渐变色等方式来实现。

总结来说，通过在Text Widget的child组件中添加CustomPaint Widget，再通过CustomPainter来绘制下划线，是一种简单且灵活的自定义下划线的方法。在实际开发中，我们可以根据实际需求来灵活应用，实现不同样式的下划线。