Gridview 容器中的自来水 Flutter

Question

在 Flutter 中，我有 Gridview 和三个 static 容器。 我正在尝试在容器中实现点击操作。 容器有图像和文本。 我试过 Inkwell。

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "4.0",
        home: Scaffold(
            appBar: AppBar(title: const Text(_title)),
            body: GridView.count(
              crossAxisCount: 3,
            
              children: [
                Container(
                  color: Colors.green,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.work,
                        color: Colors.white,
                        size: 60,
                      ),
                      Text("Work ", style: TextStyle(color: Colors.white, fontSize: 18))
                    ],
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        Icons.account_circle,
                        color: Colors.white,
                      ),
                      Text("Account", style: TextStyle(color: Colors.white))
                    ],
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(
                        Icons.message,
                        color: Colors.white,
                      ),
                      Text("Messages", style: TextStyle(color: Colors.white))
                    ],
                  ),
                ),
              ],
              shrinkWrap: true,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
            )));
  }

我不确定在容器中的什么位置设置 InkWell。 我对 Flutter 有点陌生，任何建议都会有所帮助。

Answer 1

为此，您可以使用Inkwell Widget

InkWell(
      onTap: () { 
              // your action 
          },
      child: YOUR CHILD WIDGET,
),

Answer 2

首先为了更清晰的代码从你的容器中制作小部件，如下所示：

Widget CustomItem(String label, IconData icon, Function()? onTap) {
    return InkWell(
      onTap: onTap,
      child: Container(
        color: Colors.green,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: Colors.white,
              size: 60,
            ),
            Text(label, style: TextStyle(color: Colors.white, fontSize: 18))
          ],
        ),
      ),
    );
  }

然后像这样使用它：

GridView.count(
        crossAxisCount: 3,
        children: [
          CustomItem("Work", Icons.work, () {
            print("work clicked");
          }),
          CustomItem("Account", Icons.account_circle, () {
            print("Account clicked");
          }),
          CustomItem("Messages", Icons.message, () {
            print("Messages clicked");
          })
        ],
        shrinkWrap: true,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),