아래 코드로 TabBar
내 내부를 만들었습니다 AppBar
. TabBar
아래 이미지와 같은 필터링 메커니즘으로 이것을 사용할 수 있는지 궁금 합니다. 이미 사용할 수있는 위젯이있을 것 같지만 그 증거를 찾을 수 없습니다. TabBar를 사용해야한다면이 토글 목록을 기반으로 각 옵션을 토글하고 필터링하는 방법은 무엇입니까?
현재 코드 :
import 'package:flutter/material.dart';
class ExploreDetail extends StatefulWidget {
static const routeName = 'explore_detail';
@override
_ExploreDetailState createState() => _ExploreDetailState();
}
class _ExploreDetailState extends State<ExploreDetail>
with SingleTickerProviderStateMixin {
TabController _tabController;
List<Widget> tabs = [
Tab(
text: 'All',
),
Tab(
text: 'Experience Consulting',
),
Tab(
text: 'Front Office Transformation',
),
];
@override
void initState() {
// TODO: implement initState
super.initState();
// Create TabController for getting the index of current tab
_tabController = TabController(
length: tabs.length,
initialIndex: 0,
vsync: this,
);
}
@override
Widget build(BuildContext context) {
final Map category = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kTextTabBarHeight + kToolbarHeight),
child: AppBar(
title: Text(
category['title'],
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
iconTheme: IconThemeData(
color: Colors.black,
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(kTextTabBarHeight),
child: Align(
alignment: Alignment.centerLeft,
child: TabBar(
tabs: tabs,
controller: _tabController,
indicatorColor: Colors.transparent,
labelColor: Colors.blue,
isScrollable: true,
unselectedLabelColor: Colors.grey,
),
),
),
),
),
body: Center(
child: Text('list of cards will go here'),
),
);
}
}
initState ()의 tabController에 addListener 메소드를 추가하여 탭 선택을 처리 할 수 있습니다. 그런 다음 선택한 탭 옵션으로 데이터를 필터링 할 수 있습니다.
다음과 같이 표시됩니다.
@override
void initState() {
// TODO: implement initState
super.initState();
// Create TabController for getting the index of current tab
_tabController = TabController(
length: tabs.length,
initialIndex: 0,
vsync: this,
);
// Here is the addListener!
_tabController.addListener(_handleTabSelection);
}
그리고:
void _handleTabSelection() {
if (_tabController.indexIsChanging) {
switch (_tabController.index) {
case 0:
filterData('all');
break;
case 1:
filterData('experienceConsulting');
break;
case 2:
filterData('frontOfficeTransformation');
break;
}
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다