基于Flutter的图片浏览器的实现

这篇具有很好参考价值的文章主要介绍了基于Flutter的图片浏览器的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一  效果展示:

 1. 图片展示:

      flutter 图片浏览器,前端,html,css

 

2.混色,平铺,拉伸,原图展示

        flutter 图片浏览器,前端,html,css

flutter 图片浏览器,前端,html,css

      flutter 图片浏览器,前端,html,css

flutter 图片浏览器,前端,html,css

二  实验准备:

    1.在包结构中创建images包来存放我们用到的图片,在pubspec.yaml中声明路径:

flutter 图片浏览器,前端,html,css

    2. 检查虚拟机是否正常运行:

flutter 图片浏览器,前端,html,css

三  详细设计:

大体流程:

flutter 图片浏览器,前端,html,css

特别注意:

我们创建继承自State_MyHomePageState类的用处是

  1. 状态管理: State 对象是与 StatefulWidget 相关联的状态的持有者。通过继承自State,可以在这个对象中存储和管理与用户界面相关的数据。

  2. 生命周期方法: State 类提供了一系列生命周期方法,例如 initStatedidUpdateWidgetbuilddispose 等。这些方法允许在不同阶段执行特定的操作,例如在初始化状态、更新部件时、构建部件树、销毁状态等。

  3. 动态更新: 通过调用 setState 方法,可以通知Flutter框架重新构建UI。这使得在用户与应用交互时,能够根据状态的变化动态更新UI,提供交互性和实时性。

  4. 保存和恢复状态: State 对象可以保存和恢复其状态。这对于在应用生命周期内保留数据状态,以及在设备方向切换或应用关闭后恢复状态非常有用。

  5. 构建UI: build 方法是构建用户界面的地方。通过覆盖 build 方法,可以定义在状态更改时如何构建和渲染UI。

  6. 数据封装: 将相关的状态和逻辑封装在State类中有助于提高代码的组织性和可读性。这样,每个部件的状态都可以独立管理,降低了代码的复杂度。

  7. 优化性能: State 对象的状态是惰性创建的,当部件首次插入到树中时,State 对象才会被创建。这有助于优化应用性能。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

功能实现:

功能一:图片展示:

组件:

Container: 用于创建包含图片的容器。

Scaffold: 提供应用程序的基本结构,包括主体区域。

Column: 用于在垂直方向上排列不同的小部件。

属性和方法:

Container的width和height属性: 设置容器的宽度和高度。

Container的color属性: 设置容器的背景颜色。

Container的child属性: 设置容器中包含的子部件。

DecorationImage的image属性: 设置Image.asset的图片来源。

DecorationImage的repeat属性: 设置图片在容器中的重复方式。

Container imgContainer = Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height / 3,
  color: Colors.amberAccent,
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage(lists[index]),
        repeat: ImageRepeat.repeat,
      ),
    ),
  ),
);

功能二:效果选择 :

组件:

RadioListTile: 用于显示单选列表项。

属性和方法:

value属性: 表示当前选项的值。

groupValue属性: 表示所在组的当前选中值。

title属性: 列表项的主要文本。

subtitle属性: 列表项的副标题文本。

onChanged回调: 在用户选择该项时触发的函数。

RadioListTile(
  value: 0,
  groupValue: selected,
  title: Text('混色'),
  subtitle: Slider(
    value: colorsValue,
    min: 0,
    max: 255,
    onChanged: (value) {
      setState(() {
        colorsValue = value;
      });
    },
  ),
  onChanged: (value) {
    setState(() {
      selected = value ?? 0;
    });
  },
);

功能三:混色效果 :

组件:

Container: 用于包裹混色效果的图片。

ColorFiltered: 用于应用颜色混合效果。

属性和方法:

colorFilter属性: 设置ColorFiltered的颜色混合滤镜。

Color.fromARGB方法: 创建一个颜色对象。

round()方法: 将浮点数四舍五入为最接近的整数。

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Color.fromARGB(255, colorsValue.round(), colorsValue.round(), colorsValue.round()),
    BlendMode.colorDodge,
  ),
  child: Image.asset(lists[index]),
);

功能四:平铺效果:

组件:

Container: 用于包裹平铺效果的图片。

属性和方法:

DecorationImage的repeat属性: 设置图片在容器中的重复方式。

round()方法: 将浮点数四舍五入为最接近的整数。

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height / 3,
  color: Colors.amberAccent,
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage(lists[index]),
        repeat: ImageRepeat.repeat,
      ),
    ),
  ),
);

