原文
https://medium.com/flutterdevs/heromode-widget-in-flutter-9fac046fbf86
代碼
https://github.com/flutter-devs/flutter_heromode_demo
參考
正文
在 Flutter 中概疆，F(xiàn)lutter 應(yīng)用程序屏幕上的每個(gè)組件都是一個(gè)小工具框沟。屏幕的透視圖完全依賴于用于構(gòu)建應(yīng)用程序的小部件的選擇和分組。此外，應(yīng)用程序代碼的結(jié)構(gòu)是一個(gè)小部件樹。
在本博客中，我們將了解 HeroMode 小部件及其在 flutter 中的功能庄敛。我們將在這個(gè) HeroMode 小部件的演示程序的實(shí)現(xiàn)中看到。
“ Flutter 是谷歌的 UI 工具包蜜暑，它可以幫助你在創(chuàng)紀(jì)錄的時(shí)間內(nèi)用一個(gè)代碼庫(kù)為移動(dòng)設(shè)備铐姚、網(wǎng)絡(luò)和桌面構(gòu)建漂亮的本地組合應(yīng)用程序策肝「睾矗”
它是免費(fèi)和開源的隐绵。它最初是由谷歌發(fā)展而來(lái)，目前由 ECMA 標(biāo)準(zhǔn)監(jiān)管拙毫。 Flutter 應(yīng)用程序利用達(dá)特編程語(yǔ)言來(lái)制作應(yīng)用程序依许。這個(gè) dart 編程和其他編程語(yǔ)言有一些相同的亮點(diǎn)，比如 Kotlin 和 Swift惦界，并且可以被轉(zhuǎn)換成 JavaScript 代碼秕岛。
如果你想探索更多關(guān)于 Flutter 唱矛，請(qǐng)?jiān)L問 Flutter 的官方網(wǎng)站，以獲得更多的信息蛀醉。 Flutter’s official website
以下這些公司和產(chǎn)品正在使用 Flutter —— Flutter 展示
HeroMode 小部件
Hero 小部件是一個(gè)偉大的開箱即用的動(dòng)畫，用于通信小部件從一個(gè)頁(yè)面飛到另一個(gè)頁(yè)面的導(dǎo)航動(dòng)作衅码。英雄動(dòng)畫是兩個(gè)不同頁(yè)面之間共享的元素過渡(動(dòng)畫)≌螅現(xiàn)在來(lái)看看這個(gè)，想象一個(gè)超級(jí)英雄在行動(dòng)中飛行逝段。例如垛玻，您必須有一個(gè)圖像列表。當(dāng)我們用英雄標(biāo)簽包裝它的時(shí)候∧糖現(xiàn)在我們點(diǎn)擊一個(gè)項(xiàng)目清單帚桩。而且當(dāng)被敲擊時(shí)。然后圖像列表項(xiàng)目的土地其位置在詳細(xì)頁(yè)面嘹黔。當(dāng)我們?nèi)∠⒎祷氐搅斜眄?yè)面账嚎，然后 hero 小部件返回到它的頁(yè)面。
HeroMode 小部件具有動(dòng)畫功能参淹，可以在兩個(gè)屏幕之間啟用或禁用元素醉锄。基本上浙值，當(dāng)你想禁用 Hero 小部件的動(dòng)畫功能時(shí)恳不，這個(gè)小部件是必需的。如果您想了解 Hero 模式小部件开呐，那么首先您需要了解 Hero 小部件烟勋。
是 Hero 小部件的一部分，引入這個(gè)小部件的目的是啟用和禁用 Hero 小部件的動(dòng)畫---- 如果你不想在兩個(gè)屏幕之間動(dòng)畫元素筐付，然后用 HeroMode 小部件包裝 Hero 小部件卵惦，我們可以通過使用它們的靜態(tài)屬性或動(dòng)態(tài)地啟用和禁用它們，然后通過包裝這個(gè)小部件瓦戚，當(dāng)你仔細(xì)看下面的例子視頻時(shí)發(fā)生了什么沮尿，那么你就可以看到這個(gè)動(dòng)畫中的可衡量的區(qū)別。
演示模塊:
[圖片上傳失敗...(image-6dfcc0-1631112917948)]
如何實(shí)現(xiàn) dart 文件中的代碼:
你需要分別在你的代碼中實(shí)現(xiàn)它:
首先，我為集合創(chuàng)建了一個(gè) ViewModel 類畜疾，并在開關(guān)按鈕上獲得一個(gè)布爾值赴邻。這是我在 HeroMode Widget 中通過的。
bool _isHeroModeEnable= true;
bool get isHeroModeEnable => _isHeroModeEnable;set isHeroModeEnable(bool value) {
_isHeroModeEnable = value;
}
當(dāng)我們運(yùn)行應(yīng)用程序時(shí)啡捶，我們應(yīng)該得到屏幕的輸出姥敛，就像下面的屏幕截圖一樣。
然后瞎暑，我必須添加一個(gè)文本和開關(guān)按鈕來(lái)顯示 HeroMode 小部件的啟用和禁用功能彤敛。
Widget buildCategoriesSection() {
return Container(
padding: EdgeInsets.only(left: 20),
child: Row(
_//mainAxisAlignment: MainAxisAlignment.center,_ children: [
Container(
child: Text("Hero Mode",
style: TextStyle(
color: Colors._white_,
fontSize: 18,
fontWeight: FontWeight._bold_ ),),
),
Switch(
value: model!=null && model!.isHeroModeEnable,
onChanged:(value){
print("value:$value");
model!.isHeroModeEnable=value;
}, activeTrackColor: Color(ColorConstants._light_blue_),
activeColor: Color(ColorConstants._pure_white_),
),
],
),
);}
然后，我用電影標(biāo)題 API 創(chuàng)建了一個(gè)列表視圖了赌，但是您可以根據(jù)需要為測(cè)試目的使用一個(gè)虛擬圖像列表墨榄。在此之后，我用 Hero 小部件包裝圖像勿她，用 HeroMode 小部件包裝 Hero 小部件渠概。禁用 Hero 小部件的動(dòng)畫∩┧基本上播揪，這是一個(gè)媒介，以啟用和禁用動(dòng)畫的英雄小部件筒狠。您不能直接從 Hero Widget 禁用動(dòng)畫猪狈。
Widget _buildPopularSection() {
return Container(
height: 300,
padding: EdgeInsets.only(left: 20, top: 5),
width: MediaQuery._of_(context).size.width,
child: model != null && model!.isPopularLoading ? Center(child: CircularProgressIndicator())
: Provider.value(
value: Provider._of_<HomeViewModel>(context),
child: Consumer(
builder: (context, value, child) => Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: model != null && model!.popularMovies != null ? model!.popularMovies!.results!.length : 0,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return _buildPopularItem(
index, model!.popularMovies!.results![index]);
},
),
),
),
),
);
}Widget _buildPopularItem(int index, Results result) {
return GestureDetector(
onTap: () {
Navigator._push_(
context,
MaterialPageRoute(
builder: (context) => MovieDetailView(movieDataModel: result)),
);
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
width: 150,
margin: EdgeInsets.only(right: 16),
child: HeroMode(
child: Hero(
tag: '${result.id}',
child: ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.network(
Constants._IMAGE_BASE_URL_ +
Constants._IMAGE_SIZE_1_ +
'${result.posterPath}',
fit: BoxFit.cover,
),
),
),
enabled: true,
_//enabled:model.isHeroModeEnabled,_ ),
),
SizedBox(
height: 18,
),
Container(
child: Text(
result.title!,
style: TextStyle(color: Colors._white_, fontSize: 15),
),
),
SizedBox(
height: 5,
),
Container(
child: GFRating(
value: _rating,
color: Color(ColorConstants._orange_),
size: 16,
onChanged: (value) {
setState(() {
_rating = value;
});
},
),
)
],
),
);
}
當(dāng)我們運(yùn)行應(yīng)用程序時(shí)，我們應(yīng)該得到屏幕的輸出辩恼，就像下面的屏幕截圖一樣雇庙。
最后，我創(chuàng)建了第二個(gè)省道文件灶伊，在這個(gè)文件中疆前，我制作了一個(gè)方法來(lái)顯示圖像動(dòng)畫。然后使用相同標(biāo)記的 Hero 小部件包裝圖像聘萨。當(dāng)您有多個(gè)圖像時(shí)竹椒，然后傳遞圖像列表 id。
Widget _buildMovieBanner(Results movieItems) {
return Container(
height: 380,
child: Stack(
children: [
Positioned(
top: 20,
child: Container(
height: 350,
width: 240,
margin: EdgeInsets.only(left: 28, right: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Color(ColorConstants._saphire_blue2_),
),
),
),
Positioned(
top: 10,
child: Container(
height: 350,
width: 250,
margin: EdgeInsets.only(left: 22, right: 25),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Color(ColorConstants._cobaltBlue_),
),
),
),
Container(
height: 350,
width: 260,
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: Hero(
tag: '${widget.movieDataModel.id}',
child: Image.network(
Constants._IMAGE_BASE_URL_ +
Constants._IMAGE_SIZE_1_ +
widget.movieDataModel.posterPath!,
fit: BoxFit.cover,
),
),
),
),
],
),
);
}
結(jié)語(yǔ):
In this article, I have explained the basic overview of the HeroMode Widget in a flutter, you can modify this code according to your choice. This was a small introduction to HeroMode Widget On User Interaction from my side, and it’s working using Flutter.
在本文中米辐，我已經(jīng)簡(jiǎn)單介紹了 HeroMode 小部件的基本概況胸完，您可以根據(jù)自己的選擇修改這段代碼。這是一個(gè)小的介紹 HeroMode 小部件用戶交互從我這邊翘贮，它的工作使用 Flutter赊窥。
I hope this blog will provide you with sufficient information on Trying up the Explore, HeroMode Widget in your flutter projects.
我希望這個(gè)博客將提供您嘗試在您的 Flutter 項(xiàng)目的探索，HeroMode 小部件充足的信息狸页。
? ? Thanks for reading this article ??
? Thanks for reading this article ??
If I got something wrong? Let me know in the comments. I would love to improve.
如果我做錯(cuò)了什么锨能，請(qǐng)?jiān)谠u(píng)論中告訴我，我很樂意改進(jìn)。
Clap ?? If this article helps you.
鼓掌如果這篇文章對(duì)你有幫助的話址遇。
GitHub 鏈接
https://github.com/flutter-devs/flutter_heromode_demo
? 貓哥
微信群 ducafecat
往期
開源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新聞客戶端
https://github.com/ducafecat/flutter_learn_news
strapi 手冊(cè)譯文
微信討論群 ducafecat
系列集合
譯文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
開源項(xiàng)目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 編程語(yǔ)言基礎(chǔ)
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基礎(chǔ)入門
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 實(shí)戰(zhàn)從零開始 新聞客戶端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 組件開發(fā)
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
