使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,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}