我正在使用Flutter，希望给小部件（在这种情况下是Text小部件）添加边框。
我尝试过TextStyle和Text，但我没有看到如何添加边框。
如何在Flutter中为小部件添加边框？
553
- Seth Ladd
20个回答
1015
你可以将
Text 作为 child 添加到具有 border 属性的 Container 中，例如：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'),
)
- Shady Aziza
576
这是一个详细的回答。如果你需要添加边框，你需要使用 DecoratedBox，但我为了方便添加边距和填充，使用了一个Container。
这是一般设置。
Widget myWidget() {
return Container(
margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: myBoxDecoration(), // <--- BoxDecoration here
child: Text(
"text",
style: TextStyle(fontSize: 30.0),
),
);
}
其中BoxDecoration所在的位置
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}
边框宽度
这些分别具有边框宽度为1、3和10。
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 1, // <--- border width here
),
);
}
边框颜色
这些具有以下边框颜色:
Colors.redColors.blueColors.green
代码
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, // <--- border color
width: 5.0,
),
);
}
边框样式
下面是每个边框的具体样式：
- 左边框（宽度为3.0），上边框（宽度为3.0）
- 底部边框（宽度为13.0）
- 左边框（颜色为blue[100]，宽度为15.0），上边框（颜色为blue[300]，宽度为10.0），右边框（颜色为blue[500]，宽度为5.0），底部边框（颜色为blue[800]，宽度为3.0）
代码：
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border(
left: BorderSide( // <--- left side
color: Colors.black,
width: 3.0,
),
top: BorderSide( // <--- top side
color: Colors.black,
width: 3.0,
),
),
);
}
边框半径
这些分别具有5、10和30的边框半径。
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
进行中
DecoratedBox/BoxDecoration非常灵活。阅读Flutter - BoxDecoration 套餐表以获取更多创意。
- Suragch
6
37
最佳方法是使用BoxDecoration()
优点
- 您可以设置小部件的边框
- 您可以设置边框的颜色或宽度
- 您可以设置边框的圆角
- 您可以添加小部件的阴影
缺点
BoxDecoration仅可与Container小部件一起使用，因此您需要将您的小部件包装在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"),
)
- Sanjayrajsinh
35
您可以使用DecoratedBox来包装小部件，它提供了装饰功能：
Widget textDecoration(String text){
return DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 10,
),
),
child: Text(text)
);
}
- Abdullah Waheed
23
摘要
我试图总结使用BoxDecoration中的border时的所有重要可能性。
以下解释的边框的结果：
解释
基本
Container(
decoration: BoxDecoration(border: Border.all()),
child: const Text("Text"),
),
边框颜色、宽度和描边对齐
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"),
),
],
),
- BouncyBits
21
正如文档所述，Flutter更喜欢通过组合而非参数来实现。
大多数情况下，您不是在寻找属性，而是在寻找包装器（有时还需要几个帮助程序或“构建器”）。
对于边框，您可以使用DecoratedBox，它有一个decoration属性来定义边框；但也可以用于背景图片或阴影。
另外，就像Aziza所说的那样，您也可以使用Container。它是DecoratedBox，SizedBox和其他一些有用小部件的组合。
- Rémi Rousselet
13
由于Text小部件没有允许我们定义border的属性，因此我们应该将其包装在允许我们定义边框的小部件中。
有几种解决方案，但最好的解决方案是在Container小部件中使用BoxDecoration。
为什么选择使用BoxDecoration？
因为BoxDecoration提供更多自定制选项，如可以定义：
border- 边框颜色
- 边框宽度
- 边框半径
- 形状
- 等等...
一个例子：
Container(
child:Text(' Hello Word '),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.red ,
width: 2.0 ,
),
borderRadius: BorderRadius.circular(15),
),
),
输出:
- Kab Agouda
9
以上答案也是正确的，但如果您想在同一小部件上添加多个边框，则可以设置此选项。
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,
)
- shirsh shukla
9
将该小部件与容器包装
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),
),
);
- x86
6
您可以使用容器来包含您的小部件：
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
child: Text()
),
- 竭智Dan
1
1这并没有超过3年前被接受的答案。 - nvoigt
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
BorderRadius.circular(8)，而不是BorderRadius.all(Radius.circular(5.0))。 - Son Nguyen