功能五:颜色调整:

组件:

Slider: 用于提供滑动条以调整颜色值。

属性和方法:

value属性: 表示当前滑块的值。

min和max属性: 设置滑块的最小和最大值。

onChanged回调: 在滑动条值变化时触发的函数。

Slider(
  value: colorsValue,
  min: 0,
  max: 255,
  onChanged: (value) {
    setState(() {
      colorsValue = value;
    });
  },
);

功能六:图片切换 :

组件:

ElevatedButton: 用于显示提升的按钮。

属性和方法:

onPressed回调: 在按钮被点击时触发的函数。

ElevatedButton(
  child: Text('向前'),
  onPressed: () {
    setState(() {
      if (index > 0) index--;
    });
  },
);
ElevatedButton(
   child: Text('向后'),
      onPressed: () {
         setState(() {
         if (index < lists.length - 1) index++;
      });
   },
),

功能七:拉伸图片

组件:

Container 组件:

用途: 用于创建一个矩形的可视容器,可以包含子组件,并设置容器的样式和尺寸。

相关属性:

width:容器的宽度,设置为屏幕的宽度。

height:容器的高度,设置为屏幕高度的三分之一。

color:容器的颜色,设置为 Colors.amberAccent

Image.asset 组件:

用途: 用于显示应用内的图片资源。

相关属性:

lists[index]:图片的路径,从预定义的列表中选择。

fit:用于指定图片的填充方式,这里设置为 BoxFit.fill,表示填充整个容器。文章来源地址https://www.toymoban.com/news/detail-755278.html

mgContainer = Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3,
        color: Colors.amberAccent,
        child: Image.asset(
          lists[index],
          fit: BoxFit.fill,
        ),
      );

