我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本,但我不知道如何添加边框。
我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本,但我不知道如何添加边框。
当前回答
圆角/边缘与底部阴影
Container(
// child it's depend on your requirement
child: const Center(
child: Text(
'This is your Container',
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: <BoxShadow>[
// shadow color and radius
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75)
)
],
),
// according your height ex. 50
height: 50,
);
其他回答
在这里,由于Text小部件没有允许我们定义边框的属性,我们应该用一个允许我们定义边框的小部件来包装它。 有几种解决方案。 但是最好的解决方案是在容器小部件中使用BoxDecoration。
为什么选择使用BoxDecoration?
因为BoxDecoration提供了更多的定制,比如定义:
首先,边界和也定义:
边框颜色 边框宽度 边界半径 形状 还有更多……
一个例子:
Container(
child:Text(' Hello Word '),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.red ,
width: 2.0 ,
),
borderRadius: BorderRadius.circular(15),
),
),
输出:
用容器包装小部件
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),
),
);
文本边框样式:
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 ( 边界:Border.all ( 颜色:颜色(0 xff000000), 宽度:1、 )),
你可以使用Container来包含你的小部件:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
child: Text()
),