flutter 绘画文字

flutter:我想要实现一个文本,带有边框。边框和文件无边距即0距离 ,用Container和Text实现,文字和边框总是有距离,尤其是文字越大距离也越大。而且当缩小文字时总是会往左上角偏移,放大时总是会往右下角偏移。如何在放大缩小时固定左上坐标?

img

引用 皆我百晓生 小程序回复内容作答:
在Flutter中,可以使用CustomPaint来绘制自定义的文本框,以实现边框和文本无边距的效果。以下是一个示例代码:

import 'package:flutter/material.dart';

class CustomTextBox extends StatelessWidget {
  final String text;
  final double fontSize;
  final Color textColor;
  final Color borderColor;

  const CustomTextBox({
    Key key,
    @required this.text,
    this.fontSize = 16.0,
    this.textColor = Colors.black,
    this.borderColor = Colors.black,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: TextBoxPainter(borderColor),
      child: Container(
        padding: EdgeInsets.all(0.0),
        child: Text(
          text,
          style: TextStyle(
            fontSize: fontSize,
            color: textColor,
          ),
        ),
      ),
    );
  }
}

class TextBoxPainter extends CustomPainter {
  final Color borderColor;

  TextBoxPainter(this.borderColor);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;

    final rect = Rect.fromLTRB(0, 0, size.width, size.height);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

使用示例:

CustomTextBox(
  text: 'Hello World',
  fontSize: 20.0,
  textColor: Colors.blue,
  borderColor: Colors.red,
)

这样就可以实现一个带有边框的文本框,边框和文本之间没有间距,并且在缩放时保持左上角固定。

再请教一个问题:组件Text如何根据fontSize大小以及不同字体样式(eg:宋体、雅黑;加粗、斜体等)获取文本的宽高?