Flutter GridView 可以通过点击触发吗？

Question

我创建了一个flutter应用程序，我希望Item可以被点击，是否可以在点击时触发网格视图？请帮帮我，怎么做？以下是 dashboard.dart

中的代码

class DashBoard extends StatelessWidget {
  Item item1 = new Item(
      img: "assets/home/calendar.png");
  Item item2 = new Item(
      img: "assets/home/clock.png");
  Item item3 = new Item(
      img: "assets/home/todo.png");
  Item item4 = new Item(
      img: "assets/home/teacher.png");
  Item item5 = new Item(
      img: "assets/home/settings.png");

  @override
  Widget build(BuildContext context) {
    List<Item> myList = [item1, item2, item3, item4, item5];
    var color = 0xff453658;

    return Flexible(
      child: GridView.count(
        childAspectRatio: 1.0,
        padding: EdgeInsets.only(left: 15, right: 15),
        crossAxisCount: 2,
        crossAxisSpacing: 25,
        mainAxisSpacing: 25,
        children: myList.map((data) {
          return Container(
            decoration: BoxDecoration(
              color: Color(color),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(data.img, width: 45),
                  SizedBox(
                    height: 14,
                  ),   
                ]),
          );
        }).toList(),
      ),
    );
  }
}

Answer 1

您可以将 Container 换成 GestureDetector，如下所示

return Flexible(
      child: GridView.count(
        childAspectRatio: 1.0,
        padding: EdgeInsets.only(left: 15, right: 15),
        crossAxisCount: 2,
        crossAxisSpacing: 25,
        mainAxisSpacing: 25,
        children: myList.map((data) {
          return GestureDetector(
            onTap: (){
              performAction(data); // create action handling method
            },
            child: Container(
              decoration: BoxDecoration(
                color: Color(color),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(data.img, width: 45),
                    SizedBox(
                      height: 14,
                    ),
                  ]),
            ),
          );
        }).toList(),
      ),
    );

Answer 2

我会将容器包装在 InkWell 小部件中，并为此设置 onTap 方法。

return Flexible(
      child: GridView.count(
        childAspectRatio: 1.0,
        padding: EdgeInsets.only(left: 15, right: 15),
        crossAxisCount: 2,
        crossAxisSpacing: 25,
        mainAxisSpacing: 25,
        children: myList.map((data) {
          return InkWell(
            focusColor: Colors.transparent,
            hoverColor: Colors.transparent,
            highlightColor: Colors.transparent,
            splashColor: Colors.transparent,
            onTap: (){
              print("pressed");
            },
            child: Container(
              decoration: BoxDecoration(
                color: Color(color),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(data.img, width: 45),
                    SizedBox(
                      height: 14,
                    ),   
                  ]),
            ),
          );
        }).toList(),
      ),
    );

Flutter GridView 可以通过点击触发吗？

Flutter GridView can be trigger with tap?

gridview

touch

flutter