Flutter 圆角按钮 和 圆形按钮

发布于 1 年前 作者 phonegap100 2407 次浏览 最后一次编辑是 1 年前 来自 分享

本章节对应的视频教程https://www.bilibili.com/video/BV15P411P7DN?p=30

下面带大家一起看看Flutter如何实现圆角按钮和圆形按钮

圆角按钮

 ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor:MaterialStateProperty.all(Colors.blue),
                      foregroundColor: MaterialStateProperty.all(Colors.white),                    
                      elevation: MaterialStateProperty.all(20),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10))
                        ),
                   ),
                    onPressed: () {
                      print("圆角按钮");
                    },
                    child: const Text('圆角')
)

更多Flutter+Getx商城实战教程https://www.itying.com/category-88-b0.html

圆形按钮

  Container(
                height: 80,
                child: ElevatedButton(
                    style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(Colors.blue),
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        elevation: MaterialStateProperty.all(20),
                        shape: MaterialStateProperty.all(
                          CircleBorder(side: BorderSide(color: Colors.white)),
                        )),
                    onPressed: () {
                      print("圆形按钮");
                    },
                    child: const Text('圆形按钮')),
)
回到顶部