Flutter - 在另一个按钮点击时更改颜色答案

【问题标题】：Flutter - change color on another button tapFlutter - 在另一个按钮点击时更改颜色
【发布时间】：2020-02-20 09:55:26
【问题描述】：

我有 5x5 网格的 5xTableRow -> 5xFittedBox。通过点击右上角的按钮，我希望它随机播放数组中描述的颜色（见图）。

我尝试使用“OnChanged”和“onPressed”，但问题是我不知道如何单独访问每个元素

我读到我应该使用“setState”函数来强制flutter重绘某些元素，但问题是我应该把这个函数放在哪里？

还有一种简单的方法可以为小部件和子项指定某种标识符（例如 class= "something" 或 id = "something"）重点是我想使用 for 循环重新着色所有 25 个框，然后我想将这 25 个框存储在一个数组中以用于以后的条件检查。

var colorArr = [0xffd61745, 0xff3569bc, 0xffffffff, 0xfff4862a, 0xffeaed19, 0xff329f64, 
0xff000000];
//playArr is used to store values from 0-5 which corresponds each color => colorArr[playArr[n]]
var playArr = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; 
void shuffleBox() {
  for (var i = 0; i<playArr.length;i++) {
    playArr[i] = new Random().nextInt(6);
    print(playArr[i]);
  }
} 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      centerTitle: true,
      title: Container(
        child: Text(
          'Table Widget',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.shuffle),
          onPressed: shuffleBox,
        ),
      ],
    ),
    body: SingleChildScrollView(
      padding: EdgeInsets.only(top: 12),
      child: Table(
        border: null,
        defaultVerticalAlignment: TableCellVerticalAlignment.top,
        children: <TableRow>[
          TableRow(children: <Widget>[ 
            //this is what i want recolored and/or redrawn
            FittedBox(
              fit: BoxFit.contain,
              child: Container(
                margin: EdgeInsets.all(2),
                color: Color(a),
                width: 48.0,
                height: 48.0,
              ),
            ),
            FittedBox -> repeated 5x, then TableRow again

【问题讨论】：

标签： flutter dart identifier

【解决方案1】：

这是可行的解决方案

final colorArr = [0xffd61745, 0xff3569bc, 0xffffffff, 0xfff4862a, 0xffeaed19, 0xff329f64, 
0xff000000];
//playArr is used to store values from 0-5 which corresponds each color => colorArr[playArr[n]]
var playArr = [];

  @override
 void  initState(){
   _genereateList();
   super.initState();
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(icon: Icon(Icons.shuffle),onPressed: _shuffle,)
        ]
      ),
      body: Center(
        child : GridView.builder(
          itemCount: 25,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),
          itemBuilder : (ctx, index)=>Card(
            child: Text(playArr[index].toString()),
            color: Color(colorArr[playArr[index]])
          )
        )
      ),
    );
  }

  _genereateList(){
    playArr = List.generate(25,(int index)=>Random().nextInt(colorArr.length-1));
    setState((){});
  }
  _shuffle(){
     playArr.shuffle(Random());
    setState((){});
  }

编辑：如果你想更新一个单元格，只需改变他的值。假设您要更改第 3 列第 5 列的项目

update(int index){
setState((){
playArr[index] = 3; //Index of the new color you want to switch to
});
}

那么就这么简单地调用吧

update(22); //3rd Column 5th raw

【讨论】：

如果我想更改 GridView 的每个子项，如何访问它们。例如，网格被打乱了，现在我希望我单击的每个框都将颜色更改为黑色

【解决方案2】：

您可以从 Stateful Widget（类）中的任何位置调用 setState() 函数。

代码应该是这样的；

void shuffleBox() {
   // 1- you can execute your code here
   setState((){
     // 2- or here, inside the setState
   });
   // at this point your code executes after refresh
   print("Refresh ends.");
}

你也可以使用 shuffle() 方法来洗牌 Dart 中的列表： https://api.dart.dev/stable/2.7.1/dart-core/List/shuffle.html

【讨论】：