Flutter 颤振：长按图片以获得像Instagram一样的缩放预览 我现在有一个图片栅格，我想从Instagram中实现一个特征：如果你长按一个图片，你会得到一个更大的图片出现在屏幕中间。如果停止按，图像将消失

我真的不需要代码，但我就是想不出应该使用哪些小部件

---

像这样的东西可能有包装吗？如果没有，那么如何使用Flutter标准小部件？可能使用longPress上出现的对话框？

您可以使用Peek和Pop

---

是一个基于同名iOS功能的颤振实现。

这是一个改进版，类似于Instagram的UX，背景模糊

我们可以通过组合使用

有状态小部件

、

堆栈

和

BackdropFliter

来实现这一点，下面是示例代码-

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Counter Demo',
      theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blueGrey,
          centerTitle: true,
          title: Text("Demo App"),
        ),
        body: Stacked(),
      ),
    );
  }
}

class Stacked extends StatefulWidget {
  @override
  _StackedState createState() => _StackedState();
}

class _StackedState extends State<Stacked> {
  final List<String> images = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg",
    "7.jpg",
    "8.jpg",
    "9.jpg",
    "10.jpg",
  ];

  bool _showPreview = false;
  String _image = "assets/images/1.jpg";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Stack(
      children: [
        GridView.builder(
          itemCount: images.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onLongPress: () {
                setState(() {
                  _showPreview = true;
                  _image = "assets/images/${images[index]}";
                });
              },
              onLongPressEnd: (details) {
                setState(() {
                  _showPreview = false;
                });
              },
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Card(
                  elevation: 4,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  clipBehavior: Clip.hardEdge,
                  child: Image.asset("assets/images/${images[index]}"),
                ),
              ),
            );
          },
        ),
        if (_showPreview) ...[
          BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 5.0,
              sigmaY: 5.0,
            ),
            child: Container(
              color: Colors.white.withOpacity(0.6),
            ),
          ),
          Container(
            child: Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Image.asset(
                  _image,
                  height: 300,
                  width: 300,
                ),
              ),
            ),
          ),
        ],
      ],
    ));
  }
}

导入“dart:ui”；
进口“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
标题：“计数器演示”，
主题：ThemeData.light（），
家：脚手架(
appBar:appBar(
背景颜色：颜色。蓝灰色，
标题：对，
标题：文本（“演示应用程序”），
),
主体：堆叠（），
),
);
}
}
类堆栈扩展StatefulWidget{
@凌驾
_StackedState createState（）=>\u StackedState（）；
}
类_StackedState扩展状态{
最终列表图像=[
“1.jpg”，
“2.jpg”，
“3.jpg”，
“4.jpg”，
“5.jpg”，
“6.jpg”，
“7.jpg”，
“8.jpg”，
“9.jpg”，
“10.jpg”，
];
bool\u showPreview=false；
字符串_image=“assets/images/1.jpg”；
@凌驾
小部件构建（构建上下文）{
返回安全区(
子：堆栈(
儿童：[
GridView.builder(
itemCount:images.length，
gridDelegate：
SliverGridDelegateWithFixedCrossAxisCount（crossAxisCount:2），
itemBuilder:（构建上下文，int索引）{
返回手势检测器(
onLongPress:（）{
设置状态（）{
_showPreview=true；
_image=“assets/images/${images[index]}”；
});
},
onLongPressEnd:（详细信息）{
设置状态（）{
_showPreview=false；
});
},
孩子：填充(
填充：常数边集全部（4.0），
孩子：卡片(
标高：4，
形状：圆形矩形边框(
边界半径：边界半径。圆形（5.0），
),
clipBehavior:Clip.hardEdge，
子级：Image.asset（“assets/images/${images[index]}”），
),
),
);
},
),
如果（_showPreview）[
背投滤波器(
过滤器：ImageFilter.blur(
sigmaX:5.0，
西格梅：5.0，
),
子：容器(
颜色：颜色。白色。不透明度（0.6），
),
),
容器(
儿童：中心(
孩子：ClipRRect(
边界半径：边界半径。圆形（10.0），
子：Image.asset(
_形象,，
身高：300，
宽度：300，
),
),
),
),
],
],
));
}
}

这只是一个基线示例，您可以修改它以实现您想要的行为

---

另一个简单的方法是，我们可以使用StatefulWidget和IndexedStack来构建它-

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Counter Demo',
      theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blueGrey,
          centerTitle: true,
          title: Text("Demo App"),
        ),
        body: Body(),
      ),
    );
  }
}

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  final List<String> images = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg",
    "7.jpg",
    "8.jpg",
    "9.jpg",
    "10.jpg",
  ];

  int _index = 0;
  String _image = "assets/images/1.jpg";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: IndexedStack(
        index: _index,
        children: [
          GridView.builder(
            itemCount: images.length,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onLongPress: () {
                  setState(() {
                    _index = 1;
                    _image = "assets/images/${images[index]}";
                  });
                },
                onLongPressEnd: (details) {
                  setState(() {
                    _index = 0;
                  });
                },
                child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Card(
                    elevation: 4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    clipBehavior: Clip.hardEdge,
                    child: Image.asset("assets/images/${images[index]}"),
                  ),
                ),
              );
            },
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
            ),
            child: Center(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: 400,
                  maxWidth: 400,
                ),
                child: Image.asset(
                  _image,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
标题：“计数器演示”，
主题：ThemeData.light（），
家：脚手架(
appBar:appBar(
背景颜色：颜色。蓝灰色，
标题：对，
标题：文本（“演示应用程序”），
),
body:body（），
),
);
}
}
类主体扩展了StatefulWidget{
@凌驾
_BodyState createState（）；
}
类_BodyState扩展了状态{
最终列表图像=[
“1.jpg”，
“2.jpg”，
“3.jpg”，
“4.jpg”，
“5.jpg”，
“6.jpg”，
“7.jpg”，
“8.jpg”，
“9.jpg”，
“10.jpg”，
];
int _指数=0；
字符串_image=“assets/images/1.jpg”；
@凌驾
小部件构建（构建上下文）{
返回安全区(
子：IndexedStack(
索引：_索引，
儿童：[
GridView.builder(
itemCount:images.length，
gridDelegate：
SliverGridDelegateWithFixedCrossAxisCount（crossAxisCount:2），
itemBuilder:（构建上下文，int索引）{
返回手势检测器(
onLongPress:（）{
设置状态（）{
_指数=1；
_image=“assets/images/${images[index]}”；
});
},
onLongPressEnd:（详细信息）{
设置状态（）{
_指数=0；
});
},
孩子：填充(
填充：常数边集全部（4.0），
孩子：卡片(
标高：4，
形状：圆形矩形边框(
边界半径：边界半径。圆形（5.0），
),
clipBehavior:Clip.hardEdge，