小开

最佳答案

你可以将Text作为child添加到具有border属性的BoxDecoration的Container中:

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'),
)

小开

正如文档中所述，Flutter更喜欢组合而不是参数。

大多数时候，你不是在寻找一个属性，而是一个包装器(有时还有一些助手/“构建者”)。

对于边界，你需要DecoratedBox，它有一个定义边界的decoration属性;也包括背景图像或阴影。

或者，像Aziza说一样，你可以使用Container。它是DecoratedBox， SizedBox和其他一些有用的小部件的组合。

小开

下面是一个扩展的答案。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.red
Colors.blue
Colors.green

代码

BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(
color: Colors.red, //                   <--- border color
width: 5.0,
),
);
}

边界边

这些有边界的一面

左(3.0)，上(3.0)
底部(13.0)
左(蓝色[100]，15.0)，上(蓝色[300]，10.0)，右(蓝色[500]，5.0)，下(蓝色[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非常灵活。阅读颤振箱装饰备忘单获得更多想法。

小开

最好的方法是使用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"),
)

小开

你可以使用Container来包含你的小部件:

Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff000000),
width: 1,
)),
child: Text()
),

小开

使用带有Boxdercoration的容器。

 BoxDecoration(
border: Border.all(
width: 3.0
),
borderRadius: BorderRadius.circular(10.0)
);

小开

这里，由于Text小部件没有允许我们定义border的属性，我们应该用一个允许我们定义边界的小部件来包装它。有几种解决方案。但是最好的解决方案是在容器小部件中使用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),
),
),

输出:

小开

如果你想添加边框的一些文本的容器，那么你可以很容易地通过应用BoxDecoration容器。

代码:

Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.redAccent,
width: 1,
),
),
child: Text('Some Text'),
);

小开

如果有人想要一个概述/边界文本或应用多个边界。

你可以试试这个:

https://pub.dev/packages/outlined_text

DEMO

小开

用容器包装小部件

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),
),
);

小开

你可以把那个小部件包装到DecoratedBox，在这种情况下，DecoratedBox为那个小部件提供装饰

Widget textDecoration(String text){
return DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 10,
),
),
child: Text(text)
);
}

小开

上面的答案也是正确的，但是如果您想在同一个小部件上添加多个边框，那么您可以设置这个选项

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,
)

小开

圆角/边缘与底部阴影

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,
);

小开

试试下面的代码:

Container(
margin: margin,
padding: padding,
decoration: BoxDecoration(
border: Border.all(
color: color,
width: width,
),
),
child: Text(
data,
style: TextStyle(fontSize: 30.0),
),
),

如何在Flutter中为小部件添加边框?

边框宽度

边框颜色

边界边

边界半径

发生了