Flutter實(shí)現(xiàn)懸浮分組列表功能
在本篇博客中,我們將介紹如何使用 Flutter 實(shí)現(xiàn)一個(gè)帶有分組列表的應(yīng)用程序。我們將通過(guò) CustomScrollView
和 Sliver
組件來(lái)實(shí)現(xiàn)該功能。
需求
我們需要實(shí)現(xiàn)一個(gè)分組列表,分組包含固定的標(biāo)題和若干個(gè)列表項(xiàng)。具體分組如下:
- 水果
- 動(dòng)物
- 職業(yè)
- 菜譜
每個(gè)分組包含若干個(gè)項(xiàng)目,例如水果組包含蘋(píng)果、香蕉等。
效果
實(shí)現(xiàn)思路
- 定義數(shù)據(jù)模型:創(chuàng)建
ItemBean
類(lèi)來(lái)表示每個(gè)分組的數(shù)據(jù)。 - 構(gòu)建主頁(yè)面:使用
CustomScrollView
和Sliver
組件構(gòu)建主頁(yè)面,其中包含多個(gè)分組。 - 實(shí)現(xiàn)固定標(biāo)題:通過(guò)自定義
SliverPersistentHeaderDelegate
實(shí)現(xiàn)固定標(biāo)題。
實(shí)現(xiàn)代碼
以下是實(shí)現(xiàn)代碼:
import 'package:flutter/material.dart'; /// 數(shù)據(jù)源 /// https://github.com/yixiaolunhui/flutter_xy class ItemBean { final String groupName; final List<String> items; const ItemBean({required this.groupName, this.items = const []}); static List<ItemBean> get groupListData => const [ ItemBean(groupName: '水果', items: [ '蘋(píng)果', '香蕉', '橙子', '葡萄', '芒果', '梨', '桃子', '草莓', '西瓜', '檸檬', '菠蘿', '櫻桃', '藍(lán)莓', '獼猴桃', '李子', '柿子', '杏', '楊梅', '石榴', '木瓜' ]), ItemBean(groupName: '動(dòng)物', items: [ '狗', '貓', '獅子', '老虎', '大象', '熊', '鹿', '狼', '狐貍', '猴子', '企鵝', '熊貓', '袋鼠', '海豚', '鯊魚(yú)', '斑馬', '長(zhǎng)頸鹿', '鱷魚(yú)', '孔雀', '烏龜' ]), ItemBean(groupName: '職業(yè)', items: [ '醫(yī)生', '護(hù)士', '教師', '工程師', '程序員', '律師', '會(huì)計(jì)', '警察', '消防員', '廚師', '司機(jī)', '飛行員', '科學(xué)家', '記者', '設(shè)計(jì)師', '作家', '演員', '音樂(lè)家', '畫(huà)家', '攝影師' ]), ItemBean(groupName: '菜譜', items: [ '紅燒肉', '糖醋排骨', '宮保雞丁', '麻婆豆腐', '魚(yú)香肉絲', '酸辣湯', '蒜蓉菠菜', '回鍋肉', '水煮魚(yú)', '烤鴨', '蛋炒飯', '蠔油生菜', '紅燒茄子', '西紅柿炒雞蛋', '油燜大蝦', '香菇雞湯', '酸菜魚(yú)', '麻辣香鍋', '鐵板牛肉', '干煸四季豆' ]), ]; } /// 分組列表 class GroupListPage extends StatelessWidget { const GroupListPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('分組列表')), body: CustomScrollView( slivers: ItemBean.groupListData.map(_buildGroup).toList(), ), ); } Widget _buildGroup(ItemBean itemBean) { return SliverMainAxisGroup( slivers: [ SliverPersistentHeader( pinned: true, delegate: HeaderDelegate(itemBean.groupName), ), SliverList( delegate: SliverChildBuilderDelegate( (_, index) => _buildItemByUser(itemBean.items[index]), childCount: itemBean.items.length, ), ), ], ); } Widget _buildItemByUser(String item) { return Container( alignment: Alignment.center, height: 50, child: Row( children: [ const Padding( padding: EdgeInsets.only(left: 20, right: 10.0), child: FlutterLogo(size: 30), ), Text( item, style: const TextStyle(fontSize: 16), ), ], ), ); } } class HeaderDelegate extends SliverPersistentHeaderDelegate { final String title; const HeaderDelegate(this.title); @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return Container( alignment: Alignment.centerLeft, color: Colors.grey, padding: const EdgeInsets.only(left: 20), height: 40, child: Text(title, style: const TextStyle(fontSize: 16)), ); } @override double get maxExtent => 40; @override double get minExtent => 40; @override bool shouldRebuild(covariant HeaderDelegate oldDelegate) { return title != oldDelegate.title; } }
通過(guò)以上代碼,我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的 Flutter 分組列表應(yīng)用。每個(gè)分組都有固定的標(biāo)題,點(diǎn)擊標(biāo)題可以展開(kāi)或收起組內(nèi)的項(xiàng)目。希望這篇博客對(duì)你有所幫助!
詳情 :github.com/yixiaolunhui/flutter_xy
到此這篇關(guān)于Flutter-實(shí)現(xiàn)懸浮分組列表的文章就介紹到這了,更多相關(guān)Flutter懸浮分組列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Flutter定義tabbar底部導(dǎo)航路由跳轉(zhuǎn)的方法
這篇文章主要為大家詳細(xì)介紹了Flutter定義tabbar底部導(dǎo)航路由跳轉(zhuǎn)的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Android使用URL讀取網(wǎng)絡(luò)資源的方法
這篇文章主要為大家詳細(xì)介紹了Android使用URL讀取網(wǎng)絡(luò)資源的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10Android使用popupWindow仿微信彈出框使用方法
這篇文章主要為大家詳細(xì)介紹了Android使用popupWindow仿微信彈出框使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Android 點(diǎn)擊生成二維碼功能實(shí)現(xiàn)代碼
二維碼,我們也稱(chēng)作QRCode,QR表示quick response即快速響應(yīng),在很多App中我們都能見(jiàn)到二維碼的身影,最常見(jiàn)的莫過(guò)于微信了。接下來(lái)給大家介紹android 點(diǎn)擊生成二維碼功能實(shí)現(xiàn)代碼,需要的朋友參考下吧2017-11-11Android自定義View實(shí)現(xiàn)圓形加載進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)圓形加載進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06linphone-sdk-android版本號(hào)生成解析
這篇文章主要為大家介紹了linphone-sdk-android版本號(hào)生成解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09android ScrollView實(shí)現(xiàn)水平滑動(dòng)回彈
這篇文章主要為大家詳細(xì)介紹了android ScrollView實(shí)現(xiàn)水平滑動(dòng)回彈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android編程連接MongoDB及增刪改查等基本操作示例
這篇文章主要介紹了Android編程連接MongoDB及增刪改查等基本操作,簡(jiǎn)單介紹了MongoDB功能、概念、使用方法及Android操作MongoDB數(shù)據(jù)庫(kù)的基本技巧,需要的朋友可以參考下2017-07-07Android入門(mén)教程之RecyclerView的具體使用詳解
RecyclerView是Android一個(gè)更強(qiáng)大的控件,其不僅可以實(shí)現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實(shí)現(xiàn)數(shù)據(jù)縱向滾動(dòng),也可以實(shí)現(xiàn)橫向滾動(dòng)(ListView做不到橫向滾動(dòng))。接下來(lái)講解RecyclerView的用法2021-10-10