我希望我在 Textfield 中的文本背景看起来像这样:
但是有了这段代码:
style: TextStyle(
background: Paint()..color = Colors.blue
..style = PaintingStyle.fill,
color: Colors.white,
),
我有这个结果:
没有padding,没有圆角和两者之间的透明线...
我该怎么做?
编辑:
TextStyle
的另一种方式由@Csaba Mihaly 提供,但这是我想避免的解决方法。我正在寻找定制的油漆解决方案
编辑:
根据提供的答案可以使用 PaintStyle.stroke 但它不是 100% 匹配预期结果(第一个屏幕):
无论文字大小如何,为了填充空白,笔划宽度必须更大,正如我所看到的。它将渲染一个大的填充和角半径。就我而言:
如果您将
..strokeWidth = 20
添加到样式中,您的代码片段将起作用,例如:
Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
textAlign: TextAlign.center,
style: TextStyle(
background: Paint()
..color = Colors.blue
..strokeWidth = 20
..strokeJoin = StrokeJoin.round
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke,
color: Colors.white,
))
笔划宽度定义文本周围区域的“粗度”。虽然准确地说,内角(看“行业”一词附近)不是圆形的,我怀疑文本背景可以解决这个问题。
另外请注意,如果您的目标是 Web,您可能需要使用 Skia 渲染器而不是 HTML 渲染器(https://stackoverflow.com/a/69975665/440696)以避免以下人工制品:
我创建了一个名为
rounded_background_text
的包来实现这个
https://pub.dev/packages/rounded_background_text
用法:
import 'package:rounded_background_text/rounded_background_text.dart';
RoundedBackgroundText(
'A cool text to be highlighted',
style: const TextStyle(fontWeight: FontWeight.bold),
backgroundColor: Colors.white,
),
也支持文本字段
所以我找到了这篇文章https://medium.com/@pinkesh.earth/flutter-quick-tip-how-to-set-text-background-color-with-curve-d40a2f96a415 它描述了如何使用 textstyle 看起来像你想要的,但它并不完全像那样工作,我不知道为什么。它将下一行的背景绘制在上一行之上。
我设法通过堆叠两个文本字段(一个具有透明文本,另一个具有透明背景)来解决它(错误?)。
结果:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final myControllerName = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
inputDecorationTheme: const InputDecorationTheme(
fillColor: Colors.transparent,
filled: true,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
),
)),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Stack(
children: [
IntrinsicWidth(
child: TextField(
controller: myControllerName,
style: TextStyle(
color: Colors.transparent,
fontWeight: FontWeight.w600,
fontSize: 20,
background: Paint()
..strokeWidth = 25
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round),
keyboardType: TextInputType.multiline,
maxLines: null,
textAlign: TextAlign.center,
),
),
IntrinsicWidth(
child: TextField(
controller: myControllerName,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 20,
backgroundColor: Colors.transparent),
keyboardType: TextInputType.multiline,
maxLines: null,
textAlign: TextAlign.center,
),
)
],
))));
}
}
这样做:
style: TextStyle(
background: Paint()..color = Colors.blue
..strokeJoin = StrokeJoin.round
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 30.0,
color: Colors.white,
),
试试这样的东西
TextField(
keyboardType: TextInputType.multiline
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(<value>),
),
您可以在这里找到其他示例https://stacksecrets.com/flutter/flutter-textfield-decoration-in-depth#How_To_Decorate_Border_Of_TextField
可以用容器。试试这个:
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blue,
),
child: Text(
'Hello World!',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
);