Flutter中如何禁用BoxDecoration的抗锯齿效果

解决方法 #

BoxDecoration 默认开启了抗锯齿效果，你只需要显式将其 antiAlias 属性设置为 false 即可关闭该特性，修改后的代码如下：

class MyButton extends StatefulWidget {
    const MyButton({Key? key}) : super(key: key);

    @override
    _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
    @override
    Widget build(BuildContext context) {    
        return Container(
            padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2.0),
            decoration: const BoxDecoration(
                // 新增此行关闭抗锯齿
                antiAlias: false,
                border: Border(
                    top: BorderSide(width: 5, color: Colors.grey),
                    left: BorderSide(width: 5, color: Colors.grey),
                    bottom: BorderSide(width: 5, color: Colors.grey),
                    right: BorderSide(width: 5, color: Colors.grey)
                ),
                color: Colors.blue,
            ),
            child: const Text('OK', textAlign: TextAlign.center, style: TextStyle(color: Colors.black)),
        );
    }
}

如果修改后仍存在轻微边缘模糊，可给每个 BorderSide 添加 strokeAlign: StrokeAlign.inside 配置，让边框完全绘制在容器内部，避免边缘出现半透明过渡效果。

内容的提问来源于stack exchange，提问作者Nukiloco