如何在Flutter中实现3D视角的相框图片展示效果

要实现3D透视倾斜相框效果，核心是通过Transform组件的矩阵变换能力实现透视和空间旋转，配合分层阴影增强立体质感，修改后完整代码如下：

import 'package:flutter/material.dart';

class Photo3DView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 加入Transform实现3D空间变换
        child: Transform(
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001) // 开启透视效果
            ..rotateX(0.1) // X轴倾斜角度
            ..rotateY(-0.2), // Y轴倾斜角度
          alignment: FractionalOffset.center,
          child: Card(
            elevation: 25, // 增大阴影提升立体感
            shadowColor: Colors.black54,
            child: Container(
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                // 模拟相框分层边框，外层浅灰模拟侧边厚度，内层黑色为相框正面边框
                border: Border(
                  top: BorderSide(color: Colors.grey[300]!, width: 2),
                  left: BorderSide(color: Colors.grey[400]!, width: 3),
                  right: BorderSide(color: Colors.black, width: 10),
                  bottom: BorderSide(color: Colors.black, width: 10),
                ),
                image: DecorationImage(
                  image: NetworkImage("https://wallpaperaccess.com/full/3957694.jpg"),
                  fit: BoxFit.cover
                )
              ),
            ),
          ),
        ),
      ),
    );
  }
}

核心调整点说明 #

• 透视效果通过Matrix4的setEntry(3,2,0.001)实现，这是Flutter中实现3D透视的固定写法，数值越大透视变形效果越明显
• 通过rotateX和rotateY调整相框在三维空间的倾斜角度，可根据实际需求修改数值适配想要的倾斜方向和幅度
• 分层边框和增大的阴影数值模拟真实相框的厚度和光影效果，让3D感更真实
• 也可以加入手势检测实现拖拽调整倾斜角度的交互效果，适配更多使用场景

内容的提问来源于stack exchange，提问作者Shruti Ramnandan Sharma