将按钮行简化为可调用的函数

问题描述 投票:0回答:1

我正在从事一个涉及许多按钮的家庭自动化项目!但是,刚才我遇到了这个小问题,原因是我的项目中的行太多,因此很难在需要时更改要更改的内容。我该如何创建一个类或函数来将所有这些按钮都调用到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),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);
}
}
flutter flutter-layout
1个回答
0
投票

是的,您可以定义一个名为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'),
          ),
        ],
      ),
    );

我希望这会有所帮助

© www.soinside.com 2019 - 2024. All rights reserved.