如何根据下面的flutter代码向容器添加on-press功能

Question

这是我用来获取图像和文本的代码。我想知道如何在此处添加新闻。

class Category {
  final String name;
  final String image;

  Category(this.name, this.image);
}

List<Category> categories = categoriesData
    .map((item) => Category(item['name'] as String, item['image'] as String))
    .toList();

var categoriesData = [
  {"name": "QR Scanner", 'image': "assets/images/imgone.png"},
  {"name": "QR Generator", 'image': "assets/images/imgtwo.png"},
  {
    "name": "Calculator",
    'image': "assets/images/imgthree.png"
  },
  {"name": "Text-To-Speech", 'image': "assets/images/imgfour.png"},
];

这是代码，我调用上面的代码来显示图像和文本。前端。

Expanded(
                  child: StaggeredGridView.countBuilder(
                      crossAxisCount: 2,
                      itemCount: categories.length,
                      crossAxisSpacing: 20,
                      mainAxisSpacing: 20,
                      itemBuilder: (context, index) {
                      return Container(
                        padding: EdgeInsets.all(20),
                        height: index.isEven ? 200:240,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(16),
                          image: DecorationImage(
                            image: AssetImage(categories[index].image),
                            fit: BoxFit.fill,
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(categories[index].name, style: kTitleTextStyle)
                          ],
                        ),
                      );
                    },

那么我怎样才能在容器上加压机呢？是的，我有 5 个容器，我想添加 5 个单独的功能。

Answer 1

用 GesuterDectector 包装您的 gridItem container 并使用 onTap

并制作一个函数列表，例如 final List<Function> funcs = [(){}, myFunc, .....];

演示小部件

class MyWidgetX extends StatefulWidget {
  MyWidgetX({Key? key}) : super(key: key);

  @override
  _MyWidgetXState createState() => _MyWidgetXState();
}

class _MyWidgetXState extends State<MyWidgetX> {
  late List<Function> funcs;
  myFun4() {
    print("function 4 from funcList");
  }

  @override
  void initState() {
    super.initState();

    funcs = [
      () {
        print("from funcList index is 0");
      },
      () {
        print("from funcList index is 1");
      },
      () {
        print("from funcList index is 2");
      },
      () {
        print("from funcList index is 3");
      },
      myFun4,
    ];
  }

  @override
  Widget build(BuildContext context) {
    return StaggeredGridView.countBuilder(
      staggeredTileBuilder: (int index) => new StaggeredTile.count(1, 1),
      crossAxisCount: 2,
      itemCount: funcs.length,
      crossAxisSpacing: 20,
      mainAxisSpacing: 20,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            if (index == 0) print("conditinal tapped  0");
            if (index == 1) print("conditinal tapped  1");
            funcs[index]();
          },
          child: Container(
              padding: EdgeInsets.all(20),
              height: index.isEven ? 200 : 240,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text("index $index")),
        );
      },
    );
  }
}

Answer 2

将容器包装在 GestureDetector 或 InkWell

中

  GestureDetector(child: Container(),
        onTap: () {
        callFunction(); // call your function here 
});

但最好使用 GestureDetector 它有很多您可以使用的参数。像 onTap() 更像是 onPressed() 函数

有关详细信息，请查看 docs

如何根据下面的flutter代码向容器添加on-press功能

How can I add on-press function to the containers according to the code below of flutter

containers

function

backend

flutter

flutter-onpressed