[英]Flutter: How To Have Both Border Radius And Border Color On Bottom, Left And Right
I am having an issue where I can have border color on the bottom left, right and bottom OR border radius on the bottom left and right corners but I can't get both at the same time, how could I do this?我遇到一个问题,我可以在左下角、右下角和底部有边框颜色,或者在左下角和右下角有边框半径,但我不能同时获得这两个,我该怎么做?
child: Container(
padding: const EdgeInsets.all(10.0),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Color(0xff333634),
border: Border(
right: BorderSide(
color: Colors.white,
width: 1.0,
style: BorderStyle.solid,
),
left: BorderSide(
color: Colors.white,
width: 1.0,
style: BorderStyle.solid,
),
bottom: BorderSide(
color: Colors.white,
width: 1.0,
style: BorderStyle.solid,
),
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0)),
),
),
Wrap the Container
with the ClipRRect()
or RoundedRectangleBorder()
Widget and add the borderRadius:
from there.用
ClipRRect()
或 RoundedRectangleBorder( RoundedRectangleBorder()
Widget 包装Container
并从那里添加borderRadius:
ClipRRect example: ClipRRect 示例:
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0),
child (...)
),
Full Code of ClipRRect example: ClipRRect 示例的完整代码:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
children: [
Text('Test'),
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0),
),
child: Container(
padding: const EdgeInsets.all(10.0),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Color(0xff333634),
border: Border(
right: BorderSide(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid,
),
left: BorderSide(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid,
),
bottom: BorderSide(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid,
),
),
// borderRadius: BorderRadius.only(
// bottomLeft: Radius.circular(25.0),
// bottomRight: Radius.circular(25.0),
// ),
),
),
),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
Container(
decoration: BoxDecoration(
color: Colors.blue, //background color
border: Border.all(
color: Colors.black // border color
),
borderRadius: borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0)),
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.