在flutter中实现多选交错网格视图

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multi-Select Staggered Grid View'),
        ),
        body: MultiSelectStaggeredGridView(),
      ),
    );
  }
}

class MultiSelectStaggeredGridView extends StatefulWidget {
  @override
  _MultiSelectStaggeredGridViewState createState() =>
      _MultiSelectStaggeredGridViewState();
}

class _MultiSelectStaggeredGridViewState extends State<MultiSelectStaggeredGridView> {
  List<bool> _selections = List.generate(20, (index) => false);

  @override
  Widget build(BuildContext context) {
    return StaggeredGridView.countBuilder(
      crossAxisSpacing: 6,
      mainAxisSpacing: 6,
      crossAxisCount: 4,
      itemBuilder: (context, index) => _buildItem(index),
      staggeredTileBuilder: (index) => StaggeredTile.fit(2),
      itemCount: 20,
    );
  }

  Widget _buildItem(int index) {
    return Card(
      child: InkWell(
        onTap: () {
          setState(() {
            _selections[index] = !_selections[index];
          });
        },
        child: Column(
          children: [
            Icon(Icons.star, color: _selections[index] ? Colors.yellow : Colors.grey),
            Text('Item $index'),
          ],
        ),
      ),
    );
  }
}

staggeredTileBuilder: (index) => StaggeredTile.fit(2),

onTap: () {
  setState(() {
    _selections[index] = !_selections[index];
  });
},