flutter从入门到填坑

flutter九宫格看图

2019-10-20  本文已影响0人  寒云暮雨

flutter九宫格图片


b.gif
import 'package:flutter/material.dart';

// ignore: must_be_immutable
class NinePicture extends StatelessWidget {
  List<Map<String, String>> list = [];

  NinePicture(List<Map<String, String>> list) {
    this.list = list;
  }

  void showPhoto(BuildContext context, Map<String, String> img) {
    Navigator.push(context,
        MaterialPageRoute<void>(builder: (BuildContext context) {
      return GestureDetector(
        child: SizedBox.expand(
          child: Hero(
            tag: img,
            child: Image.asset(
              img['img'],
              fit: BoxFit.contain,
            ),
          ),
        ),
        onTap: () {
          Navigator.maybePop(context);
        },
      );
    }));
  }

  @override
  Widget build(BuildContext context) {
    int _crossAxisCount = 1;

    if (list.length == 1) {
      _crossAxisCount = 1;
    } else if (list.length == 2) {
      _crossAxisCount = 2;
    } else {
      _crossAxisCount = 3;
    }
    return GridView.count(
      crossAxisCount: _crossAxisCount,
      mainAxisSpacing: 2.0,
      crossAxisSpacing: 2.0,
      padding: const EdgeInsets.all(4.0),
      children: list.map(
        (Map<String, String> img) {
          return GestureDetector(
            onTap: () {
              showPhoto(context, img);
            },
            child: Hero(
              tag: img['tag'].toString(),
              child: ClipRRect(
                child: Image.asset(
                  img['img'],
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
            ),
          );
        },
      ).toList(),
    );
  }
}

利用GridView实现布局,用Hero动画进行展示

上一篇 下一篇

猜你喜欢

热点阅读