Flutter中常用的Button
- RaisedButton ：凸起的按钮
- FlatButton ：扁平化的按钮
- OutlineButton ：带边框的按钮
- IconButton ：图标按钮 继承StatelessWidget
微信图片_20201126174745.png
flutter中的Button基本上都是继承MaterialButton
先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。
const MaterialButton({
Key key,
@required this.onPressed, //按下事件
this.onLongPress, //长按事件
this.onHighlightChanged, //水波纹高亮变化回调
this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
this.textTheme, //按钮的主题
this.textColor, //文字的颜色
this.disabledTextColor, //按钮禁用时候文字的颜色
this.color, //按钮的背景颜色
this.disabledColor, //按钮禁用的背景颜色
this.focusColor, //获取焦点的颜色
this.hoverColor, //悬停颜色
this.highlightColor, //点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色
this.splashColor, //水波纹的颜色
this.colorBrightness, //按钮主题高亮
this.elevation, //按钮下面的阴影
this.focusElevation, //获取焦点的阴影
this.hoverElevation, //悬停的阴影
this.highlightElevation, //高亮时候的阴影
this.disabledElevation, //未设置点击时的阴影高度
this.padding, //内边距
this.visualDensity, // 按钮布局的紧凑程度
this.shape, //设置形状
this.clipBehavior = Clip.none,
this.focusNode, //在Flutter使用FocusNode来捕捉监听焦点获取与失去
this.autofocus = false,
this.materialTapTargetSize, //是配置组件点击区域大小的属性，很多组件都有
this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
this.minWidth, //最小宽度
this.height, //高度
this.enableFeedback = true, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上
// ，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
this.child, //子view
}) : assert(clipBehavior != null),
RaisedButton VS FlatButton
FlatButton 和 RaisedButton 属性差不多
- RaisedButton ：凸起的按钮
- FlatButton ：扁平化的按钮
shape
shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类，我们来看看有哪些实现类
微信图片_20201126181559.png
可以看到，实现类还是很多的，我们主要来看看常用的即可。
- BeveledRectangleBorder 带斜角的长方形边框
- CircleBorder 圆形边框
- RoundedRectangleBorder 圆角矩形
- StadiumBorder 两端是半圆的边框
常用的两个属性
- side用来设置边线（颜色，宽度等） BorderSide
- borderRadius 用来设置圆角 BorderRadius
我们可以把borderRadius分为上下左右四个方向，下面的方法都是对这四个方向进行设置，
borderRadius
- all 配置所有方向
- cricular 环形配置，跟all效果差不多，直接接收double类型的值
- horizontal 只配置左右方向
- only 可选左上，右上，左下，右下配置
- vertical 只配置上下方向
OutlineButton
OutlineButton默认带有一个边框，我们可以通过属性指定正常状态，跟用户点击状态下的边框颜色。
常用的属性
@required VoidCallback onPressed,
ButtonTextTheme textTheme, //按钮上字体主题
Color textColor, //字体颜色
Color disabledTextColor, //按钮禁用时候文字的颜色
Color color, //按钮背景颜色
Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色
Color splashColor, //水波纹的颜色
double highlightElevation,//高亮时候的阴影
this.borderSide,//按钮边框
this.disabledBorderColor, //按钮禁用时边框的颜色
this.highlightedBorderColor,//高亮时边框的颜色
EdgeInsetsGeometry padding,//边距
ShapeBorder shape, //设置shape
Clip clipBehavior = Clip.none,
Widget child,
简单效果图
代码
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(children: [
RaisedButton(
child: Text("normal"),
onPressed: () {},
),
FlatButton(onPressed: () {}, child: Text("normal")),
OutlineButton(
child: Text("normal"),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
),
RaisedButton.icon(
onPressed: () {}, icon: Icon(Icons.send), label: Text("发送")),
FlatButton(
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(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
),
//自定义button
FlatButton(
color: Colors.amberAccent,
onPressed: () {},
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
) ,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [Icon(Icons.label_important_outlined), Text("喜欢")],
)),
])));
}
}
