我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本,但我不知道如何添加边框。
我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本,但我不知道如何添加边框。
当前回答
是的,有不同的方法。其中之一是: 用容器包起来。像这样用盒子装饰。
Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border.all(width: 5, color: Colors.red),
borderRadius: BorderRadius.all(Radius.circular(50)),
),
child: const Text(
"Box decoration",
style: TextStyle(fontSize: 34.0),
),
)
其他回答
用容器包装小部件
Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
上面的答案也是正确的,但是如果您想在同一个小部件上添加多个边框,那么您可以设置这个选项
Container(
child: const Center(
child: Text(
'This is your Container',
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: const [
BoxShadow(color: Colors.green, spreadRadius: 8),
BoxShadow(color: Colors.yellow, spreadRadius: 5),
],
),
height: 50,
)
文本边框样式:
Stack(
children: <Widget>[
// Stroked text as border.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = Colors.blue[700]!,
),
),
// Solid text as fill.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
color: Colors.grey[300],
),
),
],
)
如果你想添加边框的一些文本的容器,那么你可以很容易地通过应用BoxDecoration容器。
代码:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.redAccent,
width: 1,
),
),
child: Text('Some Text'),
);
如果有人想要一个概述/边界文本或应用多个边界。
你可以试试这个:
https://pub.dev/packages/outlined_text
DEMO