简体   繁体   English

更改颜色 ListView.Builder onPressed Flutter

[英]Change color ListView.Builder onPressed Flutter

I want to change the color.我想改变颜色。 if I choose index with value 'einamal'(true) it is will be green else (false) red.如果我选择值为“einamal”(真)的索引,它将是绿色,否则(假)红色。

List<String> _choices = <String>[ 'einmal','zweimal', 'dreimal', 'viemal' ];
List<bool> _hasBeenPressed = [true, false, false, false];

 Widget _buildChoice() {

    return Container(
      height: MediaQuery.of(context).size.height/4,
      child: ListView.builder(
          itemCount: _choices.length,
          itemBuilder: (BuildContext context, int index)
          {
            return RaisedButton(
              child: new Text(_choices[index]),
              textColor: _hasBeenPressed[index] ? Colors.white : Colors.green,
              color: _hasBeenPressed[index] ? Colors.green : Colors.white,
              onPressed: () =>
              {
                setState(() {
                  if(_choices[index] == 'einmal') {
                    _hasBeenPressed[index] = !_hasBeenPressed[index];
                  }
                })
              },
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0)
              ),
            );
          }
      ),

    );
  }

Screenshot of implementation实现截图

You need another variable to store your actual answer, in your case it will be,您需要另一个变量来存储您的实际答案,在您的情况下,它将是,

String answer = "einmal";

Now, you just need a String to store which option the user has selected and not a List, like this,现在,您只需要一个String来存储用户选择的选项而不是列表,就像这样,

String selected = "";

Now, whenever user selects an option, update your selected , like this,现在,每当用户选择一个选项时,更新您的selected ,就像这样,

onPressed: () => {
  setState(() {
    selected = _choices[index];
  })
},

Now, use this to get correct color,现在,用它来获得正确的颜色,

textColor: selected == _choices[index] ? Colors.white : Colors.green,
color: selected == _choices[index]
         ? (selected == answer ? Colors.green : Colors.red)
         : Colors.white,

Full code,完整的代码,

List<String> _choices = <String>['einmal', 'zweimal', 'dreimal', 'viemal'];
String answer = "einmal";

String selected = "";

Widget _buildChoice() {
  return Container(
    height: MediaQuery.of(context).size.height / 4,
    child: ListView.builder(
      itemCount: _choices.length,
      itemBuilder: (BuildContext context, int index) {
        return RaisedButton(
          child: new Text(_choices[index]),
          textColor:
              selected == _choices[index] ? Colors.white : Colors.green,
          color: selected == _choices[index]
              ? (selected == answer ? Colors.green : Colors.red)
              : Colors.white,
          onPressed: () => {
            setState(() {
              selected = _choices[index];
            })
          },
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0)),
        );
      }),
  );
}

在此处输入图像描述

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM