flutter图标按钮_Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）...

最新推荐文章于 2024-05-15 22:48:55 发布
最新推荐文章于 2024-05-15 22:48:55 发布
阅读量194 收藏
点赞数
文章标签： flutter图标按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39533659/article/details/111763447
版权

Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下

RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton

FlatButton ：扁平化的按钮，继承自MaterialButton

OutlineButton ：带边框的按钮，继承自MaterialButton

IconButton ：图标按钮,继承自StatelessWidget

我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。constMaterialButton({

Key key,

@requiredthis.onPressed,this.onHighlightChanged,this.textTheme,this.textColor,this.disabledTextColor,this.color,this.disabledColor,this.highlightColor,this.splashColor,this.colorBrightness,this.elevation,this.highlightElevation,this.disabledElevation,this.padding,this.shape,this.clipBehavior =Clip.none,this.materialTapTargetSize,this.animationDuration,this.minWidth,this.height,this.child,

}) :super(key: key);下面我们来看看常用属性

属性 值类型 说明

onPressed VoidCallback ，一般接收一个方法 必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式

child Widget 文本控件

textColor Color 文本颜色

color Color 按钮的颜色

disabledColor Color 按钮禁用时的颜色

disabledTextColor Color 按钮禁用时的文本颜色

splashColor Color 点击按钮时水波纹的颜色

highlightColor Color 点击(长按)按钮后按钮的颜色

elevationdouble阴影的范围，值越大阴影范围越大

padding EdgeInsetsGeometry (抽象类) 内边距

shape ShapeBorder(抽象类) 设置按钮的形状

minWidthdouble最小宽度

heightdouble高度

而在Android中如果我们要修改按钮样式的话，需要通过selector和Shape等方式进行修改，相比较Flutter来说是要麻烦不少的

RaisedButton

RaisedButton的构造方法如下，由于继承自MaterialButton，所以MaterialButton中的大多数属性这边都能用，且效果一致，这里就不在赘述了constRaisedButton({

Key key,

@required VoidCallback onPressed,

ValueChangedonHighlightChanged,

ButtonTextTheme textTheme,

Color textColor,

Color disabledTextColor,

Color color,

Color disabledColor,

Color highlightColor,

Color splashColor,

Brightness colorBrightness,doubleelevation,doublehighlightElevation,doubledisabledElevation,

EdgeInsetsGeometry padding,

ShapeBorder shape,

Clip clipBehavior=Clip.none,

MaterialTapTargetSize materialTapTargetSize,

Duration animationDuration,

Widget child,

})下面我们来看一下属性

onPressed

接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用returnRaisedButton(

onPressed:null,

);如下图所示

下面我们定义一个方法传给onPressed

_log() {

print("点击了按钮");

}

@override

Widget build(BuildContext context) {returnRaisedButton(

onPressed: _log,

);

}

点击按钮后会调用log方法。

child

按钮文本控件，一般都是传一个Text WidgetreturnRaisedButton(

onPressed: _log,

child: Text("浮动按钮"),

);

color

按钮的颜色returnRaisedButton(

onPressed: _log,

child: Text("浮动按钮"),

color: Colors.red,

);

textColor

按钮的文本颜色returnRaisedButton(

onPressed: _log,

child: Text("浮动按钮"),

color: Colors.red,

textColor: Colors.white,

);

splashColor

点击按钮时水波纹的颜色returnRaisedButton(

onPressed: _log,

child: Text("浮动按钮"),

color: Colors.red,

textColor: Colors.white,

splashColor: Colors.black,

);

highlightColor

高亮颜色，点击(长按)按钮后的颜色returnRaisedButton(

onPressed: _log,

child: Text("浮动按钮"),

color: Colors.red,

textColor: Colors.white,

splashColor: Colors.black,

highlightColor: Colors.green,

);

elevation

阴影范围，一般不会设置太大returnRaisedButton(

onPressed: _log,

child: Text("浮动按钮"),

color: Colors.red,

textColor: Colors.white,

splashColor: Colors.black,

highlightColor: Colors.green,

elevation:30,

);

