如何实现GridView中不同GridTile通过InkWell点击跳转至对应不同页面

Got it, let's get this sorted for you! The issue right now is that every InkWell is hardcoded to navigate to ParaScreen()—we just need to adjust how we handle the index i to either pass it to ParaScreen (for dynamic content) or map each index to a unique screen. Here are two straightforward solutions:

Option 1: Pass the Index to ParaScreen (Single Screen, Dynamic Content) #

If you want to use the same ParaScreen but show different content based on which tile was tapped, modify ParaScreen to accept an index parameter, then use that index to customize the page.

Step 1: Update ParaScreen to accept an index #

class ParaScreen extends StatelessWidget {
  final int tileIndex; // Add this parameter

  // Constructor requires the index
  const ParaScreen({super.key, required this.tileIndex});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Tile ${tileIndex + 1} Details")),
      body: Center(
        // Use the index to show unique content
        child: Text("You tapped tile number ${tileIndex + 1}"),
      ),
    );
  }
}

Step 2: Pass the index in your InkWell's onTap #

Update your _buildGridTileList method to pass i to ParaScreen:

List<Widget> _buildGridTileList(int count, BuildContext context) => List.generate(
    count,
    (i) => InkWell(
          onTap: () => Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => ParaScreen(tileIndex: i), // Pass the index here
                ),
              ),
          child: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.black)),
            child: Image.asset('images/pic$i.jpg'),
          ),
        ),
);

Option 2: Map Each Index to a Unique Screen #

If you want each tile to open a completely different page, create a list of screen constructors and use the index to pick the right one.

Step 1: Define your unique screens #

First, create the different screens you want to navigate to:

class ScreenOne extends StatelessWidget {
  const ScreenOne({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text("Screen 1")),);
  }
}

class ScreenTwo extends StatelessWidget {
  const ScreenTwo({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text("Screen 2")),);
  }
}

// Add as many screens as you need to match your tile count

Step 2: Create a screen mapping list #

Add this list inside your widget class to link indices to screens:

// List of screen constructors (match the length to your tile count or handle defaults)
List<Widget Function()> _screenMap = [
  () => const ScreenOne(),
  () => const ScreenTwo(),
  () => const ParaScreen(tileIndex: 2), // Reuse ParaScreen if needed
  // Add more screen constructors here...
];

Step 3: Update the onTap to use the mapping #

Modify the InkWell to select the correct screen based on the index:

onTap: () {
  // Handle cases where index exceeds your screen list length
  final targetScreen = i < _screenMap.length 
      ? _screenMap[i]() 
      : const ParaScreen(tileIndex: -1); // Fallback screen

  Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => targetScreen),
  );
},

Why your previous attempt might have failed #

Chances are you tried passing the index but didn't update ParaScreen to accept and use the parameter—without using the index in the screen's build method, you wouldn't see any difference in the UI. Either of the above solutions will fix that!

内容的提问来源于stack exchange，提问作者Mike Osborn