Flutter實現(xiàn)馬蜂窩小紅書自適應高度輪播圖

NotificationListener 可以監(jiān)聽 PageView 的改變，比如滑動的距離，頁面索引等，目前只使用的了索引。里面的一些方法挺有用的。

創(chuàng)新互聯(lián)公司專注于中大型企業(yè)的做網(wǎng)站、成都網(wǎng)站制作和網(wǎng)站改版、網(wǎng)站營銷服務，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶上1000家，服務滿意度達97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運用，我們將一直專注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進的路上，與客戶一起成長！

使用 AnimatedContainer 組件保證切換以后會有流程的過渡效果,表現(xiàn)的會平滑一些。

首先，返回數(shù)據(jù)需要包含圖片的寬高信息，就像這樣:

如果返回的只有圖片信息沒有寬高數(shù)據(jù)可以使用以下方法去獲得圖片的信息,這樣也可以得到圖片的寬高信息，不太建議，還是直接叫后端給，我們也方便處理，要是后端說他們給不了就拿上磚頭去叫他們加，就想偷懶。

自適應輪播圖的高度我們需要原始圖片的寬高比，或者知道原始圖的寬高。顯示的時候按照原始的寬高比進行等比例縮放。

_controller.page 獲取到的是一個浮點數(shù)，類似 1.0325441 ,使用 round 四舍五入出現(xiàn)的效果就是我們拖到一半或以上就可以得到下一個 activeIndex ， activeIndex 是一個整數(shù)。

我們動態(tài)獲取了圖片的寬度以后放入 AnimatedContainer 就可以有過渡效果，真機和模擬器測試都很流暢，可以已60幀渲染。

Flutter快速上手8：基礎(chǔ)布局之輔助布局

水平垂直居中布局。類似Container設(shè)置alignment

固定寬高布局，類似Container設(shè)置了寬高

寬高比布局。

四、FractionallySizedBox

百分比布局。

這里注意百分比布局外層一定是一個有大小的容器（如SizedBox、Container），否則會報錯。

卡片布局。

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2

我是小栗子，初學Flutter ，文章會根據(jù)學習進度不定時更新，請多多指教~~

分享文章：flutter寬高比,flutter 相對布局
當前鏈接：http://sd-ha.com/article38/dssgopp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、手機網(wǎng)站建設(shè)、微信小程序、App設(shè)計、網(wǎng)站排名、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)