Flutter FlatButton 、OutlineButton 、IconButton 、ButtonBar(按钮组)和自定义按钮
一、FlatButton
之前写过一篇关于 RaisedButton
的文章,RaisedButton 是标准的 Material Design 的 Button 风格设计,文章地址如下:
FlatButton
没有 RaisedButton
默认的阴影,因此看起来是扁平化的。
构造函数如下:
const FlatButton({
Key key,
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior,
FocusNode focusNode,
MaterialTapTargetSize materialTapTargetSize,
@required Widget child,
})
1、FlatButton 按钮使用
FlatButton(
color: Colors.pink,
textColor: Colors.white,
child: Text('扁平按钮'),
onPressed: () {},
),
效果:
二、OutlineButton 边框按钮
OutlineButton
允许我们给 Button 指定 Border 并且设置 Border 的样式:
OutlineButton(
child: Text('边框按钮'),
onPressed: () {},
),
OutlineButton(
borderSide: BorderSide(color: Colors.pink),
child: Text('边框按钮'),
onPressed: () {},
),
效果:
三、IconButton 图标按钮
IconButton
与 使用 FlatButton
或者 RaisedButton
不同的一点是 IconButton 默认实现了高度和宽度的设置,并且是一个圆形的 Button。
这点从 IconButton
的 build 即可以看出:
Widget result = ConstrainedBox(
constraints: const BoxConstraints(minWidth: _kMinButtonSize, minHeight: _kMinButtonSize),
child: Padding(
padding: padding,
child: SizedBox(
height: iconSize,
width: iconSize,
child: Align(
alignment: alignment,
child: IconTheme.merge(
data: IconThemeData(
size: iconSize,
color: currentColor,
),
child: icon,
),
),
),
),
);
因此在使用 Icon Button 的时候我们既可以通过 Icon.size 控制图标大小,也能够控制 padding 属性
IconButton(
splashColor: Colors.pink,
color: Colors.pink,
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
splashColor: Colors.pink,
color: Colors.pink,
padding: EdgeInsets.all(0),
icon: Icon(Icons.search),
onPressed: () {},
)
效果:
三、ButtonBar 按钮组
ButtonBar
可以默认实现一个按钮组,通过 children
属性可以传入多个 Button
而 ButtonBar
内部其实也是基于 Row 实现的,我们自己也可以自己去实现 按钮组
ButtonBar(
children: <Widget>[
RaisedButton(
color: Colors.pink,
textColor: Colors.white,
child: Text('按钮组'),
onPressed: () {},
),
FlatButton(
color: Colors.pink,
textColor: Colors.white,
child: Text('按钮组'),
onPressed: () {},
)
],
)
效果:
四、自定义按钮
所谓的 自定义按钮 其实就是自己封装一次,比如 IconButton
也是一个自定义按钮,无非是框架封装了一层。
比如自己实现一个 PrimaryButton
:
class PrimayButton extends StatelessWidget {
final String text;
final onPressed;
PrimayButton({Key key, this.text, this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: FlatButton(
color: Colors.blue,
textColor: Colors.white,
disabledColor: Colors.blue[100],
disabledTextColor: Colors.white54,
child: Text(this.text),
onPressed: this.onPressed,
),
);
}
}
自定义按钮很大程度上是封装了几种属性,并且将一些属性暴露出去,可以透传进来。
自定义按钮的使用:
Row(
children: <Widget>[
PrimayButton(
text: '自定义按钮',
onPressed: () {
print('自定义按钮自定义按钮');
},
),
PrimayButton(
text: '自定义按钮',
)
],
)
效果:
五、完整代码
文章已经结束啦
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/flutter-flatbutton.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!