如何从 Flutter 中的网格视图计数访问生成列表中的特定单元格？

Posted 2023-05-07

【中文标题】如何从 Flutter 中的网格视图计数访问生成列表中的特定单元格？

【英文标题】：How to access specific cell in generated List from grid view count in Flutter?

【发布时间】：2022-01-11 10:46:00

【问题描述】：

这里，我有一个清单。我想在我的 GridView.count 中访问该列表中的特定位置。

就像我有一个列表，a = [133, 118, 117, 116, 115, 114];

我想弄清楚，在我生成 225 个单元格的 List.generate 中，我如何访问存储在此列表中的单元格，a = [133, 118, 117, 116, 115, 114] ;就像我想从 225 个单元格中访问该列表的第 4 项 (116)。

                     a = [133, 118, 117, 116, 115, 114];

                          child: GridView.count(
                            crossAxisCount: 15,
                            childAspectRatio: 1,
                            children: List<Widget>.generate(
                              225,
                              (index) 
                                return Stack(
                                  children: [
                                    GridTile(
                                      child: Container(
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(5),
                                          border:
                                              Border.all(color: Colors.black),
                                        ),
                                      ),
                                    ),
                                  ],
                                );
                              ,
                            ),
                          ),

【参考方案1】：

这是一个解决方案，通过传入您要查找的内容的索引并将其与单元格的索引匹配（如下面的代码所示）：

import 'package:flutter/material.dart';

class GridExample extends StatefulWidget 
  const GridExample(Key? key) : super(key: key);

  @override
  _GridExampleState createState() => _GridExampleState();


class _GridExampleState extends State<GridExample> 
  final a = [133, 118, 117, 116, 115, 114];

  @override
  Widget build(BuildContext context) 
    return Container(
      child: GridView.count(
        crossAxisCount: 15,
        childAspectRatio: 1,
        children: List<Widget>.generate(
          225,
          (index) 
            return Stack(
              children: [
                GridTile(
                  child: Tile(
                    index: index,
                    accessedCell: a[3],
                  ),
                ),
              ],
            );
          ,
        ),
      ),
    );
  


class Tile extends StatefulWidget 
  Tile(
    required this.index,
    required this.accessedCell,
    Key? key,
  ) : super(key: key);

  final int index;
  final int accessedCell;

  @override
  State<Tile> createState() => _TileState();


class _TileState extends State<Tile> 
  bool _isAccessed = false;

  @override
  Widget build(BuildContext context) 
    print(widget.accessedCell);
    print(widget.index);

    if (widget.accessedCell == widget.index) 
      _isAccessed = true;
    

    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: _isAccessed ? Colors.blue : Colors.red),
      ),
      child:
          FittedBox(fit: BoxFit.contain, child: Text(widget.index.toString())),
    );
  

【讨论】：

感谢您这么快回答。这是我的错误，我必须更具体地问这个问题。我想弄清楚，在我的 List.generate 中，我生成了 225 个单元格，如何访问存储在此列表中的单元格，a = [133, 118, 117, 116, 115, 114] ;就像我想从 225 个单元格中访问该列表的第 4 项（116）。

好的，谢谢，是的，我想我现在明白了。我已经更新了我的答案：例如，要查找列表中“113”索引的值（例如 a[3]），您可以传递该索引并按照示例进行匹配。请注意，如果匹配，我将边框更改为蓝色以突出显示。您还可以传入一个值列表以一次匹配多个单元格。希望对您有所帮助，谢谢。