Flutter MaterialButton 实现圆角边框按钮

「爱情、让人受尽委屈。」 2023-10-07 18:07 46阅读 0赞

效果图如下

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

MaterialButton buildMaterialButton() {
        
        return MaterialButton(
          //背景颜色
          color: Colors.white,
          //边框样式
          shape: const RoundedRectangleBorder(
            //边框颜色
            side: BorderSide(
              color: Colors.deepPurple,
              width: 1,
            ),
            //边框圆角
            borderRadius: BorderRadius.all(
              Radius.circular(8),
            ),
          ),
          //按钮高度
          height: 32,
          //按钮最小宽度
          minWidth: 60,
          //点击事件
          onPressed: () {
        },
          child: const Text(
            "查找",
            style: TextStyle(fontSize: 12, color: Colors.deepPurple),
          ),
        );
      }

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6bf60711e7464610b26d6bd38c1ad2cc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter MaterialButton 实现圆角边框按钮

效果图如下 ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm

「爱情、让人受尽委屈。」/ 2023年10月07日 18:07/ 0 赞/ 47 阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 157 阅读

相关 css圆角边框(css圆角边框无效)

纯CSS制作圆角边框的代码是什么? \xsnazzy h1, \xsnazzy h2, \xsnazzy p \{margin:0 10px; letter-spacin

野性酷女/ 2023年09月26日 13:09/ 0 赞/ 23 阅读

相关圆形边框和圆角边框

①画圆首先容器设置成正方形，然后border-radius等于一半的边框 ②圆角矩形边框将border-radius设置成height的一半，可以实现好看的圆

桃扇骨/ 2023年02月16日 14:28/ 0 赞/ 34 阅读

相关 CSS 圆角边框

CSS 圆角边框 ![在这里插入图片描述][20210325184439421.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

灰太狼/ 2022年11月13日 04:29/ 0 赞/ 290 阅读

相关 CSS实现渐变圆角边框

> 渐变边框可以使用 `border-image`，但带有圆角的渐变边框单靠 `border-image`却无法实现，那有哪些方法可以实现圆角渐变边框呢？ [css实用小知

小鱼儿/ 2022年10月19日 00:50/ 0 赞/ 395 阅读

相关 CSS实现边框圆角

CSS实现边框圆角通过设置border-radius可以实现圆角边框的效果。 1.分别设置四个角的半径值在border-radius属性中，依次书写四个角的半

短命女/ 2022年06月09日 05:39/ 0 赞/ 485 阅读

相关 flutter圆角效果的实现

new Material( borderRadius: BorderRadius.circular(20.0), shadowColor: Co

朱雀/ 2022年05月26日 06:15/ 0 赞/ 246 阅读

相关 JavaFx圆角边框

我的JavaFx程序使用FXML+Css布局我本以为圆角边框和Css一样使用 -fx-border-radius: 10px; 就可以了，然而并不是，是下面这样

ゞ浴缸里的玫瑰/ 2022年05月18日 02:06/ 0 赞/ 798 阅读

相关圆角边框和自适应按钮的制作

圆角边框和自适应按钮的制作,如图1-1。 ![1342958752_9359.png][] 图1-1 圆角边框和自适应按钮 1、圆角边框的制作 1.1 圆角边框HTML

Bertha 。/ 2021年09月14日 03:58/ 0 赞/ 335 阅读