flutter创建不同样式的按钮,背景色,边框,圆角,圆形,大小都可以设置

在ui设计中,可能按钮会有不同的样式需要你来写出来,所以按钮的不同样式,应该是最基础的功能,在这里我们赶紧学起来吧,web端可能展示有问题,需要优化,但是基本样式还是出来了

我是将所有的按钮放在了Column中:

Dart 复制代码
Column(
            children: [
              ElevatedButton(
                onPressed: () {},
                child: Text("红色按钮"),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.red),
                  foregroundColor: MaterialStateProperty.all(Colors.black),
                ),
              ),
              OutlinedButton(onPressed: () {}, child: Text("边框按钮")),
              ElevatedButton(
                onPressed: () {},
                child: Text("圆角"),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)))),
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text("圆形"),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(CircleBorder())),
              ),
              //   大一点的按钮
              Container(
                width: 90,
                height: 60,
                margin: EdgeInsets.only(bottom: 10),
                child: ElevatedButton(
                  child: Text("大按钮"),
                  onPressed: () {},
                ),
              ),
              //   大圆形按钮
              SizedBox(
                width: 90,
                height: 60,
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text("大圆形"),
                  style: ButtonStyle(
                      shape: MaterialStateProperty.all(CircleBorder())),
                ),
              )
            ],
          )
相关推荐
stella·14 小时前
后端二进制文件,现代前端如何下载
前端·ajax·状态模式·axios·request·buffer·download
奋斗猿14 小时前
Less vs Scss 全解析:从语法到实战的前端样式预处理器指南
前端
Web - Anonymous14 小时前
使用Vue3 + Elementplus + Day.js 实现日期选择器(包括日、周、月、年、自定义) - 附完整示例
前端·javascript·vue.js
冴羽14 小时前
2025 年 HTML 年度调查报告亮点速览!
前端·javascript·html
张元清14 小时前
浏览器硬导航优化:提升用户体验的关键
前端·javascript·面试
程序员爱钓鱼14 小时前
Node.js 编程实战:博客系统 —— 用户注册登录与文章管理
前端·后端·node.js
xkxnq14 小时前
第二阶段:Vue 组件化开发(第 23天)
前端·javascript·vue.js
zcz160712782114 小时前
nmcli常见操作
前端·chrome
晴栀ay14 小时前
JS的超集——TypeScript
前端·react.js·typescript
EndingCoder14 小时前
高级类型:联合类型和类型别名
linux·服务器·前端·ubuntu·typescript