我正在使用Flutter，我想向小部件(在本例中是文本小部件)添加边框。
我尝试了TextStyle和文本，但我不知道如何添加边框。
当前回答
下面是一个扩展的答案。一个DecoratedBox是你需要添加边框，但我使用一个容器，以方便添加边缘和填充。
这是一般的设置。
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
Code
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)
Code
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非常灵活。阅读颤振箱装饰小抄更多的想法。
其他回答
用容器包装小部件
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),
),
);
使用容器中的文本小部件，并使用装饰来边框文本 装饰:BoxDecoration ( 边界:Border.all ( 颜色:颜色(0 xff000000), 宽度:1、 )),
下面是一个扩展的答案。一个DecoratedBox是你需要添加边框，但我使用一个容器，以方便添加边缘和填充。
这是一般的设置。
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
Code
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)
Code
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非常灵活。阅读颤振箱装饰小抄更多的想法。
是的，有不同的方法。其中之一是: 用容器包起来。像这样用盒子装饰。
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(
// 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,
);
