如何在 Flutter 中创建功能按钮？

Question

我是 Flutter 的新手，我正在尝试创建一个功能计算器。我的布局正确。但是，由于某种原因，当我单击按钮并要求应用程序执行某些操作时，我无法更改 main.dart 的状态。我为我的按钮创建了一个单独的类，并使用 Buttons button = Buttons(); 在 main.dart 中调用它们

 import 'package:flutter/material.dart';
import 'button.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text(
              'CALCULATOR',
              style: TextStyle(fontSize: 25.0),
            ),
          ),
        ),
        body: ButtonsBuild(),
      ),
    );
  }
}

Button button = Button();
//We have now created a local variable to store the properties of Button into button. So we can now use its properties in main.dart

class ButtonsBuild extends StatefulWidget {
  @override
  _ButtonsBuildState createState() => _ButtonsBuildState();
}

class _ButtonsBuildState extends State<ButtonsBuild> {
  Widget buildButton(String buttonText) {
    return Padding(
      padding: const EdgeInsets.all(7.4),
      child: FlatButton(
        onPressed: () {
          setState(
            () {
              return button.buttonPressed(buttonText);
            },
          );

        },
        child: Text(
          '$buttonText',
          style: TextStyle(
              fontSize: 30.0,
              fontStyle: FontStyle.normal,
              color: Colors.grey[900]),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(15.0),
          child: Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Text(button.outPut
                    ,
                    style: TextStyle(fontSize: 45.0),
                  )
                ],
              ),
            ),
        ),
        Divider(
          height: 15.0,
        ),
        Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  child: Column(
                    children: <Widget>[
                      Row(
                        //button.buildButton is created coz build button is a property of a separate class that belongs to Button
                        children: <Widget>[
                          buildButton('.'),
                          buildButton('/'),
                          buildButton('*'),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          buildButton('7'),
                          buildButton('8'),
                          buildButton('9'),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          buildButton('4'),
                          buildButton('5'),
                          buildButton('6'),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          buildButton('1'),
                          buildButton('2'),
                          buildButton('3'),
                        ],
                      ),
                      Container(
                        width: 300,
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Expanded(flex:2,
                              child: buildButton('0'),
                            ),
                            Expanded(child: buildButton('=')),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  height: 320,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      buildButton('-'),
                      Expanded(flex: 2,
                        child: buildButton('+'),
                      ),
                      Expanded(
                        child: buildButton('C'),
                      ),
                    ],
                  ),
                )
              ],
            )
          ],
        )
      ],
    );
  }
}

现在下面的代码是我为我的按钮创建了一个单独的类的地方 导入'package:flutter/material.dart';

class Button {
  String buttonText;
  String outPut = '0';

  double num1 = 0.0;
  double num2 = 0.0;
  String operand = '';
  String outPutText = '0';

  Button({
    String buttonText,
    String outPut = '0',
    double num1 = 0.0,
    double num2 = 0.0,
    String operand = '',
    String outPutText = '0',
  }) {
    this.buttonText = buttonText;
    this.outPut = outPut;
    this.num1 = num1;
    this.num2 = num2;
    this.operand = operand;
    this.outPut = outPutText;
  }

  buttonPressed(String buttonText) {
    if (buttonText == 'C') {
      num1 = 0.0;
      num2 = 0.0;
      operand = '';
      outPutText = '0';
    } else if (buttonText == '+' ||
        buttonText == '-' ||
        buttonText == '/' ||
        buttonText == '*') {
      num1 = double.parse(outPut);
      operand = buttonText;
      outPutText = '0';
    } else if (buttonText == '.') {
      if (outPutText.contains('.')) {
        print('Already contains Decimal');
        return;
      } else {
        outPutText = outPutText + buttonText;
      }
    } else if (buttonText == '=') {
      num2 = double.parse(outPut);
      if (operand == '+') {
        outPutText = (num1 + num2).toString();
      }
      if (operand == '-') {
        outPutText = (num1 - num2).toString();
      }
      if (operand == '/') {
        outPutText = (num1 / num2).toString();
      }
      if (operand == '*') {
        outPutText = (num1 * num2).toString();
      }
      num1 = 00;
      num2 = 00;
      operand = '';

    } else {
      outPutText = outPutText = buttonText;
    }
    print(outPutText);
    // setState(() {
    //       outPut = double.parse(outPutText).toStringAsFixed(2);});
      }



      }

Answer 1

您的代码不接受 setState((){});因为现在，它是一个无状态的小部件。将其更改为有状态小部件可能会解决问题。