四 完整代码

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int? selected = 0; // 默认选中混色
  List<String> lists = ['images/p1.jpg', 'images/p2.jpg', 'images/p3.jpg', 'images/p4.jpg'];
  int index = 0;
  double colorsValue = 0.0;
  BoxFit fitType = BoxFit.fill; // 用于控制图片的填充方式
  @override
  Widget build(BuildContext context) {
    Container imgContainer;

    if (selected == 1) {
      // 如果是平铺效果,将 Image.asset 放在 Container 中
      imgContainer = Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3,
        color: Colors.amberAccent,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(lists[index]),
              repeat: ImageRepeat.repeat,
            ),
          ),
        ),
      );
    } else if (selected == 2) {
      // 如果是拉伸原图,将图片的填充方式设置为拉伸
      imgContainer = Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3,
        color: Colors.amberAccent,
        child: Image.asset(
          lists[index],
          fit: BoxFit.fill,
        ),
      );
    } else {
      // 否则应用混色效果
      imgContainer = Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3,
        color: Colors.amberAccent,
        child: ColorFiltered(
          colorFilter: ColorFilter.mode(
            Color.fromARGB(255, colorsValue.round(), colorsValue.round(), colorsValue.round()),
            BlendMode.colorDodge,
          ),
          child: Image.asset(
            lists[index],
            fit: fitType, // 使用BoxFit属性来控制图片的填充方式
          ),
        ),
      );
    }

    return Scaffold(
      body: Column(
        children: <Widget>[
          imgContainer,
          RadioListTile(
            value: 0,
            groupValue: selected,
            title: Text('混色'),
            subtitle: Slider(
              value: colorsValue,
              min: 0,
              max: 255,
              onChanged: (value) {
                setState(() {
                  colorsValue = value;
                });
              },
            ),
            onChanged: (value) {
              setState(() {
                selected = value ?? 0;
                fitType = BoxFit.fill; // 选择混色时,将图片的填充方式设置为拉伸
              });
            },
          ),
          RadioListTile(
            value: 1,
            groupValue: selected,
            title: Text('平铺'),
            subtitle: Text('按XY方向平铺在显示区域'),
            onChanged: (value) {
              setState(() {
                selected = value ?? 0;
                fitType = BoxFit.fill; // 选择平铺时,将图片的填充方式设置为拉伸
              });
            },
          ),
          RadioListTile(
            value: 2,
            groupValue: selected,
            title: Text('拉伸原图'), // 选择拉伸原图时,将图片的填充方式设置为拉伸
            onChanged: (value) {
              setState(() {
                selected = value ?? 0;
                fitType = BoxFit.fill;
              });
            },
          ),
          RadioListTile(
            value: 3,
            groupValue: selected,
            title: Text('显示原图'), // 新增:显示原图
            onChanged: (value) {
              setState(() {
                selected = value ?? 0;
                fitType = BoxFit.contain; // 选择显示原图时,将图片的填充方式设置为保持宽高比适应容器
              });
            },
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              ElevatedButton(
                child: Text('向前'),
                onPressed: () {
                  setState(() {
                    if (index > 0) index--;
                  });
                },
              ),
              ElevatedButton(
                child: Text('向后'),
                onPressed: () {
                  setState(() {
                    if (index < lists.length - 1) index++;
                  });
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

到了这里,关于基于Flutter的图片浏览器的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于selenium实现多个脚本只打开一次浏览器(重复使用浏览器)

    本文思路来源【Selenium】控制当前已经打开的 chrome浏览器窗口(高级版)_是小菜欸的博客-CSDN博客 selenium 自动打开Chrome浏览器且重复使用已打开的Chrome实例_飞扬的箭的博客-CSDN博客 但是这一篇文章的方式对于我来说有一个缺点,即每一次都需要新创建一个浏览器,或者需要

    2024年02月16日
    浏览(40)
  • 基于QWebEngine实现无头浏览器

    无头浏览器( Headless Browser )是一种没有图形用户界面(GUI)的浏览器。它通过在内存中渲染页面,然后将结果发送回请求它的用户或程序来实现对网页的访问,而不会在屏幕上显示网页。这种方式使得无头浏览器不仅适用于网络爬虫和测试等自动化任务,而且还能够更安全

    2024年02月09日
    浏览(53)
  • 基于 Emscripten + WebAssembly 实现浏览器操作 Excel

    【C++】使用WebAssembly在浏览器端操作Excel_wasm文件用什么打开_你的薄荷醇的博客-CSDN博客 使用WebAssembly在浏览器端操作Excel_wasm文件用什么打开 https://blog.csdn.net/weixin_44305576/article/details/125545900?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168964185516800185863561%2522%252C%2522scm%2522%253A%25

    2024年02月13日
    浏览(36)
  • oss/obs对象存储上传图片,在浏览器输入地址却是下载图片。不能直接在浏览器上查看。

    1.问题 oss/obs对象存储上传图片获取链接地址后,在浏览器输入地址却是下载。不能直接在浏览器上面浏览图片信息。 2.解决 上传文件的时候需要设置:content-type类型,需要指示浏览器这是什么类型,这样才能在浏览器上面浏览图片信息。浏览器是根据response-headerl里面的Con

    2024年02月15日
    浏览(44)
  • QT:制作图片浏览器

    widget.h widget.cpp main.cpp widget.ui 结果

    2024年02月07日
    浏览(43)
  • QT图片浏览器制作

    一、Win7的自带查看器的效果 二、自己手工制作的效果 1、UI界面 2、效果界面 三、代码实现 1、头文件 2、主代码 (1)全局定义和预加载 (2)列表按钮:tool_button (3)切换图片 (4)自动播放和停播 (5)放大,缩小,图片旋转 总结: 传送门 1、利用控件实现文件打开,保

    2024年02月10日
    浏览(38)
  • 开源python双屏图片浏览器软件

    需要安装pyqt5这个库

    2024年02月05日
    浏览(39)
  • 对于随机生成图片接口浏览器走缓存的问题

    前提场景 目前有一个api 他可以随机生成一张图片,我通过v-for循环一个Array渲染出来几个img 并且都调用了该接口,但是每个img都是一样的图片 具体代码如下 图片如下所示 只需要给api加个query,因为接口后端不会读这个query所以不影响,又因为有了这个query使每个请求接口都不

    2024年01月21日
    浏览(44)
  • 360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,但是极速模式可以显示?

    最近遇到一个验证码出不来的问题,在360极速浏览器以及360安全浏览器在兼容模式下 验证码图片显示不来 ,效果如下: 这个验证码的代码元素如下,是一张图片,由接口提供的一个图片链接,返回的是文件流。 我找了一个其他网址,发现在360极速浏览器以及360安全浏览器在

    2024年02月16日
    浏览(49)
  • 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

    微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: 但是在微信浏览器,上面那段代码是无效的,这是微信浏览器的限制。 微信的JS-SDK提供 wx.downloadImage() 的方法,是用来下载图片的。但其实我觉得应该是用来耍猴的。该方法不接受一个 url 参数,而是接受

    2024年02月11日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包