1. Flutter StadiumBorder
StadiumBorder 的灵感来自体育场的形状(一个相对两侧有 2 个半圆的盒子),StadiumBorder 通常与 ShapeDecoration 一起使用来绘制边框。
如果矩形的高度大于宽度,则两个半圆形将位于顶部和底部边缘;否则,它们将位于左侧和右侧。
StadiumBorder构造函数
const StadiumBorder(
{BorderSide side: BorderSide.none}
)
效果如下:
2. 示例
示例1: 将 StadiumBorder 用于容器:
Container(
width: 350,
height: 200,
alignment: Alignment.center,
decoration: ShapeDecoration(
color: Colors.white,
shape: StadiumBorder (
side: BorderSide(
width: 10,
color: Colors.blue
)
)
),
child: Text("Flutter")
)
运行效果如下:
还可以将 StadiumBorder 用于 ElevatedButton、OutlinedButton 和 TextButton 等按钮。但是,在这种情况下,StadiumBorder.side 将不起作用,因为它已被 ButtonStyle.side 覆盖。
示例2:
ElevatedButton (
child: Text("ElevatedButton"),
onPressed: () {},
style: ElevatedButton.styleFrom( // returns ButtonStyle
primary: Colors.red,
onPrimary: Colors.white,
side: BorderSide( width: 3, color: Colors.green), // Work!
shape: StadiumBorder (
side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
)
),
)
运行效果如下:
示例3:
ElevatedButton (
child: Text("ElevatedButton"),
onPressed: () {},
style: ElevatedButton.styleFrom( // returns ButtonStyle
primary: Colors.red,
onPrimary: Colors.white,
shape: StadiumBorder (
side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
)
),
)
运行效果如下:
示例4:
ElevatedButton.icon(
icon: Icon(Icons.thumb_up),
label: Text("Like"),
onPressed: () {},
style: ElevatedButton.styleFrom( // returns ButtonStyle
shape: StadiumBorder(
side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
),
),
)
// With ButtonStyle.side
ElevatedButton.icon(
icon: Icon(Icons.thumb_up),
label: Text("Like"),
onPressed: () {},
style: ElevatedButton.styleFrom( // returns ButtonStyle
side: BorderSide(color: Colors.green, width: 3),
shape: StadiumBorder(
side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
),
),
)
运行效果如下:
示例5
OutlinedButton.icon (
icon: Icon(Icons.star_outline),
label: Text("OutlinedButton"),
onPressed: () {},
style: ElevatedButton.styleFrom( // returns ButtonStyle
shape: StadiumBorder(
side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
),
),
)
// With ButtonStyle.side
OutlinedButton.icon (
icon: Icon(Icons.star_outline),
label: Text("OutlinedButton"),
onPressed: () {},
style: ElevatedButton.styleFrom( // returns ButtonStyle
side: BorderSide(width: 2.0, color: Colors.green),
shape: StadiumBorder(
side: BorderSide( width: 10, color: Colors.blue) // Not Working (Read Note).
),
),
)
运行效果如下: