flutter:我想要实现一个文本,带有边框。边框和文件无边距即0距离 ,用Container和Text实现,文字和边框总是有距离,尤其是文字越大距离也越大。而且当缩小文字时总是会往左上角偏移,放大时总是会往右下角偏移。如何在放大缩小时固定左上坐标?
引用 皆我百晓生 小程序回复内容作答:
在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:宋体、雅黑;加粗、斜体等)获取文本的宽高?