Flutter组件之按钮(RaisedButton)
凸起按钮组件(RaisedButton)是Material Design中的button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸的效果。
常用属性如下:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
color | Color | null | 组件的颜色 |
disabledColor | Color | ThemeData.disabledColor | 组件禁用的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色值 |
onPressed | VoidCallback | null | 当按钮按下时会触发此回调事件 |
child | Widget | 按钮的child通常为一个Text文本组件,用来显示按钮的文本 | |
enable | bool | TRUE | 按钮是否为禁用状态 |
自定义按钮:图片+文字按钮
用InkWell + Stack来形成层级
new InkWell(
child: new Stack(
alignment: Alignment.center,
children: <Widget>[
new Image.asset("images/ic_launcher_round.png"),
new Text("登录",
style: new TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.red
),),
],
),
onTap: () { },
),
Flutter 给控件加圆角
前言
今天有一小哥哥,想做一个带圆角的按钮,试了好几个,最后选择了iOS风格的CupertinoButton
,是因为其他Button,好像都不能直接设置radius。我其实当时学习其他控件的时候也想过设置圆角这事儿来着。今天偶然看到了一个解决办法,还顺便解决了我一直想给图片加圆角的问题,以下做个笔记
直接上代码
方法一
在你要加圆角的控件外层嵌套一层new Material
比如
RaisedButton
new Material(
child: new RaisedButton(
onPressed: () {},
color: Colors.red[300],
child: new Text(
"RaisedButton",
style: new TextStyle(color: Colors.white),
),
),
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.grey,
elevation: 5.0,
)
Image
new Material(
child: new Image(
image: new NetworkImage(//从网络加载图片并缓存在内存中
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3882265467,3924971696&fm=27&gp=0.jpg"),
width: 200.0,
height: 200.0,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(80.0),
)
图标(Icon)和图标按钮(IconButton)
图标组件(Icon)为展示图标的组件,该组件不可交互,要实现交互的图标,可以考虑使用IconButton组件。图标组件相关的组件有一下几个:
IconButton:可交互的Icon。
Icons:框架自带Icon集合。
IconTheme:Icon主题。
ImageIcon:通过AssetImages或者其他图片显示Icon。
图标组件常用属性如下:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
color | Color | null | 图标的颜色,例如Colors.green[500] |
icon | IconData | null | 展示的具体图标,可以使用Icons图标列表中的任意一个图标即可,如Icons.phone表示一个电话的图标 |
style | TextStyle | null | 文本样式,可定义文本的字体大小、颜色、粗细等 |
size | Double | 24 | 图标的大小,注意需要带上小数位 |
textDirection | TextDirection | TextDirection | Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右,有些则是从右到左。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl |
图标按钮组件(IconButton)是基于Material Design风格的组件,它可以响应按下事件,并且按下时会带一个水波纹的效果。如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可以按下。常用属性如下:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
alignment | AlignmentGeometry | Alignment.center | 定义IconButton的Icon对齐方式,默认为居中。Alignment是可以设置x,y的偏移量的 |
icon | Widget | null | 展示的具体图标,可以使用Icons图标列表中的任意一个图标即可,如Icons.phone表示一个电话的图标 |
color | Color | null | 图标组件的颜色 |
disabledColor | Color | ThemeData.disabledColor | 图标组件禁用的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色值 |
iconSize | double | 24.0 | 图标的大小,注意需要带上小数位 |
onPressed | VoidCallback | null | 当按钮按下时会触发此回调事件 |
ooltip | String | “” | 当按钮按下时的组件提示语句 |
Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)
文章目录
Flutter中的按钮
Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下
- RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton
- FlatButton :扁平化的按钮,继承自MaterialButton
- OutlineButton :带边框的按钮,继承自MaterialButton
- IconButton :图标按钮,继承自StatelessWidget
我们先来看看MaterialButton中的属性,可以看到能设置的属性还是很多的。
const MaterialButton({
Key key,
@required this.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 | 点击(长按)按钮后按钮的颜色 |
elevation | double | 阴影的范围,值越大阴影范围越大 |
padding | EdgeInsetsGeometry (抽象类) | 内边距 |
shape | ShapeBorder(抽象类) | 设置按钮的形状 |
minWidth | double | 最小宽度 |
height | double | 高度 |
而在Android中如果我们要修改按钮样式的话,需要通过selector和Shape等方式进行修改,相比较Flutter来说是要麻烦不少的
RaisedButton
RaisedButton的构造方法如下,由于继承自MaterialButton,所以MaterialButton中的大多数属性这边都能用,且效果一致,这里就不在赘述了
const RaisedButton({
Key key,
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior = Clip.none,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child,
})
下面我们来看一下属性
onPressed
接收一个方法,点击按钮时回调该方法。如果传null,则表示按钮禁用
return RaisedButton(
onPressed: null,
);
下面我们定义一个方法传给onPressed
_log() {
print("点击了按钮");
}
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: _log,
);
}
child
按钮文本控件,一般都是传一个Text Widget
return RaisedButton(
onPressed: _log,
child: Text("浮动按钮"),
);
color
按钮的颜色
return RaisedButton(
onPressed: _log,
child: Text("浮动按钮"),
color: Colors.red,
);
textColor
按钮的文本颜色
return RaisedButton(
onPressed: _log,
child: Text("浮动按钮"),
color: Colors.red,
textColor: Colors.white,
);
splashColor
点击按钮时水波纹的颜色
return RaisedButton(
onPressed: _log,
child: Text("浮动按钮"),
color: Colors.red,
textColor: Colors.white,
splashColor: Colors.black,
);
highlightColor
高亮颜色,点击(长按)按钮后的颜色
return RaisedButton(
onPressed: _log,
child: Text("浮动按钮"),
color: Colors.red,
textColor: Colors.white,
splashColor: Colors.black,
highlightColor: Colors.green,
);
elevation
阴影范围,一般不会设置太大
return RaisedButton(
onPressed: _log,
child: Text("浮动按钮"),
color: Colors.red,
textColor: Colors.white,
splashColor: Colors.black,
highlightColor: Colors.green,
elevation: 30,
);
padding
内边距,其接收值的类型是EdgeInsetsGeometry类型的,EdgeInsetsGeometry是一个抽象类,我们来看看其实现类
FlatButton
FlatButton跟RaisedButton用法基本一致,下面我们就直接用一下
/*扁平按钮*/
class FlatBtn extends StatelessWidget {
_log() {
print("点击了扁平按钮");
}
@override
Widget build(BuildContext context) {
return FlatButton(
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 extends StatelessWidget {
_log() {
print("点击了边线按钮");
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return OutlineButton(
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),
),
);
}
}