Flutter的button的按钮ElevatedButton

最新推荐文章于 2024-05-22 23:45:52 发布
最新推荐文章于 2024-05-22 23:45:52 发布
阅读量959 收藏
点赞数 1
分类专栏： 前端 html 面试 文章标签： flutter android android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bejpse/article/details/123149169
版权
本文介绍了Flutter 1.22版本新增的ElevatedButton，以及TextButton和OutlinedButton。文章详细讲解了ElevatedButton的属性，包括onPressed、onLongPress、textStyle、backgroundColor等，并提供了相关属性的用法示例和参考链接。
摘要由CSDN通过智能技术生成

前言：

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??高亮色，按钮处于focused, hovered, or p

最低0.47元/天 解锁文章
Bejpse
关注
专栏目录
Flet教程之 按钮控件 ElevatedButton入门（教程含源码）
iCloudEnd的博客
07-04 825
Flet 是一个框架，使您能够轻松地以您喜欢的语言构建实时 Web、移动和桌面应用程序，并与您的团队安全地共享它们。无需前端经验。 ElevatedButton本质上是带有阴影的填充色调按钮。为防止阴影蔓延，请仅在绝对必要时使用它们，例如当按钮需要与图案背景视觉分离时。 带有图标的button button响应点击事件...
Flutter之ElevatedButton详解
江上清风山间明月的博客
05-08 4783
这个按钮有蓝色填充色和白色文字,设置了10像素高度的阴影,并且在点击时打印“Pressed”
Flutter ElevatedButton用法
WEB前端李志杰
04-25 5289
Flutter当中Button的使用及自定义各个样式属性。
【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle
自动人生博客
01-13 3196
按键，在flutter 中，有很多已经内置的button，合理的利用可以快速的开发，但是ElevatedButton中，有一个Buttonstyle，配合起来可以创建自己需要的按钮样式，但是其实个人感觉运用起来有些复杂。欢迎关注，留言，咨询，交流！
flutter的ElevatedButton去掉圆角
zhaoweining2001的博客
07-26 2751
ElevatedButton( style: ButtonStyle( shape: MaterialStateProperty.all( BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)) ) )， child: child onPressed: onPressed, );
Flutter 基础 widgets - Button
it_lanmei的博客
12-28 492
（2）ElevatedButton.icon() 创建一个带图标的凸起按钮。（2）TextButton.icon() 创建一个带图标的文本按钮。onPressed：void Function()，必填，点击事件。（1）ElevatedButton() 创建普通的凸起按钮。（1）TextButton() 创建普通的文本按钮。style: ButtonStyle，按钮样式。child：Widget，必填，按钮内容。中等强调的按钮，重要程度仅次于主按钮。
Flutter 中的 ElevatedButton 小部件：全面指南
最新发布
smileKH的博客
05-22 1824
是 Flutter 的 Material 组件库中的一个按钮小部件，它具有凸起的视觉效果，当用户按下按钮时，按钮会下沉，给人一种按钮被按下的感觉。这种按钮通常用于主行动的触发，如提交表单或打开新页面。onPressed：用户点击按钮时调用的回调函数。child：按钮上显示的文本或小部件。style：用于自定义按钮的样式，包括背景颜色、文本样式等。shape：定义按钮的形状。// 按钮点击事件},primary: Colors.blue, // 按钮背景颜色。
Flutter开发日常 几种Button的使用（OutlinedButton、ElevatedButton）
wangzhongITger的博客
03-23 5348
最近学习Flutter开发，到正式上手公司原有项目重构有段时间了，知识点零零碎碎的，还是在博客里记录更新一下吧，会根据我开发中遇到的内容不断总结更新。 无色背景，有边框的按钮，如下图所示： 代码实现如下： Container( padding: const EdgeInsets.all(14), child: Column( crossAxisAlignment: CrossAxisAlignment.start,//内部组件靠左对其
iOS flutter学习之路 day17
qq_25813441的博客
11-01 237
都是一些基础内容，可以做一个简单的了解，以后多接触，自然就熟悉了 3.2 按钮 Material 组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观，而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有 Material 库中的按钮都有如下相同点： 按下
flutter 实战 之 按钮 ElevatedButton TextButton OutlineButton
wniuniu_的博客
08-02 310
按钮怎么用
flutter FlatButton, RaisedButton, and OutlineButton
MIRINDAOFGUO的博客
03-22 467
flutter FlatButton, RaisedButton, and OutlineButton flutter Material 新的按钮变更 新的改变 FlatButton, RaisedButton, and OutlineButton 已经被 TextButton, ElevatedButton, and OutlinedButton 替换. ButtonTheme 已经被 TextButtonTheme, ElevatedButtonTheme, and OutlinedButtonThem
flutter开发实战-实现自定义按钮类似UIButton效果
一名开发者
08-04 1836
flutter开发实战-实现自定义按钮类似UIButton效果，通过监听手势GestureDetector的onTapDown、onTapUp、onTapCancel、onTap来实现按下背景变换，松开背景恢复默认等效果
修改flutter ElevatedButton的样式(ElevatedButton.styleFrom/ButtonStyle)
一碗单炒饭的专栏
06-03 9047
有两种方式可以实现ElevatedButton的样式的修改 使用 ElevatedButton.styleFrom ElevatedButton.styleFrom({ Color primary, // set the background color Color onPrimary, Color onSurface, Color shadowColor, double elevatio
flutter 点击效果
weixin_44911775的博客
03-25 3027
参考 Widget popularArtistTitleSection = Row( children: [ Expanded( child: Container( margin: const EdgeInsets.only(left: 10.0), child: const Text( "人气艺人", style: TextStyl
Flutter 之按钮组件
艾米的猫儿的博客
02-07 977
Flutter 之按钮组件ElevatedButton、TextButton、OutlinedButton、IconButton、style 样式 MaterialStateProperty、圆角按钮、圆形按钮、改变按钮边；
Flutter Button 按钮
马志武的博客
06-11 8744
目录 参数详解 代码示例 效果图 完整代码 在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、Flo...
ElevatedButton设置背景与字体颜色
丿灬安之若死
05-06 5174
style: ElevatedButton.styleFrom( primary: MyColors.color_main, //change background color of button onPrimary: Colors.white, //change text color of button shape: RoundedRectangleBorder( ...
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、付费专栏及课程。

余额充值