flutter 实现控件圆角阴影

最新推荐文章于 2024-08-08 15:30:00 发布

Fire_Mh

最新推荐文章于 2024-08-08 15:30:00 发布

阅读量1.2k

点赞数

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/qq_32650001/article/details/107707275

版权

flutter 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Flutter中使用BoxDecoration和BoxShadow创建带有圆角和阴影效果的UI组件，通过具体代码示例展示了设置阴影范围、浓度及颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter实现圆角阴影，如下图

直接上代码

class _MyShadow extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        width: 200,
        height: 100,
        alignment: Alignment.center,
        margin: EdgeInsets.only(left: 80, right: 80, top: 200, bottom: 18),
        decoration: BoxDecoration(
          color: Colors.white, // 底色
          boxShadow: [
            BoxShadow(
              blurRadius: 10, //阴影范围
              spreadRadius: 1, //阴影浓度
              color: Color(0xFFF7F7F7), //阴影颜色
            ),
          ],
          borderRadius: BorderRadius.circular(19),
          //borderRadius: BorderRadius.only(
          //  topRight: Radius.circular(10),
          // bottomRight: Radius.circular(10)) //单独加某一边圆角
        ),
        child: Text(
          "测试数据",
          style: TextStyle(fontSize: 25, color: Colors.blue),
        ),
      ),
    );
  }
}