從社交媒體應(yīng)用程序到電子商務(wù)應(yīng)用程序，大多數(shù)現(xiàn)代應(yīng)用程序都有某種圖像輪播來(lái)展示產(chǎn)品、圖像或廣告。 由于 flutter 提供的內(nèi)置小部件，從頭開(kāi)始實(shí)現(xiàn)圖像輪播并不像您想象的那么難。 在本文中，您將學(xué)習(xí)如何從頭開(kāi)始創(chuàng)建圖像輪播并根據(jù)需要進(jìn)行自定義。最后，您將學(xué)習(xí)如何使用carousel_slider插件以更少的代碼創(chuàng)建圖像輪播。 這些是我們將要討論的主題。
- 圖像輪播的小部件結(jié)構(gòu)
- 使用 PageView 小部件創(chuàng)建輪播
- 控制初始頁(yè)面
- 添加位置指示器
- 為滑動(dòng)圖像添加動(dòng)畫(huà)
- 如何使用 carousel_slider 插件
圖像輪播的小部件結(jié)構(gòu)
在我們進(jìn)入編碼部分之前，讓我們了解我們需要擁有的小部件結(jié)構(gòu)。
頁(yè)面視圖小部件需要在應(yīng)用程序中實(shí)現(xiàn)圖像滑動(dòng)功能和圖像視圖以顯示實(shí)際圖像。除此之外，您需要一個(gè)容器小部件來(lái)在滑塊底部實(shí)現(xiàn)頁(yè)面指示器。
使用 PageView 小部件創(chuàng)建輪播
首先，讓我們創(chuàng)建一個(gè)名為 Carousel 的有狀態(tài)小部件。這是我們將用來(lái)實(shí)現(xiàn)輪播的小部件。 首先，讓我們創(chuàng)建一個(gè)包含圖像 URL 的列表：
List images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTIZccfNPnqalhrWev-Xo7uBhkor57_rKbkw&usqp=CAU",
"https://wallpaperaccess.com/full/2637581.jpg"
];
現(xiàn)在您可以使用 PageView 小部件構(gòu)建器方法來(lái)創(chuàng)建輪播頁(yè)面：
PageView.builder(
itemCount: 2,
pageSnapping: true,
itemBuilder: (context,pagePosition){
return Container(
margin: EdgeInsets.all(10),
child: Image.network());
})
??itemCount???代表頁(yè)數(shù)，它會(huì)決定??itemBuilder??需要執(zhí)行多少次。因此，您可以通過(guò)訪(fǎng)問(wèn)它的索引來(lái)設(shè)置每個(gè)圖像 URL。
PageView.builder(
itemCount: 2,
pageSnapping: true,
itemBuilder: (context,pagePosition){
return Container(
margin: EdgeInsets.all(10),
child: Image.network(images[pagePosition]));
})
現(xiàn)在您可以在屏幕上看到這些圖像，并且可以滑動(dòng)這些圖像。
如果您像這樣顯示圖像，用戶(hù)將不知道是否有更多圖像。因此，在顯示中間圖像的同時(shí)顯示左右圖像的一部分將改善圖像輪播的用戶(hù)體驗(yàn)。 首先，您應(yīng)該創(chuàng)建??PageController???并將其設(shè)置為我們的 PageView 小部件。此外，我添加了第三張圖像并更改了??itemCount???從圖像數(shù)組本身的長(zhǎng)度獲取計(jì)數(shù)。然后您可以設(shè)置該??viewportFraction???屬性??PageController??以顯示其他圖像的分?jǐn)?shù)：
late PageController _pageController;
List images = [
"https://images.wallpapersden.com/image/download/purple-sunrise-4k-vaporwave_bGplZmiUmZqaraWkpJRmbmdlrWZlbWU.jpg",
"https://wallpaperaccess.com/full/2637581.jpg",
"https://uhdwallpapers.org/uploads/converted/20/01/14/the-mandalorian-5k-1920x1080_477555-mm-90.jpg"
];
void initState() {
super.initState();
_pageController = PageController(viewportFraction: 0.8);
}
Widget build(BuildContext context) {
return PageView.builder(
itemCount: images.length,
pageSnapping: true,
controller: _pageController,
onPageChanged: (page) {
setState(() {
activePage = page;
});
},
itemBuilder: (context, pagePosition) {
return Container(
margin: EdgeInsets.all(10),
child: Image.network(images[pagePosition]),
);
});
}
盡管圖像顯示在 PageView 的中間，但它實(shí)際上占用了整個(gè)屏幕空間。如果您將??fit???類(lèi)型更改為??cover??，您可以看到它占據(jù)了整個(gè)屏幕。
要控制它，您可以將小部件包裝在小??SizedBox??部件中：
SizedBox(
height: 200,
width: MediaQuery.of(context).size.width,
child: PageView.builder(
itemCount: images.length,
pageSnapping: true,
controller: _pageController,
onPageChanged: (page) {
setState(() {
activePage = page;
});
},
itemBuilder: (context, pagePosition) {
return Container(
margin: EdgeInsets.all(10),
child: Image.network(images[pagePosition],fit: BoxFit.cover,),
);
}),
)
控制初始頁(yè)面
輪播在第一次加載時(shí)將第一張圖片加載為默認(rèn)頁(yè)面。但是如果您需要更改初始圖像以從不同的頁(yè)面開(kāi)始，您可以??initialPage ??在 PageController 中提供該屬性。它接受索引作為一個(gè)位置：
_pageController = PageController(viewportFraction: 0.8,initialPage: 1);
添加位置指示器
首先，將??PageView???小部件移動(dòng)到小部件??SizedBox???內(nèi)部??Column??：
Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: 200,
child: PageView.builder(
itemCount: images.length,
pageSnapping: true,
controller: _pageController,
onPageChanged: (page) {
setState(() {
activePage = page;
});
},
itemBuilder: (context, pagePosition) {
return Container(
margin: EdgeInsets.all(10),
child: Image.network(images[pagePosition]),
);
}),
),
],
)
然后您可以創(chuàng)建一個(gè)方法來(lái)返回指標(biāo)列表，您應(yīng)該根據(jù)當(dāng)前活動(dòng)位置更改指標(biāo)的顏色。因此，讓我們創(chuàng)建一個(gè)接受??currentIndex??? 和??imagesLength??作為參數(shù)的方法。通過(guò)檢查索引，您可以更改活動(dòng)位置指示器的顏色，如下所示：
List indicators(imagesLength,currentIndex) {
return List.generate(imagesLength, (index) {
return Container(
margin: EdgeInsets.all(3),
width: 10,
height: 10,
decoration: BoxDecoration(
color: currentIndex == index ? Colors.black : Colors.black26,
shape: BoxShape.circle),
);
});
}
當(dāng)用戶(hù)滑動(dòng)圖像時(shí)，應(yīng)該有一種方法可以獲取當(dāng)前活動(dòng)位置。該??onPageChanged??方法適用于：
int activePage = 1;
PageView.builder(
itemCount: images.length,
pageSnapping: true,
controller: _pageController,
onPageChanged: (page) {
setState(() {
activePage = page;
});
})
現(xiàn)在您可以將??activePage???值傳遞給我們創(chuàng)建的方法。在小部件內(nèi)創(chuàng)建一個(gè) Row 小??Column???部件作為第二個(gè)孩子。然后，您可以將方法的返回指示符??indicators???作為子項(xiàng)分配給??Row??小部件：
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: indicators(images.length,activePage))
為滑動(dòng)圖像添加動(dòng)畫(huà)
盡管我們的輪播效果很好，但在圖像之間滑動(dòng)時(shí)有動(dòng)畫(huà)效果還是不錯(cuò)的。讓我們看看如何在圖像變化時(shí)添加動(dòng)畫(huà)。 有多種方法可用于應(yīng)用放大動(dòng)畫(huà)。但是在這里我們將使用內(nèi)置的 Flutter??AnimationContainer??? 小部件來(lái)創(chuàng)建這個(gè)動(dòng)畫(huà)，因?yàn)樗_(kāi)箱即用，??AnimationContainer???提供了我們需要的所有功能。 在當(dāng)前滑塊圖像中，所有容器的大小都相同。通過(guò)更改圖像的邊距，您可以添加放大效果。 ??AnimationContainer???包含樣特性?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/125507.html
相關(guān)文章
-
#yyds干貨盤(pán)點(diǎn)#Flutter 如何禁止手機(jī)橫屏[Flutter專(zhuān)題32]
摘要：最后如果不起作用，可以分別做如下設(shè)置干貨盤(pán)點(diǎn)如何禁止手機(jī)橫屏專(zhuān)題橫屏安卓如下所示干貨盤(pán)點(diǎn)如何禁止手機(jī)橫屏專(zhuān)題另外上有個(gè)插件可以去試一下，我在這兒就不做解釋了。 這里是堅(jiān)果前端小課堂，歡迎關(guān)注公眾號(hào)堅(jiān)果前端，問(wèn)題引出 群友發(fā)來(lái)問(wèn)題： Flutter 怎么禁止橫屏顯示呀，網(wǎng)上說(shuō)的幾個(gè)方法 都沒(méi)有效 ...
-
【Flutter 專(zhuān)題】22 圖解 PopupMenu 那些事兒 #yyds干貨盤(pán)點(diǎn)#
摘要：默認(rèn)高度同樣是，水平布局使用復(fù)選標(biāo)記是圖標(biāo)，顯示在位置同時(shí)只有在狀態(tài)為選中時(shí)才會(huì)顯示圖標(biāo)。分割線(xiàn)是一條水平分割線(xiàn)，注意數(shù)組要使用父類(lèi)，配合其他樣式共同使用。如果個(gè)數(shù)過(guò)多也無(wú)需擔(dān)心，支持默認(rèn)超過(guò)屏幕滑動(dòng)效果。 小菜需要處理標(biāo)題欄彈出對(duì)話(huà)框 PopupMenu 樣式，F(xiàn)lutter 當(dāng)然提供了一些處理方式，類(lèi)似 P...
-
【Flutter 專(zhuān)題】19 圖解【分享頁(yè)面】底部對(duì)話(huà)框 #yyds干貨盤(pán)點(diǎn)#
摘要：小菜在學(xué)習(xí)過(guò)程中需要處理一個(gè)類(lèi)似中效果的分享彈框頁(yè)?？此坪芎?jiǎn)單的頁(yè)面，里面卻有很多值得嘗試的地方。每行個(gè)數(shù)列間距，即左右間距行間距，即上下間距寬高比，默認(rèn)注意設(shè)置個(gè)數(shù)與列間距的配合，如果太大可能會(huì)造成頁(yè)面展示不全等異常情況。 小菜在學(xué)習(xí) Flutter 過(guò)程中需要處理一個(gè)類(lèi)似 Android 中 PopupWi...
-
【Flutter 專(zhuān)題】15 圖解 ListView 異步加載數(shù)據(jù)與等待 #yyds干貨盤(pán)點(diǎn)#
摘要：小菜前兩天再學(xué)時(shí)，整理了一下在列表中展示多種不同樣式，今天繼續(xù)深入學(xué)習(xí)異步請(qǐng)求數(shù)據(jù)并加載新聞列表以及初始進(jìn)入頁(yè)面的等小知識(shí)點(diǎn)。小菜剛接觸時(shí)間不長(zhǎng)，還有很多不清楚和不理解的地方，如果又不對(duì)的地方還希望多多指出。 小菜前兩天再學(xué) ListView 時(shí)，整理了一下在列表中展示多種不同 item 樣式，今天繼續(xù)深入學(xué)習(xí)...
-
flutter 中的列表的性能優(yōu)化續(xù)集#yyds干貨盤(pán)點(diǎn)#
重新構(gòu)建嵌套列表這一節(jié)使用 Slivers 而不是 ListViews 重建相同的 UI。前奏在這里??https://blog.51cto.com/jianguo/4653002??使用 Slivers 的列表列表下面的代碼構(gòu)建了與之前相同的 UI，但這次它使用??Slivers?? 而不是收縮包裝??ListView??對(duì)象。本頁(yè)的其余部分將引導(dǎo)您逐步完成更改。如何將嵌套列表遷移到 Slive...
