Flutter学习之自定义组合控件法封装具有项目特色的统一样式的按钮
程序员文章站
2022-06-07 13:43:12
...
1、自定义具有统一样式的按钮控件
import 'package:flutter/material.dart';
/*
* 自定义适合项目特色的统一样式按钮
*/
class DefaultButton extends StatefulWidget {
//点击回调
final GestureTapCallback onPressed;
final String text;
final EdgeInsetsGeometry margin;
EdgeInsetsGeometry marginDefault =
EdgeInsets.fromLTRB(0, 90.0, 0, 30); //按钮默认的margin值
DefaultButton({this.onPressed, this.text, this.margin});
@override
State createState() {
if (this.margin == null) {
return _DefaultButtonState(this.onPressed, this.text, marginDefault);
}
return _DefaultButtonState(this.onPressed, this.text, this.margin);
}
}
class _DefaultButtonState extends State<DefaultButton> {
//点击回调
final GestureTapCallback onPressed;
final String text;
final EdgeInsetsGeometry margin;
_DefaultButtonState(this.onPressed, this.text, this.margin);
@override
Widget build(BuildContext context) {
Widget _SectionBtn = new Container(
margin: this.margin,
child: new Container(
width: 200,
child: RaisedButton(
color: Colors.pink,
highlightColor: Colors.pink[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
child: Text(text ?? ""),
textColor: Colors.white,
onPressed: onPressed,
),
),
);
return _SectionBtn;
}
}
2、使用方法:
Widget _SectionSave = DefaultButton(
margin: EdgeInsets.fromLTRB(0, 30.0, 0, 0),//可选配置,自定义控件中有默认配置
text: “保存”,
onPressed: (){},
);
上一篇: YII ACTION跳转