Flutter 实现控件圆角的方式

原创已于 2022-01-27 15:36:57 修改 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #android studio

于 2022-01-25 11:37:20 首次发布

文字专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Flutter中创建圆角控件的三种方法：通过Card的shape属性，Container的decoration以及ClipRRect。详细阐述了每种方式的用法，帮助开发者实现自定义的圆角效果。

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

实现控件圆角的方式

使用Card的shape属性
使用Container的decoration
使用ClipRRect

//第一种
 Container(
  margin: const EdgeInsets.only(left: 10, right: 10, top: 100, bottom: 100),
  decoration: ShapeDecoration(
      image: const DecorationImage(
            image: NetworkImage('https://th.bing.com/th/id/OIP.1_lUKm-qhDMmh_zz3fw7EwHaE7?w=284&h=189&c=7&r=0&o=5&dpr=2&pid=1.7'),
            fit: BoxFit.cover),
            shape: RoundedRectangleBorder(borderRadius:BorderRadiusDirectional.circular(20))),
            width: double.maxFinite,
            child: const Align(
                   child: Padding(
                   padding: EdgeInsets.all(8.0),
                            child: Text(
                              "Container decoration实现圆角(radius = 20)",
                              style: TextStyle(color: Colors.blueAccent),
                            ),
                          ),
                          alignment: Alignment.bottomCenter,
                        ),
                      ),

//第二种
Card(shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),
     clipBehavior: Clip.antiAlias,
     child:AssetImage('images/pic_1.jpg', width: double.maxFinite,),
)
//第三种
ClipRRect( 
	borderRadius: BorderRadius.circular(20),
  	child:AssetImage("images/pic_2.jpeg"),
)