Flutter的button的按钮ElevatedButton

最新推荐文章于 2024-05-22 23:45:52 发布
最新推荐文章于 2024-05-22 23:45:52 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： 前端 html 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fwdwqdwq/article/details/123252990
版权

前言：

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。

官网api入口：ButtonStyle

目录:

更多button按钮入口（带图标，或者就是一个图标的按钮）

使用方法：他们的使用方法都一样

1、?TextButton：

效果：

2、?OutlinedButton：

效果：

3、ElevatedButton

效果：

属性API：

1、点击事件 onPressed

2、长按事件 onLongPress?

3、属性：

textStyle? 字体

backgroundColor??背景颜色?

foregroundColor? 字体颜色

overlayColor??

最低0.47元/天 解锁文章
万里长江雪
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter Button 按钮.dart
10-05
在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、...
Flutter Radio 单选按钮
10-21
Flutter Radio 单选按钮
修改flutter ElevatedButton的样式(ElevatedButton.styleFrom/ButtonStyle)
一碗单炒饭的专栏
06-03 8645
有两种方式可以实现ElevatedButton的样式的修改 使用 ElevatedButton.styleFrom ElevatedButton.styleFrom({ Color primary, // set the background color Color onPrimary, Color onSurface, Color shadowColor, double elevatio
【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle
自动人生博客
01-13 2861
按键，在flutter 中，有很多已经内置的button，合理的利用可以快速的开发，但是ElevatedButton中，有一个Buttonstyle，配合起来可以创建自己需要的按钮样式，但是其实个人感觉运用起来有些复杂。欢迎关注，留言，咨询，交流！
flutter组件 ThemeData
freeman_xv1的博客
04-21 457
flutter组件 ThemeData
Flutter - Button样式及参数
a136447572的专栏
12-07 3362
Material 组件库中提供了多种按钮组件如`ElevatedButton`、`TextButton`、`OutlineButton`等，它们都是集成于 ButtonStyleButton
Flutter ElevatedButton用法
WEB前端李志杰
04-25 5085
Flutter当中Button的使用及自定义各个样式属性。
flutter-Button
Restless Breeze
03-17 4848
ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大 圆角设置 ElevatedButton( style: ButtonStyle( shape: MaterialStateProperty.all(RoundedRectangleBorder( borderRadius: BorderRadius.circular(20)))), onPressed: (() {}), child: Text(
Flutter Button.dart
07-09
Flutter Button 按钮样式
Flutter任意拖动的悬浮按钮
06-17
Flutter任意拖动的悬浮按钮，可以更改参数设定边界范围， 内包含多个Demo 仓库地址 https://github.com/ihongka/FlutterDIY
flutter全局悬浮按钮方法及代码.docx
08-26
lutter全局悬浮按钮方法及代码
Flutter之ElevatedButton详解
江上清风山间明月的博客
05-08 4323
这个按钮有蓝色填充色和白色文字,设置了10像素高度的阴影,并且在点击时打印“Pressed”
Flutter基础控件
juer2017的博客
07-05 931
Flutter控件
flutter 实战 之 按钮 ElevatedButton TextButton OutlineButton
wniuniu_的博客
08-02 257
按钮怎么用
Flutter TextButton设置圆角、边框
kgdtl的博客
08-18 8732
TextButton( style: ButtonStyle( //圆角 shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular( 18.67))), //边框 .
Flutter-UI-Button大全
weixin_38716347的博客
08-21 900
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 RawMaterialButton 原始按键 原始的Material按键，按键界的幕后大佬。可接受点击，长按，高亮变化事件，可指定颜色，形状。影深，内边距等属性。 属性 注释 highlightElevation 高亮影深【double】 shape 形状【
Flutter 中的 ElevatedButton 小部件：全面指南
最新发布
smileKH的博客
05-22 578
是 Flutter 的 Material 组件库中的一个按钮小部件，它具有凸起的视觉效果，当用户按下按钮时，按钮会下沉，给人一种按钮被按下的感觉。这种按钮通常用于主行动的触发，如提交表单或打开新页面。onPressed：用户点击按钮时调用的回调函数。child：按钮上显示的文本或小部件。style：用于自定义按钮的样式，包括背景颜色、文本样式等。shape：定义按钮的形状。// 按钮点击事件},primary: Colors.blue, // 按钮背景颜色。
Flutter 中圆角按钮，渐变色按钮
qq_44888570的博客
10-22 2906
如图所示 思路 ElevatedButton组件，我在网上没有找到直接设置的圆角和渐变色背景的属性。笔者的思路是，将按钮的背景色和阴影去除，在其外包裹Container，设置外层容器的圆角和背景色即可。 代码 Container( width: 340, height: 49, //在此设置 decoration: BoxDecoration( borderRadius: BorderRadius.circular(9), gradient: const Lin
Flutter学习笔记11-5分钟快速上手按钮组件ElevatedButton、TextButton、OutlinedButton、IconButton
convex1009848621的博客
11-08 752
5分钟学会使用ElevatedButton、TextButton、OutlinedButton、IconButton
flutter ButtonStyle
07-28
在Flutter中，ButtonStyle是用来自定义按钮样式的一个类。通过使用ButtonStyle，你可以修改按钮的背景颜色、文本样式、边框等属性，以创建自己需要的按钮样式。ButtonStyle可以应用于多种类型的按钮，比如ElevatedButton、TextButton和IconButton等。\[1\] 举个例子，如果你想创建一个自定义的ElevatedButton，你可以使用ButtonStyle来设置按钮的背景颜色、文本样式等。下面是一个使用ButtonStyle的示例代码： ```dart ElevatedButton( onPressed: () {}, child: Text('Custom Button'), style: ButtonStyle( backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(color: Colors.white)), // 其他样式属性 ), ) ``` 在上面的代码中，我们通过ButtonStyle的backgroundColor属性设置了按钮的背景颜色为蓝色，通过textStyle属性设置了按钮文本的颜色为白色。你还可以根据需要设置其他样式属性，比如边框、阴影等。 除了ElevatedButton，你也可以在TextButton和IconButton中使用ButtonStyle来自定义按钮样式。例如，下面是一个使用ButtonStyle的TextButton的示例代码： ```dart TextButton( onPressed: () {}, child: Text('Custom TextButton'), style: ButtonStyle( foregroundColor: MaterialStateProperty.all<Color>(Colors.red), // 其他样式属性 ), ) ``` 总结起来，ButtonStyle是一个用于自定义按钮样式的类，可以应用于多种类型的按钮。通过设置ButtonStyle的各种属性，你可以轻松地创建自己需要的按钮样式。\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle](https://blog.csdn.net/weixin_43444734/article/details/128582374)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Flutter TextButton 详细使用配置、Flutter ButtonStyle样式概述实践](https://blog.csdn.net/zl18603543572/article/details/109545733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值