Flutter实现马蜂窝小红书自适应高度轮播图

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter实现马蜂窝小红书自适应高度轮播图相关的知识，希望对你有一定的参考价值。

参考技术A NotificationListener 可以监听 PageView 的改变，比如滑动的距离，页面索引等，目前只使用的了索引。里面的一些方法挺有用的。

使用 AnimatedContainer 组件保证切换以后会有流程的过渡效果,表现的会平滑一些。

首先，返回数据需要包含图片的宽高信息，就像这样:

如果返回的只有图片信息没有宽高数据可以使用以下方法去获得图片的信息,这样也可以得到图片的宽高信息，不太建议，还是直接叫后端给，我们也方便处理，要是后端说他们给不了就拿上砖头去叫他们加，就想偷懒。

自适应轮播图的高度我们需要原始图片的宽高比，或者知道原始图的宽高。显示的时候按照原始的宽高比进行等比例缩放。

_controller.page 获取到的是一个浮点数，类似 1.0325441 ,使用 round 四舍五入出现的效果就是我们拖到一半或以上就可以得到下一个 activeIndex ， activeIndex 是一个整数。

我们动态获取了图片的宽度以后放入 AnimatedContainer 就可以有过渡效果，真机和模拟器测试都很流畅，可以已60帧渲染。

Rem实现自适应初体验

第一次做移动端的页面，遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多，但是完全满足需求的并不容易找。

需求：

1.实现基本的触屏轮播图效果

2.传入非标准比例的图片，可以自动平铺（有时候图片可能比例略有偏差，当然例子里的图是随便找的，平铺之后不能看呀）

3.轮播图模块能实现自适应，按照固定高宽比显示，比如3：10的高宽比

一、初识rem

那么这个需求的难点在哪里呢？其实就是我需要限定图片的宽高，但是又要保证自适应

如果只考虑前者：

.swiper-container {
    width: 100%;
    height: 100px;
}

但是这样高度就固定了。最后决定使用Rem这个相对单位详细内容可参加 www.w3cplus.com/css3/define-font-size-with-css3-rem

我的理解 rem就是以<html>元素的font-size作为单位的相对单位。如果根元素的font-size是20px，那个1rem就是20px。

那么只要根据设备的分辨率改变根元素的font-size就可以实现页面内各元素的自适应

那么现在就应该改写成

.swiper-container {
    width: 100%;
    height: 5rem;
}

二、自动更改<html>的font-size

一种方案是采用媒体查询的方式设置主流的分辨率下的font-size

我参考了一篇博客里的方法原文：www.duanliang920.com/learn/web/html5/316.html

 <script>        
        (function (doc, win) {    
            var docEl = doc.documentElement,    
            resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\',    
            recalc = function () {    
            var clientWidth = docEl.clientWidth;    
            if (!clientWidth) return;    
            docEl.style.fontSize = 20 * (clientWidth / 320) + \'px\';    
        };    
        if (!doc.addEventListener) return;    
        win.addEventListener(resizeEvt, recalc, false);    
        doc.addEventListener(\'DOMContentLoaded\', recalc, false);    
        })(document, window);    
 </script>

加入这么一段js，就可以根据屏幕的宽度动态改变font-size

根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + \'px\'; 可知

iphone4宽度是320px，那么font-size就是20px, 100px就是5rem（要注意设计稿，像我拿到的设计稿是iphone6尺寸的，那么是2倍图，量出来的100px，在css中是50px实现的，就是2.5rem了）

iphone6宽度是375px，那么font-size就是23.4375px,100px就是4.267rem

三、自动化转换px到rem

那写css的时候，难道又要这么去换算么，我不是心算小王子呀。特别是当设计稿是按照iphone6来的时候

这时候就用上sublime text的插件cssrem了 github.com/flashlizi/cssrem