padding

内边距，其接收值的类型是EdgeInsetsGeometry类型的，EdgeInsetsGeometry是一个抽象类，我们来看看其实现类

我们一般都用EdgeInsets类中的方法来设置padding

常用方法如下//单独设置左上右下的间距，四个参数都要填写

const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);//单独设置左上右下的间距，四个均为可选参数

constEdgeInsets.only({this.left = 0.0,this.top = 0.0,this.right = 0.0,this.bottom = 0.0});//一次性设置上下左右的间距

const EdgeInsets.all(doublevalue)

: left= value, top = value, right = value, bottom =value;示例：

EdgeInsets.all()

padding: EdgeInsets.all(20)

EdgeInsets.fromLTRB()

padding: EdgeInsets.fromLTRB(0,30,20,40)

EdgeInsets.only()

padding: EdgeInsets.only(top:30)

shape

shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类，我们来看看有哪些实现类

可以看到，实现类还是很多的，我们主要来看看常用的即可。

BeveledRectangleBorder 带斜角的长方形边框

CircleBorder 圆形边框

RoundedRectangleBorder 圆角矩形

StadiumBorder 两端是半圆的边框

我们来简单用一用，在用之前我们先来看一下

常用的两个属性

side 用来设置边线(颜色，宽度等)

borderRadius 用来设置圆角

side接收一个BorderSide类型的值，比较简单，这里就不介绍了，看一下构造方法constBorderSide({this.color = const Color(0xFF000000),this.width = 1.0,this.style =BorderStyle.solid,

})borderRadius 接收一个BorderRadius类型的值，常用方法如下

我们可以把borderRadius分为上下左右四个方向，下面的方法都是对这四个方向进行设置，

all 配置所有方向

cricular 环形配置，跟all效果差不多，直接接收double类型的值

horizontal 只配置左右方向

only 可选左上，右上，左下，右下配置

vertical 只配置上下方向

具体配置大家自行尝试

我们来简单用一下

BeveledRectangleBorder

带斜角的长方形边框

shape: BeveledRectangleBorder(

side: BorderSide(

color: Colors.white,

),

borderRadius: BorderRadius.all(Radius.circular(10))

),

CircleBorder

圆形边框

shape: CircleBorder(

side: BorderSide(

color: Colors.white,

),

),

RoundedRectangleBorder

圆角矩形

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.all(Radius.circular(10)),

),

StadiumBorder

两端是半圆的边框

shape: StadiumBorder(),

FlatButton

FlatButton跟RaisedButton用法基本一致，下面我们就直接用一下/*扁平按钮*/

class FlatBtn extendsStatelessWidget {

_log() {

print("点击了扁平按钮");

}

@override

Widget build(BuildContext context) {returnFlatButton(

onPressed: _log,

child: Text("扁平按钮"),

color: Colors.blue,

textColor: Colors.black,

shape: RoundedRectangleBorder(

side: BorderSide(

color: Colors.white,

width:1,

),

borderRadius: BorderRadius.circular(8)),

);

}

}

OutlineButton

注意，OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致

下面我们直接来使用/*带边线的按钮*/

class outlineBtn extendsStatelessWidget {

_log() {

print("点击了边线按钮");

}

@override

Widget build(BuildContext context) {//TODO: implement build

returnOutlineButton(

onPressed: _log,

child: Text("边线按钮"),

textColor: Colors.red,

splashColor: Colors.green,

highlightColor: Colors.black,

shape: BeveledRectangleBorder(

side: BorderSide(

color: Colors.red,

width:1,

),

borderRadius: BorderRadius.circular(10),

),

);

}

}效果如下：

IconButton

IconButton是直接继承自StatelessWidget的，默认没有背景

