Question

如何在Flutter中单击StaggeredGridView中的项目？我想添加Navigator并将链接照片发送到另一个屏幕。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Staggered View",
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => new Container(
            height: 120.0,
            width: 120.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://picsum.photos/500/500?random=$index')  ,

                fit: BoxFit.fill,
              ),
              shape: BoxShape.rectangle,
            ),
          ),
          staggeredTileBuilder: (int index) =>
          new StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,

        ),
      ),
    );
  }
}

Answer 1

您可以将itemBuilder返回的窗口小部件包装为可以处理点击事件的窗口小部件，例如GestureDetector或InkWell：

itemBuilder: (BuildContext context, int index) => GestureDetector(
  onTap: () {
    // call Navigator here
  },
  child: Container(
    height: 120.0,
    width: 120.0,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage('https://picsum.photos/500/500?random=$index'),
        fit: BoxFit.fill,
      ),
      shape: BoxShape.rectangle,
    ),
  ),
),

有关GestureDetector或InkWell的更多信息可以在文档中找到

Answer 2

您可以检查以下代码。您需要使用GestureDetector。然后将其推入另一个类。请检查我的答案以获取详细信息。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Staggered View",
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) =>
                        details("https://picsum.photos/500/500?random=$index")),
              );
            },
            child: new Container(
              height: 120.0,
              width: 120.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      'https://picsum.photos/500/500?random=$index'),
                  fit: BoxFit.fill,
                ),
                shape: BoxShape.rectangle,
              ),
            ),
          ),
          staggeredTileBuilder: (int index) =>
              new StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    );
  }
}

class details extends StatelessWidget {
  details(this.image);

  String image;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: Image.network(image),
    );
  }
}

我如何在颤动的交错网格视图中单击项目

2 个答案: