1. ContinuousRectangleBorder
ContinuousRectangleBorder在直边和圆角之间创建一个具有平滑连续过渡的矩形边框。
Flutter的其他边框示例:
ContinuousRectangleBorder构造函数
const ContinuousRectangleBorder(
{BorderSide side: BorderSide.none,
BorderRadiusGeometry borderRadius: BorderRadius.zero}
)
基本上,ContinuousRectangleBorder
的用法与 RoundedRectangleBorder
相同。它们都创建了一个带有圆角的矩形边框。但是 ContinuousRectangleBorder
创建的圆角更平滑。
2. 示例
例如:对容器使用 ContinuousRectangleBorder
,效果如下所示 -
Container(
width: 300,
height: 150,
decoration: ShapeDecoration(
color: Colors.white,
shape: ContinuousRectangleBorder (
borderRadius: BorderRadius.circular(32.0),
side: BorderSide(
width: 10,
color: Colors.blue
)
)
),
child: Center(
child: Text(
"Flutter",
style: TextStyle(fontSize: 50)
)
),
)
使用加法运算符 (+) 添加 2 个 ShapeBorder 以创建关联边框:
Container(
width: 300,
height: 150,
decoration: ShapeDecoration(
color: Colors.white,
shape: ContinuousRectangleBorder (
borderRadius: BorderRadius.circular(16.0),
side: BorderSide(
width: 10,
color: Colors.blue
)
) + ContinuousRectangleBorder (
borderRadius: BorderRadius.circular(32.0),
side: BorderSide(
width: 20,
color: Colors.green
)
)
),
child: Center(
child: Text(
"Flutter",
style: TextStyle(fontSize: 50)
)
),
)
3. side属性
side - 提供与边框相关的参数,例如颜色、宽度、样式。
BorderSide side: BorderSide.none
BorderSide构造函数
const BorderSide (
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)
注意:ContinuousRectangleBorder.side 属性不适用于 ElevatedButton、TextButton 和 OutlinedButton。它被 ButtonStyle.side 覆盖。
4. borderRadius属性
borderRadius - 提供矩形的 4 个角半径值。
BorderRadiusGeometry borderRadius: BorderRadius.zero
Container(
width: 300,
height: 150,
decoration: ShapeDecoration(
color: Colors.white,
shape: ContinuousRectangleBorder (
borderRadius: BorderRadius.only(
bottomLeft: Radius.zero,
topLeft: Radius.zero,
bottomRight: Radius.circular(20),
topRight: Radius.circular(45)
),
side: BorderSide(
width: 10,
color: Colors.blue
)
)
),
child: Center(
child: Text(
"Flutter",
style: TextStyle(fontSize: 50)
)
),
)