我们来看一下他的构造方法constIconButton({

Key key,this.iconSize = 24.0,this.padding = const EdgeInsets.all(8.0),this.alignment =Alignment.center,

@requiredthis.icon,this.color,this.highlightColor,this.splashColor,this.disabledColor,

@requiredthis.onPressed,this.tooltip

})可以看到，icon是必填参数

icon接收一个Widget，但是一般我们都是传入一个Icon WidgetfinalWidget icon;其他属性跟MaterialButton中的属性用法基本一致

我们来用一下/*图标按钮*/

class IconBtn extendsStatelessWidget {

_log() {

print("点击了图标按钮");

}

@override

Widget build(BuildContext context) {returnIconButton(

icon: Icon(Icons.home),

onPressed: _log,

color: Colors.blueAccent,

highlightColor: Colors.red,

);

}

}效果如下

我们也可以传一个Text或其他Widget，这个大家自行尝试吧

Flutter中Button内容大概就是这些

weixin_39533659
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter图标按钮_Flutter入门（23）：Flutter 组件之 IconButton 详解
weixin_35600369的博客
12-30 4510
1. 基本介绍FlatButton 是一个 google 风格的扁平化按钮，使用方法与 Flutter 组件之 RaisedButton 详解 一致，这里就按照 RaisedButton 的讲解方式过一遍样式。2. 示例代码代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。3. FlatButton 使用3.1 创建容器优雅的编程，首先创建一个 iconb...
flutter图标按钮_Flutter 之 常用按钮控件集锦一
weixin_39963341的博客
12-21 683
写文章很累的,还得录制屏幕做gif图，打赏关注的来一波呗技术交流QQ群: 4901132341.普通Button按钮:在Flutter中使用RaisedButton 使用起来很简单，给源码的参数添加下注释，自己看吧。///注:Flutter SDK源码const RaisedButton({Key key,//点击回调@required this.onPressed,//水波纹高亮变化回调this...
Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
热门推荐
喻志强的博客
12-17 8万+
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下 RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton FlatButton ：扁平化的按钮，继承自MaterialButton OutlineButton ：带边框的按钮，继承自MaterialButton IconB...
Flutter 中的 IconButton 小部件：全面指南
smileKH的博客
05-15 866
IconButton是一个带有图标的按钮小部件，它继承自，因此具有 Material Design 中按钮的所有特性。当用户点击IconButton时，可以执行一个回调函数。IconButtoncolor: Colors.blue, // 设置图标颜色// 按钮点击事件},highlightColor: Colors.lightBlueAccent, // 设置按钮高亮颜色。
Flutter RaisedButton FlatButton OutlineButton ButtonBar
老孟Flutter
12-11 2994
基本属性如下： onPressed 点击时触发，如果不设置此属性 Button为不可用状态 onHighlightChanged 高亮变化回调，参数：是否高亮，按下时高亮，抬起不高亮， textTheme 字体theme，属性有：ButtonTextTheme.normal、ButtonTextTheme.accent、ButtonTextTheme.primary ...
flutter图标按钮_【Flutter 1-17】Flutter手把手教程UI控件——【多图预警】按钮详解...
weixin_39852491的博客
12-21 349
作者 | 弗拉德来源 | 弗拉德(公众号：fulade_me)Material 风格中常用的按钮有三种RaiseButton、FlatButton、OutlineButton。这三种按钮都是继承了MaterialButton，而MaterialButton又继承自StatelessWidget。RaiseButton：带有阴影效果的按钮，默认带有灰色背景，点击下去会有点击效果和阴影。FlatBut...
浅识Flutter 基本组件之按钮组件 Raisebutton\ FlatButton\ OutlineButton按钮
qq_43336158的博客
04-01 2200
按钮组件是应用程序中用于交互的最常用的组件之一, MaterialWidget库中提供了多种按钮Widget,如 RaisedButton(凸起按钮组件)、FlatButton(扁平按钮组件）和OutlineButton(带边框按钮组件)等，它们都是直接或间接对RawMaterialButton的包装定制,从而形成不同的外观样式，所以它们的属性和使用方法基本一样.
flutter图标按钮_flutter 导航栏返回按钮带图标
weixin_34139050的博客
01-12 1356
提供一种思路吧import 'package:flutter/material.dart';class RegisterPages extends StatefulWidget {@override_RegisterPagesState createState() => _RegisterPagesState();}class _RegisterPagesState extends Stat...
Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar
达帮主
11-23 535
Flutter 按钮组件 Flutter里面有很多的Button组件很多，常见的按钮组件有：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloationActionButton等.. 组件 描述 RaisedButton 凸起的按钮，其实就是Material Design风格的Button FlatButton 篇平化的按钮 OutlineButton 线框按钮 IconButton
flutter图标按钮_Flutter 中的常见的按钮组件 以及自定义按钮组件
weixin_29913191的博客
01-12 550
import 'package:flutter/material.dart';class ButtonDemoPage extendsStatelessWidget {const ButtonDemoPage({Key key}) : super(key: key);@overrideWidget build(BuildContext context) {returnScaffold(appBar...
flutter_widgets.zip
07-14
在Flutter中，有多种类型的按钮，如`ElevatedButton`（原为`FlatButton`和`OutlineButton`），用于创建具有浮雕效果的按钮，以及`IconButton`，用于显示图标并响应点击事件。这些按钮可以自定义颜色、形状和字体样式...
flutter-common-widgets-app-master.zip
11-15
3. **按钮组件**：如`RaisedButton`、`FlatButton`和`IconButton`，这些是用户交互的关键，提供了不同样式的按钮。 4. **表单组件**：`TextField`用于输入框，`Checkbox`、`RadioButton`和`Switch`用于复选、单选和...
flutter_base_demo:flutter组件学习
04-13
6. **Button**: 包括FlatButton、OutlineButton、RaisedButton等多种类型，用于响应用户点击事件，触发相应操作。 7. **StatefulWidget** 和 **State**: Flutter中，组件分为StatelessWidget（无状态组件）和...
Flutter 订单管理 Demo 涵盖大部分控件用法 --新手可以开始学习开发
05-16
- ` RaisedButton/FlatButton`：用于执行操作，如添加、删除、支付订单。 - `Icons`：使用Flutter内置的图标库，增强UI的可读性。 3. **状态管理**：在订单管理中，可能需要处理动态数据，如订单状态的变化。...
future_button:可自定义的Material和Cupertino按钮，带有进度指示器等
05-10
FlatButton （普通+图标） IconButton OutlineButton （普通+图标） RaisedButton （普通+图标） 要将按钮转换为FutureButton ，只需添加Future前缀，并确保onPressed回调的类型为Future<void> Function() ，而...
开题报告电影票订票APP的设计与实现 已通过开题答辩的.doc
07-30
近些年的电影在人们文娱活动中占据重要地位，另外，由于人们的生活越来越富有，越来越多的人们不再选择在家里看电影，而是选择去电影院看电影。但是，以往的售票方式是需要工作人员一张张的录入到账户薄中的，这一模式已不再适应现在的实际情况，因为手动的操作不仅繁琐还容易存在差错。随着电子商务的发展，网络购票已经成为一种趋势，电子影票也已经慢慢走入人们的生活。目前，网票网作为国内首家全国性的网上选座购买电影票平台完全实现网上/手机查看影讯、自助选座、网银支付、自助验票全自助化营运模式。
Magene_C506_1722330141_905661_1722351868.fit
最新发布
07-30
Magene_C506_1722330141_905661_1722351868.fit
麻雀搜索算法SSA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5631.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
用 flutter 使用flutter_blue写一个读取的domo
05-20
好的，以下是一个使用 Flutter 和 flutter_blue 包读取 BLE 设备的代码示例： 首先，需要在 pubspec.yaml 文件中添加 flutter_blue 依赖： ```yaml dependencies: flutter: sdk: flutter flutter_blue: ^0.7.3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值