让一个特定的动作只对一个按钮有效。

Question

我是flutter和OOP的新手，我正在做一个应用程序，告诉你为一个德语单词选择一个文章.我想知道如何改变按下按钮的颜色，只取决于答案是否正确，并在同一时间禁用所有按钮.但当按下所有3个按钮改变颜色并被禁用。

下面是我的按钮类

import 'package:flutter/material.dart';

class ArticleButton extends StatelessWidget {
  @override
  final String article;
  final Function check;
  final bool onPushed;
  final Color bgColor;
  ArticleButton({this.article,this.check,this.onPushed,this.bgColor});


  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: FlatButton(
        onPressed: onPushed? check:null,
        child: Text(
            "$article",
        style: TextStyle(
          fontSize: 20.0,
          fontFamily: 'Roboto',
        ),),
        splashColor: Colors.grey,
        disabledColor: bgColor,


      ),
    );
  }
}

这是我的主要功能

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'services/word.dart';
import 'package:germanarticle/button.dart';

void main() {
  runApp(MaterialApp(
    home: Home(),
  ));
}
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}



class _HomeState extends State<Home> {
  List<Word> words =[
    Word(article: "Der",word: "Apfel"),
    Word(article: "Die",word: "Erdbeere"),
    Word(article: "Das",word: "Auto"),
  ];

  List<String> articles=['Der',"Die","Das"];
  int index =0;
  int score =0;
  bool enabled=true;
  Color bgColor=Colors.blue;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("$score"),

          Text("${words[index].word}"
              ,style: TextStyle(
              fontSize: 60.0,
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children:

              articles.map((e)=>ArticleButton(
                  article:e,
                  check:(){
                    if (words[index].article == e){
                      setState(() {
                        score++;
                        bgColor=Colors.green;

                      }
                      );

                    }else{
                      setState(() {
                        enabled=false;
                        bgColor=Colors.red;


                      });
                    }

                  },onPushed: enabled,
                bgColor: bgColor,
                  )
              ).toList(),




          ),
          FlatButton(

            onPressed: () {
              setState(() {
              index++;
              enabled =true;

            });
            },
            child: Text("next"),


          )
        ],
      ),

    );
  }
}

谢谢

Answer 1

试试这个，它完美地工作。

// an enum for all your button state
enum ButtonStatus {correct, wrong }

// get the color of your button based on the button state
Color getButtonStatus(ButtonStatus buttonStatus) {
  switch (buttonStatus) {
    case ButtonStatus.correct:
      return Colors.green;
      break;
    case ButtonStatus.wrong:
      return Colors.red;
      break;
    default:
      return Colors.blue;
      break;
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<Word> words = [
    Word(article: "Der", word: "Apfel"),
    Word(article: "Die", word: "Erdbeere"),
    Word(article: "Das", word: "Auto"),
  ];

  // define a button status object here
  ButtonStatus buttonStatus;

  List<String> articles = ['Der', "Die", "Das"];
  int index = 0;
  int score = 0;
  Color bgColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("$score"),
          Text(
            "${words[index].word}",
            style: TextStyle(
              fontSize: 60.0,
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: articles
                .map((e) => ArticleButton(
                      article: e,
                      check: () {
                        if (words[index].article == e) {
                          setState(() {
                            score++;
                            // change the color of the button if correct
                            buttonStatus = ButtonStatus.correct;
                          });
                        } else {
                          setState(() {
                            // change the color of the button if wrong
                            buttonStatus = ButtonStatus.wrong;
                          });
                        }
                      },
                      onPushed: enabled,
                      bgColor: bgColor,
                    ))
                .toList(),
          ),
          FlatButton(
            // add the  color to your flat button, it changes if the answer is correct or wrong and if the button is disabled
            color: getButtonStatus(buttonStatus),
            onPressed: () {
              setState(() {
                index++;
              });
            },
            child: Text("next"),
          )
        ],
      ),
    );
  }
}

我希望这能帮助你。

Answer 2

那是因为你没有在map函数里面改变你的index变量，所以一直是0。提供一些截图草图，说明你想用这个应用实现什么。