时间戳

首页 > 解决方案 > 在 dart 中将按钮标题传递到另一个屏幕时出现问题

flutter - 在 dart 中将按钮标题传递到另一个屏幕时出现问题

问题描述

简而言之，我试图将按钮的标题从我的输入屏幕传递给我的计算器模型，一旦进入计算器模型，将根据所选按钮返回一个值。但是，目前我的计算器正在执行任务，而无需等待按钮的标题。关于如何等待按钮标题的任何想法？我尝试了 future、async 和 await 功能，但仍然无法使其正常工作。

输入画面

class InputScreen extends StatefulWidget {
  
  @override
  _InputScreenState createState() =>
      _InputScreenState();
}

class _InputScreenState
    extends State<InputScreen> {
  final MyButton selected = MyButton(title3: 'Female', title4: 'Male', title5: 'Unknown');

  @override
  void dispose() {
    super.dispose();
    selected.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: <Widget>[
          ClipPath(
            clipper: MyClipper(),
            child: Container(
              height: 250,
              width: double.infinity,
              decoration: BoxDecoration(
                gradient: kHeaderGradient,
                image: DecorationImage(
                  image: AssetImage('images/virus.png'),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  AppBar(
                    leading: null,
                    actions: <Widget>[
                      IconButton(
                          icon: Icon(Icons.close),
                          onPressed: () {
                            Navigator.pop(context);
                          }),
                    ],
                    title: Text(
                      'Gender Multiplier',
                      style: kHeaderTextStyle,
                    ),
                    backgroundColor: Colors.transparent,
                    elevation: 0.0,
                  ),
                ],
              ),
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ValueListenableBuilder<Option>(
                valueListenable: selected,
                builder: (context, option, _) => MakeButtons(
                  num0: 3,
                  num1: 6,
                  makeButtonWidth: MediaQuery.of(context).size.width * 0.45,
                  selected: option,
                  onChanged: (newOption) => selected.option = newOption,
                ),
              ),
             
              RoundedButton(
                title: 'Calculate',
                onPressed: () {
                  
                  Calculator calc;
                  calc = Calculator(
                    buttonTitle: selected.title,
                  );

                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ResultsScreen(
                        genderMultiplier: calc.calculate(),
                      ),
                    ),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 80);
    path.quadraticBezierTo(
        size.width / 2, size.height, size.width, size.height - 80);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

计算器型号

class Calculator {
  Calculator({
    this.buttonTitle,
  });

  String buttonTitle;
  

  double _genderModifier


  String calculate() {
    double getMultiplier() {
      if (buttonTitle == 'Male') {return 2;} 
      else if (buttonTitle == 'Female') {return 1;} 
      else {return 0;}
    }
    if (getMultiplier() == 0) {return 'Does not work';} else {
    _genderModifier = 10 * getMultipler();
    return _genderModifier.toStringAsFixed(1);}
  }
}

结果屏幕

class ResultsScreen extends StatelessWidget {

  ResultsScreen({
    @required this.genderMultiplier,
  });

  final String genderMultiplier;
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CALCULATOR'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(15),
            alignment: Alignment.bottomLeft,
            child: Text(
              'Your Result',
            ),
          ),
          ReuseableCard(
            bgColor: kGreyBackgroundColor,
            cardChild: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  genderMultiplier,
                ),
              ],
            ),
          ),
          RoundedButton(
            title: 'Re-Calc',
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

标签： flutterdartparameter-passing

解决方案

您正在使用一个名为的小部件ValueListenableBuilder，但您似乎并不真正知道它的作用。而且我无法真正帮助您了解那里的代码细节，因为我不知道 aMyButton是什么或做什么MakeButtons。看起来很复杂。

但事实上，您不需要知道该小部件是如何工作的，因为我看不出有任何理由首先在您的代码中使用它。

如果有疑问，请选择简单的。简单和工作比复杂而不工作要好得多。

参加你的计算器课，这就是它真正的作用：

String calculate(String buttonTitle) {
  if (buttonTitle == 'Male') return 20.toStringAsFixed(1);

  if (buttonTitle == 'Female') return 10.toStringAsFixed(1); 

  return 'Does not work';
}

尽量不要使事情过于复杂。

如果您需要三态选择，为什么不使用单选按钮呢？简单，容易，教程遍布互联网。那应该行得通。或使用ToggleButtons.

推荐阅读