时间戳

首页 > 解决方案 > 我如何在颤动中单击交错网格视图中的项目

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

问题描述

如何StaggeredGridView在 Flutter 中单击项目？我想添加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,

        ),
      ),
    );
  }
}

标签： androidflutterdartflutter-layout

解决方案

您可以使用可以处理点击事件的小部件包装由返回的itemBuilder小部件，例如 aGestureDetector或 an 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的更多信息，请参阅文档

推荐阅读