Flutter媒体内容展示插件media_view的使用

使用此插件可以展示各种类型的媒体内容，包括全屏对话框、捏合缩放等功能。

功能

开始使用

使用方法

const like = 'sample';

示例代码

以下是 MediaViewWrapper 和 ImageView 的使用示例：

示例代码文件：example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:media_view/media_view.dart'; // 引入 media_view 插件

void main() {
  runApp(const Main()); // 运行主应用
}

class Main extends StatelessWidget {
  const Main({super.key}); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 创建 Material 应用程序
      home: Scaffold(
        body: MediaViewWrapper( // 使用 MediaViewWrapper 包裹内容
          builder: (context) => ListView.builder( // 使用 ListView 构建列表
            itemCount: 100, // 设置列表项数量
            itemBuilder: (context, index) => switch (index) { // 根据索引动态生成不同的 ImageView
              0 => ImageView( // 第一个 ImageView
                uri: Uri.parse('assets/nokiaa.png'), // 设置图片 URI
                fit: BoxFit.cover, // 设置图片填充方式
                aspectRatio: 1, // 设置宽高比
                decoration: const BoxDecoration(shape: BoxShape.circle), // 设置装饰样式
              ),
              1 => ImageView( // 第二个 ImageView
                uri: Uri.parse(
                  'https://hullabaloo.co.uk/wp-content/uploads/2016/03/Hullabaloo-Loughborough-Graphics-Design-Blog-Images-0042..jpg', // 图片链接
                ),
                width: 100, // 设置宽度
                height: 400, // 设置高度
                fit: BoxFit.cover, // 设置填充方式
                padding: const EdgeInsets.all(40), // 设置内边距
                decoration: BoxDecoration( // 设置装饰样式
                  borderRadius: BorderRadius.circular(36), // 设置圆角
                ),
              ),
              2 => ImageView( // 第三个 ImageView
                uri: Uri.parse(
                  'https://ask.damiensymonds.net/uploads/monthly_2017_03/DSC_3367_700x700_damien.jpg.3f8c5dca40e4fa5efc275d2f7ecf771a.jpg', // 图片链接
                ),
                fit: BoxFit.cover, // 设置填充方式
              ),
              _ => ImageView( // 默认的 ImageView
                context: context, // 上下文
                uri: Uri.parse(
                  'https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2?index=$index', // 图片链接
                ),
                height: 400, // 设置高度
                fit: BoxFit.cover, // 设置填充方式
              ),
            },
          ),
        ),
      ),
    );
  }
}