Android?Flutter實現(xiàn)評分組件的示例代碼
前言
在很多應用中,我們都需要收集用戶的評分,比如商品滿意度、配送滿意度、應用使用體驗等等。評分組件通常會是下面這樣,一般滿分是5分。
不過,有時候評分組件也會有一些特殊性(都怪產品的想法太多)。比如要求支持0.5分的評分,比如對不同的滿意度使用不同的圖標,再比如支持滑動的時候也能評分,甚至還要豎著排……這么多訴求,自己寫的話還挺麻煩,但是有一個組件輕松就能夠搞定,那就是 flutter_rating_bar,下面是官方的示例,可以看到完美地滿足了我們上面提到的需求。本篇我們就來看一下 flutter_rating_bar 的幾個典型的應用示例
基礎應用
先來看最簡單的“五星好評”,這可以通過 RaingBar 實現(xiàn),代碼如下:
RatingBar( ratingWidget: RatingWidget( full: Icon(Icons.star, color: Colors.yellow[600]), half: Icon(Icons.star_half, color: Colors.yellow[600]), empty: Icon(Icons.star_border, color: Colors.yellow[600]), ), onRatingUpdate: (ratingValue) { setState(() { _rating = ratingValue; }); }, glowColor: Colors.yellow[600], initialRating: _initialRating, allowHalfRating: true, itemPadding: const EdgeInsets.all(2.0), ),
我們看一下上面用到的屬性:
ratingWidget
:評分元素組件,可以定義滿格、半格(0.5分)和空的元素,這里我們使用的常見的星星圖標,實際也可以替換為圖片或其他圖標。onRatingUpdate
:評分變化時的回調方法;glowColor
:滑動評分時的發(fā)光效果顏色;initialRating
:默認分值;allowHalfRating
:是否支持0.5分,默認是否;itemPadding
:元素間距,可以調整間距顯得更協(xié)調。
除此之外,還可以定義元素的數(shù)量,最小評分,以及通過禁用交互來實現(xiàn)只讀效果。
不同分數(shù)的圖標不同
我們可以利用 RatingBar.builder
方法來為每一個分值構建不同的圖標,比如低分使用苦臉,高分使用笑臉,這種評分相比普通的星星評分來說會更有趣味性一些。假設我們的應用有吉祥物的話,可以用吉祥物的表情圖片來表示不同的評分,會更有意思一些。
上面的實現(xiàn)代碼如下,實際上就是根據(jù)不同的分值返回不同的圖標組件,此外這里可以利用一個unratedColor
的屬性來定義未被評分的圖標顏色。
RatingBar.builder( itemBuilder: ((context, index) { switch (index) { case 0: return const Icon( Icons.sentiment_very_dissatisfied, color: Colors.red, ); case 1: return const Icon( Icons.sentiment_dissatisfied, color: Colors.redAccent, ); case 2: return const Icon( Icons.sentiment_neutral, color: Colors.amber, ); case 3: return const Icon( Icons.sentiment_satisfied, color: Colors.lightGreen, ); case 4: return const Icon( Icons.sentiment_very_satisfied, color: Colors.green, ); default: return Container(); } }), onRatingUpdate: (ratingValue) { setState(() { _rating = ratingValue; }); }, tapOnlyMode: true, glow: false, initialRating: _initialRating, unratedColor: Colors.blueGrey, itemPadding: const EdgeInsets.all(2.0), ),
小數(shù)分值
如果評分顆粒度要更精細,比如支持除了0.5以外的小數(shù),那么可以使用 RatingBarIndicator
來搞定。需要注意的是,由于分值變成了小數(shù),因此無法通過點擊星星圖標實現(xiàn)分值的改變,需要依賴輸入框、滑塊組件來修改評分。下面就是利用滑塊實現(xiàn)了評分值的更改,可以看到RatingBarIndicator
還是很強大的,可以根據(jù)分值調整星星著色顯示的比例。
RatingBarIndicator
的使用代碼比較簡單,如下所示。我們也可以定義每一個圖標的樣式,以及更改間距,但顯示的分值依賴于 rating
參數(shù)來設置。
RatingBarIndicator( itemBuilder: ((context, index) => Icon( Icons.star, color: Colors.yellow[600], )), itemPadding: const EdgeInsets.all(2.0), rating: _rating, ),
總結
本篇給大家介紹了 flutter_rating_bar
評分組件,這個組件使用起來簡單而且能夠覆蓋我們絕大部分的評分使用場景。如果應用中有類似的評分功能,可以利用flutter_rating_bar
來節(jié)省我們開發(fā)的時間,而且體驗也可以根據(jù)需要來定制。
到此這篇關于Android Flutter實現(xiàn)評分組件的示例代碼的文章就介紹到這了,更多相關Android Flutter評分組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JetPack Compose底部導航欄的實現(xiàn)方法詳解
開發(fā)一個新項目,底部導航欄一般是首頁的標配,在以前的xml布局中,我們可以很輕松的是用谷歌提供的BottomNavigationView或者自定義來實現(xiàn)底部導航的功能,在Compose中也有也提供了一個類似的控件androidx.compose.material.BottomNavigation2022-09-09ViewPager實現(xiàn)帶引導小圓點與自動跳轉的引導界面
這篇文章主要為大家詳細介紹了ViewPager實現(xiàn)帶引導小圓點與自動跳轉的引導界面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11Android APK應用安裝原理解析之AndroidManifest使用PackageParser.parserPac
這篇文章主要介紹了Android APK應用安裝原理解析之AndroidManifest使用PackageParser.parserPackage原理,結合實例形式分析了PackageManagerService調用PackageParser.parserPackage方法解析APK清單相關原理與操作技巧,需要的朋友可以參考下2017-12-12Android編程實現(xiàn)獲取新浪天氣預報數(shù)據(jù)的方法
這篇文章主要介紹了Android編程實現(xiàn)獲取新浪天氣預報數(shù)據(jù)的方法,涉及Android基于新浪接口的調用及數(shù)據(jù)處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11Android中ListView + CheckBox實現(xiàn)單選、多選效果
這篇文章主要介紹了Android中ListView + CheckBox實現(xiàn)單選、多選效果,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02