Flutter實現(xiàn)懸浮分組列表功能
在本篇博客中,我們將介紹如何使用 Flutter 實現(xiàn)一個帶有分組列表的應(yīng)用程序。我們將通過 CustomScrollView 和 Sliver 組件來實現(xiàn)該功能。
需求
我們需要實現(xiàn)一個分組列表,分組包含固定的標(biāo)題和若干個列表項。具體分組如下:
- 水果
- 動物
- 職業(yè)
- 菜譜
每個分組包含若干個項目,例如水果組包含蘋果、香蕉等。
效果

實現(xiàn)思路
- 定義數(shù)據(jù)模型:創(chuàng)建
ItemBean類來表示每個分組的數(shù)據(jù)。 - 構(gòu)建主頁面:使用
CustomScrollView和Sliver組件構(gòu)建主頁面,其中包含多個分組。 - 實現(xiàn)固定標(biāo)題:通過自定義
SliverPersistentHeaderDelegate實現(xiàn)固定標(biāo)題。
實現(xiàn)代碼
以下是實現(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: [
'蘋果', '香蕉', '橙子', '葡萄', '芒果', '梨', '桃子', '草莓', '西瓜', '檸檬',
'菠蘿', '櫻桃', '藍(lán)莓', '獼猴桃', '李子', '柿子', '杏', '楊梅', '石榴', '木瓜'
]),
ItemBean(groupName: '動物', items: [
'狗', '貓', '獅子', '老虎', '大象', '熊', '鹿', '狼', '狐貍', '猴子',
'企鵝', '熊貓', '袋鼠', '海豚', '鯊魚', '斑馬', '長頸鹿', '鱷魚', '孔雀', '烏龜'
]),
ItemBean(groupName: '職業(yè)', items: [
'醫(yī)生', '護士', '教師', '工程師', '程序員', '律師', '會計', '警察', '消防員', '廚師',
'司機', '飛行員', '科學(xué)家', '記者', '設(shè)計師', '作家', '演員', '音樂家', '畫家', '攝影師'
]),
ItemBean(groupName: '菜譜', items: [
'紅燒肉', '糖醋排骨', '宮保雞丁', '麻婆豆腐', '魚香肉絲', '酸辣湯', '蒜蓉菠菜', '回鍋肉', '水煮魚', '烤鴨',
'蛋炒飯', '蠔油生菜', '紅燒茄子', '西紅柿炒雞蛋', '油燜大蝦', '香菇雞湯', '酸菜魚', '麻辣香鍋', '鐵板牛肉', '干煸四季豆'
]),
];
}
/// 分組列表
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;
}
}通過以上代碼,我們實現(xiàn)了一個簡單的 Flutter 分組列表應(yīng)用。每個分組都有固定的標(biāo)題,點擊標(biāo)題可以展開或收起組內(nèi)的項目。希望這篇博客對你有所幫助!
詳情 :github.com/yixiaolunhui/flutter_xy
到此這篇關(guān)于Flutter-實現(xiàn)懸浮分組列表的文章就介紹到這了,更多相關(guān)Flutter懸浮分組列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android 中使用RecyclerView實現(xiàn)底部翻頁
這篇文章主要介紹了Android 中使用RecyclerView實現(xiàn)底部翻頁功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-11-11
Android 個人理財工具一:項目概述與啟動界面的實現(xiàn)
本文主要介紹Android 開發(fā)個人理財工具項目概述與啟動界面的實現(xiàn),這里主要對實現(xiàn)項目的流程做了詳細(xì)概述,并對啟動界面簡單實現(xiàn),有需要的小伙伴可以參考下2016-08-08
Android AIDL實現(xiàn)兩個APP間的跨進程通信實例
這篇文章主要為大家詳細(xì)介紹了Android AIDL實現(xiàn)兩個APP間的跨進程通信實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04
詳解Android開發(fā)之MP4文件轉(zhuǎn)GIF文件
這篇文章介紹的是將錄下來的視頻選取一小段轉(zhuǎn)為 GIF 文件,不僅時間段可以手動選取,而且還需要支持截取視頻的局部區(qū)域轉(zhuǎn)為 GIF,網(wǎng)上調(diào)研了一下技術(shù)方案,覺得還是有必要把實現(xiàn)過程拿出來分享下,有需要的可以直接拿過去用。下面來一起看看。2016-08-08
Android Flutter自適應(yīng)瀑布流案例詳解
這篇文章主要介紹了Android Flutter自適應(yīng)瀑布流案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
android10 隱藏SystemUI鎖屏下的多用戶圖標(biāo)的示例代碼
這篇文章主要介紹了android10 隱藏SystemUI鎖屏下的多用戶圖標(biāo),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12

