flutter - 即使在分配默认值后，直到我选择一个下拉项目，凸起的按钮才会显示答案

Question

我正在制作一个简单的 SI 计算器，它有一个本金利息字段，以及时间，我有一个下拉菜单来选择货币。
问题是当我按下“计算”RaisedButton 时（查看图像可能会有所帮助）屏幕上什么也没有出现（最初我认为按钮有问题但后来）我发现按下 RaisedButton 后如果我从下拉列表中选择了任何项目然后出现答案为什么会发生这种情况，我设置了一个初始值，因为_selected = 'Rupee'我做错了什么？

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Simple Intrest Calculator',
      home: MyHomePage(),
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.indigo,
        accentColor: Colors.indigoAccent,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _currencies = ['Rupee', 'Dollar', 'Pound'];
  final _minPadding = 5.0;
  var _selected = 'Rupee';

  TextEditingController principalCntr = TextEditingController();
  TextEditingController roiCntr = TextEditingController();
  TextEditingController termCntr = TextEditingController();
  
  String _amount = '0';
  
  @override
  Widget build(BuildContext context) {
    
    TextStyle styles = Theme.of(context).textTheme.headline6;
    
    return Scaffold(
      //resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('S.I Calculator'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.symmetric(vertical: 0, horizontal: _minPadding * 2),
        child: ListView(
          children: [
            getImg(),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: TextField(
                controller: principalCntr,
                keyboardType: TextInputType.number,
                style: styles,
                decoration: InputDecoration(
                  labelText: 'Principal',
                  hintText: 'Enter principal amount',
                  labelStyle: styles,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: TextField(
                controller: roiCntr,
                keyboardType: TextInputType.number,
                style: styles,
                decoration: InputDecoration(
                  labelText: 'Intrest',
                  hintText: 'Enter intrest rate',
                  labelStyle: styles,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: termCntr,
                      keyboardType: TextInputType.number,
                      style: styles,
                      decoration: InputDecoration(
                        labelText: 'Time',
                        hintText: 'Time in years',
                        labelStyle: styles,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(5.0),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 50,),
                  Expanded(
                    child: DropdownButton(
                      value: _selected,
                      onChanged: (newVal) {
                        setState(() {
                          _selected = newVal;
                        });
                      },
                      items: _currencies.map((selectedVal) {
                        return DropdownMenuItem(
                          value: selectedVal,
                          child: Text(selectedVal),
                        );
                      }).toList(),
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: RaisedButton(
                      color: Theme.of(context).accentColor,
                      textColor: Theme.of(context).primaryColor,
                      child: Text('Calculate'),
                      onPressed: (){
                        _amount = _calculateReturns();
                      },
                    ),
                  ),
                  SizedBox(width: 20),
                  Expanded(
                    child: RaisedButton(
                      color: Theme.of(context).primaryColorDark,
                      textColor: Theme.of(context).primaryColorLight,
                      child: Text('Clear', style: TextStyle(fontSize: 20,),),
                      onPressed: (){
                        debugPrint('pressed');
                      },
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(_amount, style: styles,),
            ),
          ],
        ),
      ),
    );
  }

  String _calculateReturns(){
    double principal = double.parse(principalCntr.text);
    double roi = double.parse(roiCntr.text);
    double year = double.parse(termCntr.text);

    double sI = principal + (principal*roi*year)/100;
    String res = 'After $year years, you get $sI';
    return res;
  }

  Widget getImg() {
    AssetImage img = AssetImage('images/money.jpg');
    Image image = Image(image: img, width: 125, height: 125);
    return Container(
      child: image,
      margin: EdgeInsets.all(_minPadding * 10),
    );
  }
}

这是在我点击凸起按钮之后

这是在我从下拉列表中选择一个项目但不要再次单击该按钮之后：

代码演练：

1. 列出了_currencies。
2. 添加了文本输入字段下拉按钮和两个凸起的按钮。
3. 当按下计算按钮时_calculateReturns()调用它返回一个值并将其存储在_amount
4. 输出只是一个文本小部件。

标签： flutterbuttondrop-down-menu

Answer 1

您在按下按钮时忘记更新屏幕，请记住每次需要更改页面内容或更新页面时都必须调用该方法：

       setState(() {   
       
       // code here for values to be updated
       });

因此，在 Raised 按钮的 onPressed 功能中，您必须像这样添加它：

 onPressed: (){
    _amount = _calculateReturns();
    setState(() {    });
               }