카드 목록을 필터링하기 위해 flutter의 TabBar를 사용할 수 있습니까?

Jacob Blankenship

아래 코드로 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'),
      ),
    );
  }
}
Akif

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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

redux 저장소에서 데이터를 필터링하기 위해 param을 사용하는 도우미 메서드를 어떻게 만들 수 있습니까?

분류에서Dev

ng-repeat에서 필터를 사용하여 특정 필드에 대해 여러 항목을 필터링 할 수 있습니까?

분류에서Dev

Caffe의 웨이트 필러를 교체하기 위해 Pytorch에서 무엇을 사용할 수 있습니까?

분류에서Dev

교차 검증을 위해 폴드를 생성하기 위해 numpy 배열을 사용할 수 있습니까?

분류에서Dev

Firebase 권한을 사용하여 읽기 액세스를 위해 Firebase DB에서 개체의 특정 필드 만 노출 할 수 있습니까?

분류에서Dev

드롭 다운 필드에서 선택한 항목을 기반으로 하위 표를 필터링 할 수 있습니까?

분류에서Dev

반복기를 사용하여 멤버 필드의 값 목록을 만들 수 있습니까?

분류에서Dev

목록 위치를 하드 코딩하지 않고도 json 사전의 목록에서 항목을 식별 할 수 있습니까?

분류에서Dev

이메일 필드를 필수로 만들기 위해 사용자 모델을 재정의 할 수 있습니까?

분류에서Dev

$ () 내에서 작업을 수행하기 위해 sed의 변수를 사용할 수 있습니까?

분류에서Dev

보낸 사람의 유효성을 검사하기 위해 password_hash ()를 사용할 수 있습니까?

분류에서Dev

필터 필드의 queryset 값을 사용하여 django에서 모델의 인스턴스를 어떻게 필터링 할 수 있습니까?

분류에서Dev

누군가`std :: views :: reverse`를 사용할 때 함수를 필터링하기위한 불필요한 호출을 설명 할 수 있습니까?

분류에서Dev

와일드 카드를 사용하여 크롬 기록을 삭제할 수 있습니까?

분류에서Dev

파이썬에서 파일을 닫기 위해 참조 카운트를 사용할 수 있습니까?

분류에서Dev

사적인 필드의 값을보기 위해 악의적 인 반사를 사용할 수 없습니다.

분류에서Dev

시스템을 업그레이드하기 위해 어떤 유형의 RAM을 사용할 수 있습니까?

분류에서Dev

IComparer를 사용하여 목록이 채워질 때 목록을 해시 할 수 있습니까?

분류에서Dev

이 스칼라 코드를 더 잘 작성하기 위해 무엇을 사용할 수 있습니까?

분류에서Dev

플러그인에서 빌드 단계를 생성하기 위해 step ()을 사용할 수 있습니까?

분류에서Dev

개별 필드 데이터를 사용하기 위해이 반응 구성 요소에서 객체의 상태 배열을 어떻게 해체 할 수 있습니까?

분류에서Dev

장고 양식의 필드를 결정하기 위해 목록을 전달하는 방법이 있습니까?

분류에서Dev

iPhone의 가로 화면 효과를 모방하기 위해 크롬을 사용할 수 있습니까?

분류에서Dev

두 개의 인터넷 연결을 사용하고 비트 토렌트를 위해 업로드를 결합 할 수 있습니까?

분류에서Dev

Edm.DateTimeOffset 필드의 연도를 기준으로 필터 및 패싯을 사용할 수 있습니까?

분류에서Dev

VirtualBox가 가상 HD를 위해 하드 드라이브의 할당되지 않은 공간을 사용할 수 있습니까?

분류에서Dev

JInternalFrame을 지불하기 위해 JOptionPane.showConfirmDialog를 사용할 수 있습니까?

분류에서Dev

opendj : 통과를 위해 하위 항목 기반 암호 정책을 사용할 수 있습니까?

분류에서Dev

