目 录CONTENT

文章目录

Flutter 基础控件篇-->按钮

俊阳IT知识库
2023-03-03 / 0 评论 / 0 点赞 / 716 阅读 / 968 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903956565458952
欢迎访问😃,有任何问题都可留言评论哦~

Flutter 中的按钮也是多种多样,五花八门的,所以本章简单总结一下常用的按钮,及其样式

因为Material组件库中提供了多种按钮组件如RaisedButtonFlatButtonOutlineButton等,

他们大多数属性都一样,所以后面会统一介绍这些属性,并且按钮的外观大都可以通过属性来自定义,所以前面先介绍其默认外观样式

相同点

只要你引入了Material组件库,就会自动有这些按钮,
也就是在dart文件中import 'package:flutter/material.dart';就可以了

Material 库中的按钮都有如下相同点:

  • 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。
  • 有一个onPressed属性来设置点击回调(必写属性),当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

RaisedButton

即漂浮按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
如图:

flutter-button-2

使用方法:

RaisedButton(
  child: Text("normal"),
  onPressed: () {},
);

FlatButton

即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色
如图:

flutter-button-3

使用方法:

FlatButton(
  child: Text("normal"),
  onPressed: () {},
)

OutlineButton

默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
如图:

flutter-button-4

使用方法:

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

IconButton

是一个可点击的图标(Icon),不包括文字,默认没有背景,点击后会出现背景
如图:

flutter-button-5

使用方法:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

图标按钮

RaisedButtonFlatButtonOutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮
如图:

flutter-button-6

使用方法:

RaisedButton.icon(
  icon: Icon(Icons.send),
  label: Text("发送"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
),
FlatButton.icon(
  icon: Icon(Icons.info),
  label: Text("详情"),
  onPressed: _onPressed,
),

自定义按钮(样式)

按钮外观可以通过其属性来定义,不同按钮属性大同小异

这里以FlatButton为例:

源码示例

构造函数如下:

const FlatButton({
  ...  
  @required this.onPressed, //按钮点击回调
  this.textColor, //按钮文字颜色
  this.disabledTextColor, //按钮禁用时的文字颜色
  this.color, //按钮背景颜色
  this.disabledColor,//按钮禁用时的背景颜色
  this.highlightColor, //按钮按下时的背景颜色
  this.splashColor, //点击时,水波动画中水波的颜色
  this.colorBrightness,//按钮主题,默认是浅色主题 
  this.padding, //按钮的填充
  this.shape, //外形
  @required this.child, //按钮的内容
})

属性解释

正如上面构造函数注释的那样,都是自解释的,所以这里只介绍一个属性

elevation

它可以给一个按钮添加阴影,让其他的按钮也可以实现第一种按钮的效果
例如:
elevation: 10,就这样添加就好了

下面给出几个例子看一下就OK了,其他属性不做过多解释

示例:

定义一个蓝色背景,有阴影,并且两边是圆角的按钮
如图:

flutter-button-1

代码:

RaisedButton(
  color: Colors.blue,
  highlightColor: Colors.blue[700],
  colorBrightness: Brightness.dark,
  splashColor: Colors.grey,
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
  onPressed: () {},
)

定义一个圆形按钮:

RaisedButton(
  child: Text("圆形按钮"),
  textColor: Colors.white,
  color: Colors.blue,
  shape: CircleBorder(
	side: BorderSide(color: Colors.white)
  ),
  onPressed: () {},
),

其中shape中的CircleBorder就是直接定义外形为圆形


O_O

0

评论区