flutter - 使 GridView 中的列在 Flutter 中可点击

Question

我想让我的 GridView 的各个列都可以点击。我不太明白如何使用 GestureDetector/InkWell 做到这一点。我不明白如何访问网格的整列。

我该怎么做(如果这甚至可以使用 GridView 实现)？如果不可能，我能做到这一点的最佳方法是什么？

GridView.count(
        crossAxisCount: 10,
        children: List.generate(
          50,
          (_) {
            return Container(
              color: mainColor,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white60,
                  shape: BoxShape.circle,
                ),
              ),
            );
          },
        ),
      )

Answer 1

通过小时候使用 InkWell 和一点点数学:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final appTitle = 'Column selecion demonstration';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

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

}

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex  = -1;
  int columnsCount = 10 ;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: GridView.count(
        crossAxisCount: columnsCount,
        children: List.generate(
          50, ( index ) {
            return InkWell(
              onTap: (){
                setState(() {
                  if(selectedIndex != index){
                    selectedIndex = index ;
                  }else{
                    selectedIndex = -1 ;
                  }
                });
              },
              child: Container(
                color: (selectedIndex % columnsCount == index % columnsCount) && selectedIndex != -1 ? Colors.blue : Colors.yellow,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white60,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}