Netty에서 연결을 열기 위해 별도의 스레드 풀을 사용할 수 있습니까?

Related 관련 기사

  1. 1

    redux 저장소에서 데이터를 필터링하기 위해 param을 사용하는 도우미 메서드를 어떻게 만들 수 있습니까?

  2. 2

    ng-repeat에서 필터를 사용하여 특정 필드에 대해 여러 항목을 필터링 할 수 있습니까?

  3. 3

    Caffe의 웨이트 필러를 교체하기 위해 Pytorch에서 무엇을 사용할 수 있습니까?

  4. 4

    교차 검증을 위해 폴드를 생성하기 위해 numpy 배열을 사용할 수 있습니까?

  5. 5

    Firebase 권한을 사용하여 읽기 액세스를 위해 Firebase DB에서 개체의 특정 필드 만 노출 할 수 있습니까?

  6. 6

    드롭 다운 필드에서 선택한 항목을 기반으로 하위 표를 필터링 할 수 있습니까?

  7. 7

    반복기를 사용하여 멤버 필드의 값 목록을 만들 수 있습니까?

  8. 8

    목록 위치를 하드 코딩하지 않고도 json 사전의 목록에서 항목을 식별 할 수 있습니까?

  9. 9

    이메일 필드를 필수로 만들기 위해 사용자 모델을 재정의 할 수 있습니까?

  10. 10

    $ () 내에서 작업을 수행하기 위해 sed의 변수를 사용할 수 있습니까?

  11. 11

    보낸 사람의 유효성을 검사하기 위해 password_hash ()를 사용할 수 있습니까?

  12. 12

    필터 필드의 queryset 값을 사용하여 django에서 모델의 인스턴스를 어떻게 필터링 할 수 있습니까?

  13. 13

    누군가`std :: views :: reverse`를 사용할 때 함수를 필터링하기위한 불필요한 호출을 설명 할 수 있습니까?

  14. 14

    와일드 카드를 사용하여 크롬 기록을 삭제할 수 있습니까?

  15. 15

    파이썬에서 파일을 닫기 위해 참조 카운트를 사용할 수 있습니까?

  16. 16

    사적인 필드의 값을보기 위해 악의적 인 반사를 사용할 수 없습니다.

  17. 17

    시스템을 업그레이드하기 위해 어떤 유형의 RAM을 사용할 수 있습니까?

  18. 18

    IComparer를 사용하여 목록이 채워질 때 목록을 해시 할 수 있습니까?

  19. 19

    이 스칼라 코드를 더 잘 작성하기 위해 무엇을 사용할 수 있습니까?

  20. 20

    플러그인에서 빌드 단계를 생성하기 위해 step ()을 사용할 수 있습니까?

  21. 21

    개별 필드 데이터를 사용하기 위해이 반응 구성 요소에서 객체의 상태 배열을 어떻게 해체 할 수 있습니까?

  22. 22

    장고 양식의 필드를 결정하기 위해 목록을 전달하는 방법이 있습니까?

  23. 23

    iPhone의 가로 화면 효과를 모방하기 위해 크롬을 사용할 수 있습니까?

  24. 24

    두 개의 인터넷 연결을 사용하고 비트 토렌트를 위해 업로드를 결합 할 수 있습니까?

  25. 25

    Edm.DateTimeOffset 필드의 연도를 기준으로 필터 및 패싯을 사용할 수 있습니까?

  26. 26

    VirtualBox가 가상 HD를 위해 하드 드라이브의 할당되지 않은 공간을 사용할 수 있습니까?

  27. 27

    JInternalFrame을 지불하기 위해 JOptionPane.showConfirmDialog를 사용할 수 있습니까?

  28. 28

    opendj : 통과를 위해 하위 항목 기반 암호 정책을 사용할 수 있습니까?

  29. 29

    Netty에서 연결을 열기 위해 별도의 스레드 풀을 사용할 수 있습니까?

뜨겁다태그

보관