flutter：圆角与圆

大前端 flutter

发布时间 : 2025-08-18 00:00

字数:208 阅读 :

class _SplashPageState extends State<SplashPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundSplash,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  width: 120,
                  height: 120,
                  // color: Colors.white,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    // borderRadius: BorderRadius.circular(60),// 得到一个圆形
                    // shape: BoxShape.circle,
                    // shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(48),
                  ),
                ),
                Image.asset(AssetsImages.logoPng, width: 84, height: 80),
              ],
            ),
            Text("Online Market"),
            Text("10"),
          ],
        ),
      ),
    );
  }
}

圆角与圆的关系：

一个矩形要变成圆角矩形，角的圆弧半径就是 borderRadius 控制的。当 borderRadius = width/2 且 width == height 的时候，圆角会覆盖整个矩形的边角，结果就变成了一个正圆。
```
width = 120
height = 120
borderRadius = 60 = 120 / 2
```
如果换一些值
- borderRadius < width/2：就是带圆角的矩形（不是圆）。
- borderRadius > width/2：Flutter 会自动限制，效果和 width/2 一样。
- width != height：你得到的会是一个椭圆角矩形，而不是纯圆。