按下按钮后返回彩色框

Question

我正在努力学习颤抖，现在我正在按下按钮。

我有一个非常简单的程序，其中整数sum = 5.如果用户在文本字段中返回5并单击提交按钮，我的目标是返回提交按钮下方的绿色方块。如果用户打印任何其他内容，则方块将为红色。

我实际上不知道从哪里开始我的代码更多，所以任何帮助我使我朝着正确的方向非常感激。谢谢。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'buttonclicks',
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      home: FirstClass(),
    );
  }
}

class FirstClass extends StatefulWidget {
  @override
  _FirstClassState createState() => _FirstClassState();
}

class _FirstClassState extends State<FirstClass> {
  int sum = 5;
  String enterAnswer;

  void handleCorrect() {
    setState(() {
      Container(
        height: 60.0,
        width: 70.0,
        decoration: BoxDecoration(color: Colors.green),
        child: Text('CORRECT'),
      );
    });
  }

  void handleFalse() {
    setState(() {
      Container(
        height: 60.0,
        width: 70.0,
        decoration: BoxDecoration(color: Colors.red),
        child: Text('FALSE'),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BUTTON-CLICKS'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Container(
                width: 50.0,
                child: TextField(
                  textAlign: TextAlign.center,
                  autofocus: true,
                  keyboardType: TextInputType.number,
                  onChanged: (val) {
                    enterAnswer = val;
                  },
                ),
              ),
              RaisedButton(
                  child: Text('SUBMIT'),
                  onPressed: () {
                    if (enterAnswer.isNotEmpty) {
                      if (enterAnswer == sum) {
                        handleCorrect();   //setState
                      } else {
                        handleFalse();    //setState
                      }
                    }
                  }),
              Container(
                //handleCorrect or handleFalse
                child: Text("RETURN A GREEN OR A RED BOX"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

如下所示。单击按钮时应调用setState并设置某个状态以确定要显示的颜色。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'buttonclicks',
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      home: FirstClass(),
    );
  }
}

class FirstClass extends StatefulWidget {
  @override
  _FirstClassState createState() => _FirstClassState();
}

class _FirstClassState extends State<FirstClass> {
  int sum = 5;
  String enterAnswer;
  Color containerColor;

  void setColorForAnswer()
  {
    setState(() {
     containerColor = enterAnswer != null && enterAnswer.isNotEmpty
                    ? (int.parse(enterAnswer) == sum
                        ? Colors.green
                        : Colors.red)
                    : Colors.transparent; 
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BUTTON-CLICKS'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Container(
                width: 50.0,
                child: TextField(
                  textAlign: TextAlign.center,
                  autofocus: true,
                  keyboardType: TextInputType.number,
                  onChanged: (val) {
                    enterAnswer = val;
                  },
                ),
              ),
              RaisedButton(
                  child: Text('SUBMIT'),
                  onPressed: () {
                    setColorForAnswer();
                  }),
              Container(
                width: 50,
                height: 50,
                color: containerColor,
              ),
            ],
          ),
        ),
      ),
    );
  }
}