flutter Gridview容器中的点击抖动

rpppsulh 于 2022-11-25 发布在 Flutter

关注(0)|答案(2)|浏览(181)

在Flutter中，我有三个静态容器的Gridview。我正在尝试在容器中实现点击动作。容器有图像和文本。我用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,
            )));
  }

我不确定在容器中的哪里设置墨水井。我对Flutter有点陌生，任何建议都会很有帮助。

flutter

来源：https://stackoverflow.com/questions/74545358/on-tap-in-gridview-container-flutter

2条答案

按热度按时间

wnavrhmk1#

首先，要让代码更简洁，请从容器中创建小部件，如下所示：

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,
      ),

赞(0）回复(0）举报 2022-11-25

bqujaahr2#

您可以使用墨水池Widget来实现此目的

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

赞(0）回复(0）举报 2022-11-25

我来回答

flutter Gridview容器中的点击抖动

2条答案

相关问题

热门标签

最新问答