Flutter 사용자 정의 필터 상자 의 예제 코드 구현

1.우선 필터 상자 의 단추 보 기 를 사용자 정의 합 니 다.레이아웃 이 간단 합 니 다.listView 하나 로 해결 할 수 있 습 니 다.
1.데이터 model 에 selected Model 속성 을 추가 하여 현재 선택 한 선별 항목 을 기록 합 니 다(현재 단일 선택 만 지원 합 니 다).
2.버튼 의 수량 이 3 개 보다 적 을 때 버튼 의 최대 폭 은 화면 너비 의 1/3 입 니 다.화면 너비 보다 작 을 때 화면 너비/단추 수 입 니 다.
구체 적 인 코드 는 다음 과 같다.

var text = model.selectedFilterModel != null
        ? model.selectedFilterModel.dictValue
        : model.name ?? "";
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width /
                (widget.dataList.length > 3 ? 3 : widget.dataList.length),
            maxHeight: widget.viewHeight),
        color: Colors.white,
        child: InkWell(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  text,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontSize: widget.textSize,
                      color: model.isSelected
                          ? widget.textSelectColor
                          : widget.textColor),
                ),
                SizedBox(
                  width: 4,
                ),
                model.isSelected == true
                    ? Icon(Icons.keyboard_arrow_down,
                        color: widget.textSelectColor)
                    : Icon(Icons.keyboard_arrow_up, color: widget.textColor),
              ],
            ),
            onTap: () {
              setState(() {
                if (_selectModel != null && _selectModel != model) {
                  _selectModel.isSelected = false;
                }
                model.isSelected = !model.isSelected;
                _selectModel = model;
              });
            }));

2.선별 데이터 전시 목록 보 기 를 정의 합 니 다.
먼저 남 은 보기에 서 배경 이 검은색 이 고 투명 한 마스크 층 을 정의 한 다음 이 Container 에 listView,listView 가 보 여 준 데 이 터 를 선별 한 구체 적 인 데이터 내용 으로 보 여 줍 니 다.가시 성 제어 전체 보기 가 보 이 는 지 여부 입 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

      visible:
          Provider.of<FilterModelProvider>(context).isShowFilterOptionsView ??
              false,
      child: GestureDetector(
        onTap: () {
          Provider.of<FilterModelProvider>(context, listen: false)
              .hideFilterOptionsView();
        },
        child: Container(
          color: Colors.black54,
          child: Container(
            margin: EdgeInsets.only(
                bottom: SizeFit.screenHeight -
                    widget.filterButtonViewHeight -
                    SizeFit.appBarHeight -
                    listViewHeight +
                    animation.value),
            color: Colors.white,
            child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: _dataList.length,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    child: Container(
                      height: widget.listHeight,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        // crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            _dataList[index].dictValue,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 16,
                                color: Colors.black87,
                                fontWeight: FontWeight.normal),
                          ),
                          Divider(
                            height: 1,
                            indent: 1,
                          )
                        ],
                      ),
                    ),
                    onTap: () {
                      Provider.of<FilterModelProvider>(context, listen: false)
                          .selectFilterOption(_dataList[index]);
                    },
                  );
                }),
          ),
        ),
      ),
    );

여기 서 Flutter 가 사용자 정의 필터 상 자 를 실현 하 는 예제 코드 에 관 한 글 을 소개 합 니 다.더 많은 Flutter 사용자 정의 필터 상자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 지원 을 바 랍 니 다!