我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本,但我不知道如何添加边框。
我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本,但我不知道如何添加边框。
当前回答
正如文档中所述,Flutter更喜欢组合而不是参数。
大多数情况下,您不是在寻找属性,而是在寻找包装器(有时还需要一些助手/“构建器”)。
对于边界,你需要DecoratedBox,它有一个定义边界的装饰属性;也包括背景图像或阴影。
或者,就像Aziza说的,你可以使用Container。这是DecoratedBox, SizedBox和其他一些有用的小部件的组合。
其他回答
你可以将Text作为子元素添加到带有边框属性的BoxDecoration容器中:
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: Text('My Awesome Border'),
)
最好的方法是使用BoxDecoration()
优势
您可以设置小部件的边框 你可以设置边框的颜色或宽度 您可以设置边框的圆角 您可以添加一个小部件的影子
缺点
BoxDecoration只与容器小部件一起使用,所以你需要将小部件包装在Container()中
例子
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.orange,
border: Border.all(
color: Colors.pink[800], // Set border color
width: 3.0), // Set border width
borderRadius: BorderRadius.all(
Radius.circular(10.0)), // Set rounded corner radius
boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
),
child: Text("My demo styling"),
)
如果有人想要一个概述/边界文本或应用多个边界。
你可以试试这个:
https://pub.dev/packages/outlined_text
DEMO
总结
我已经尝试总结了在BoxDecoration中使用边框时所有重要的可能性。
以下解释边界的结果:
解释
基本
Container(
decoration: BoxDecoration(border: Border.all()),
child: const Text("Text"),
),
BorderColor, width和strokeAlign
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.green,
strokeAlign: BorderSide.strokeAlignCenter)),
child: const Text("Text"),
),
只在特定的一侧划定边界
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
decoration: const BoxDecoration(
border: Border(top: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 2))),
child: const Text("Text"),
),
Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 2),
bottom: BorderSide(width: 4))),
child: const Text("Text"),
),
],
),
不同的形状
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
shape: BoxShape.circle),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(10),
),
child: const Text("Text"),
),
],
),
弯曲边界半径
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(5), right: Radius.circular(20))
),
child: const Text("Text"),
),
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
bottomRight: Radius.circular(20))),
child: const Text("Text"),
),
],
),
你可以使用Container来包含你的小部件:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
child: Text()
),