我正在从事一个涉及许多按钮的家庭自动化项目!但是,刚才我遇到了这个小问题,原因是我的项目中的行太多,因此很难在需要时更改要更改的内容。我该如何创建一个类或函数来将所有这些按钮都调用到Home类,这样就不会让人产生压力。但是我希望仍然能够正常更改按钮,而不会出现问题。如果可能的话,将创建一个包含所有这些按钮的button.dart文件。如果向下滚动一点,您将看到按钮从何处开始,它已注释。我没有粘贴所有按钮,因为我有500多行。
这是我所拥有的:
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int bateria = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[800],
appBar: AppBar(
backgroundColor: Colors.grey[700],
title: Row(
children: <Widget>[
Title(
color: Colors.white,
child: Icon(
Icons.adjust,
color: Colors.green,
),
),
Padding(
padding: const EdgeInsets.only(left: 5),
child: Text(
"Bem Vindo Nilton",
style: TextStyle(color: Colors.black),
),
),
],
),
),
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text(
'Brazil, Paraná, Curitiba',
style: TextStyle(
color: Colors.black,
letterSpacing: 1,
fontSize: 15,
),
),
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 130),
child: Text(
'23°C',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
letterSpacing: 1,
fontSize: 50,
),
),
),
//invert_colors
Padding(
padding: new EdgeInsets.only(left: 83),
child: new FittedBox(
fit: BoxFit.none,
child: new Icon(Icons.invert_colors, size: 15,),
),
),
Text(
'80%',
style: TextStyle(
color: Colors.black,
letterSpacing: 1,
fontSize: 15,
),
),
],
),
Divider(
height: 30.0,
color: Colors.grey[600],
),
Align(
alignment: Alignment.centerLeft,
child:Text(
"23:05",
style: TextStyle(
color: Colors.black,
letterSpacing: 1,
fontSize: 30,
),
),
),
Divider(
height: 25.0,
color: Colors.grey[600],
),
/*
Buttons start here
Botões 1 Fileira
*/
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: RaisedButton(
// remove the default padding the raised button has
padding: EdgeInsets.zero,
onPressed: () {
setState(() {
bateria -= 1;
if (bateria <= 0)
{
bateria = 0;
}
});
},
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5,right: 8, bottom: 10),
child: Icon(
Icons.stay_primary_portrait,
size: 35,
),
),
Padding(
padding: EdgeInsets.only(top: 7,left: 0,right: 0, bottom: 0),
child: new FittedBox(
fit: BoxFit.none,
child: new Icon(Icons.battery_charging_full, size: 10,),
),
),
Padding(
padding: EdgeInsets.only(top: 0,right: 0, bottom: 10, left: 0),
child: Text("Lock\n$bateria%"),
),
],
),
Padding(
padding: EdgeInsets.only(top: 8, right: 17),
child: Text(
"Door Lock \nGarage",
style: TextStyle(fontSize: 13),
),
),
],
),
),
),
),
SizedBox(width: 30.0),
//Botao 2
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: RaisedButton(
// remove the default padding the raised button has
padding: EdgeInsets.zero,
onPressed: () {
},
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5,right: 25, bottom: 10),
child: Icon(
Icons.lightbulb_outline,
size: 35,
),
),
Padding(
padding: EdgeInsets.only(top: 0,right: 0, bottom: 20, left: 0),
child: Text("On"),
),
],
),
Padding(
padding: EdgeInsets.only(top: 8, right: 17),
child: Text(
"Lâmpada 1\nSchuma",
style: TextStyle(fontSize: 13),
),
),
],
),
),
),
),
尝试:
class CustomButton extends StatelessWidget {
// define this parameters as you will need them
final Function onPressed;
final IconData icon;
final String text;
final String text2;
// define a constructor for the class custom button
CustomButton({this.onPressed, this.icon, this.text, this.text2});
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
height: 90.0,
width: 90.0,
child: RaisedButton(
padding: EdgeInsets.zero,
color: Colors.grey,
onPressed: onPressed,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5, right: 25, bottom: 10),
child: Icon(
// assign the defined icon above to the icon here
icon,
size: 35,
),
),
Padding(
padding:
EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
// assign the defined string above to the text here
child: Text(text),
),
Padding(
padding: EdgeInsets.only(top: 8, right: 17),
child: Text(
text2,
style: TextStyle(fontSize: 13),
),
),
],
),
],
),
),
),
);
}
}
是的,您可以定义一个名为CustomButton
的类,如下所示:
class CustomButton extends StatelessWidget {
// define this parameters as you will need them
final Function onPressed;
final IconData icon;
final String text;
// define a constructor for the class custom button
CustomButton({this.onPressed, this.icon, this.text});
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
height: 90.0,
width: 90.0,
child: FlatButton(
// remove the default padding the raised button has
padding: EdgeInsets.zero,
// assigned the defined onpressed function above to the one here
onPressed: onPressed,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5, right: 25, bottom: 10),
child: Icon(
// assign the defined icon above to the icon here
icon,
size: 35,
),
),
Padding(
padding:
EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
// assign the defined string above to the text here
child: Text(text),
),
],
),
],
),
),
),
);
}
}
然后在主屏幕内,您可以在需要时随时调用CustomButton
,如下所示:
Row(
children: <Widget>[
// custom button 1 here
CustomButton(
icon: Icons.access_alarm,
text: 'Button 1',
onPressed: () => print('Do something'),
),
// custom button 2 here
CustomButton(
icon: Icons.access_alarm,
text: 'Button 2',
onPressed: () => print('Do something'),
),
// custom button 3 here
CustomButton(
icon: Icons.access_alarm,
text: 'Button 3',
onPressed: () => print('Do something'),
),
],
),
);
我希望这会有所帮助