Flutter怎么實(shí)現(xiàn)自定義下拉選擇框

這篇“Flutter怎么實(shí)現(xiàn)自定義下拉選擇框”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Flutter怎么實(shí)現(xiàn)自定義下拉選擇框”文章吧。

先看效果圖：

關(guān)鍵點(diǎn)：彈出、收回動(dòng)畫、狀態(tài)改變、選項(xiàng)聯(lián)動(dòng)

思路： 我們可以看到一個(gè)完整的下拉框有頭部和具體的下拉選項(xiàng)兩部分組成，頭部又和下拉組進(jìn)行了聯(lián)動(dòng)， 把頭部當(dāng)做1個(gè)數(shù)組，下方選項(xiàng)作為1個(gè)數(shù)組，兩個(gè)數(shù)組數(shù)量一致之間形成一個(gè)完整的下拉選擇框可以更好的控制聯(lián)動(dòng)效果。

首先我們看彈出和收回，我們可以把他看作一個(gè)組件的高度由0逐漸擴(kuò)大再逐漸縮小至0，只要我們對這個(gè)組件的高度用動(dòng)畫來進(jìn)行控制就可以實(shí)現(xiàn)，下方有一個(gè)黑色透明度漸變，這里我們根據(jù)上方彈窗的動(dòng)畫來改變下方黑色陰影的變化即可。

關(guān)鍵代碼：

/// 下拉組件
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      _MenuBuilder(
        animation: animation,
        // 這里顯示我們需要的具體下拉框選項(xiàng)內(nèi)容
        child: widget.children[widget.menuController.index],
      ),
      isShowShadow // 是否顯示下方黑色陰影 只有下拉彈出才顯示 這個(gè)地方我們就可以根據(jù)UI設(shè)計(jì)來進(jìn)行高度自定義
          ? Expanded(
              child: InkWell(
              child: AnimatedBuilder(
                  animation: animation,
                  builder: (context, child) {
                  // 這里是下拉框下方陰影 點(diǎn)擊陰影隱藏下拉框
                    return Container(
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height,
                      color: Colors.black
                          .withOpacity(animation.value / (widget.height * 3)),
                    );
                  }),
              onTap: () {
                widget.menuController.hide();
              },
            ))
          : const SizedBox(),
    ],
  );
}

class _MenuBuilder extends StatelessWidget {
  final Animation<double> animation;
  final Widget child;

  const _MenuBuilder({required this.animation, required this.child});

// 這里我們主要用動(dòng)畫來控制下拉內(nèi)容組件的高度
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        child: child,
        animation: animation,
        builder: (context, child) {
          return Container(
            color: Colors.white,
            height: animation.value,
            child: child,
          );
        });
  }

接下來我們看頭部設(shè)計(jì)，頭部設(shè)計(jì)稍微復(fù)雜一些，主要還是狀態(tài)的改變，選項(xiàng)之間的聯(lián)動(dòng)，這里我們新建一個(gè)狀態(tài)控制器：主要來對頭部的一些狀態(tài)進(jìn)行控制，比如點(diǎn)擊頭部按鈕之后的文字or顏色的改變，選擇完畢顏色的保存，重置顏色的恢復(fù)等一些狀態(tài)，下方控制器主要就是來控制頭部的一些狀態(tài)。

/// 菜單控制器
class MenuController extends ChangeNotifier {
  // 當(dāng)前組件是否顯示 默認(rèn)不顯示 針對整個(gè)菜單數(shù)組
  bool isShow = false;

  // 顯示當(dāng)前組件title的文本 共用
  String title = "";

  // 顯示哪個(gè)下拉框
  int index = 0;

  // 選擇下拉框的的title 這個(gè)字段只有在真正選擇的時(shí)候才會改變
  int titleIndex = 0;

  /// 更改Title
  changeTitle(int titleIndex, String? title) {
    this.titleIndex = titleIndex;
    this.title = title ?? "";
    hide();
  }

  // 顯示下拉 index 為下拉哪一個(gè)菜單的index
  show(int index) {
    this.index = index;
    if (!isShow) {
      isShow = true;
    }
    notifyListeners();
  }

  // 隱藏 取消
  hide() {
    isShow = false;
    notifyListeners();
  }
}

有了控制器我們還需要對頭部數(shù)據(jù)進(jìn)行處理，首先我們的頭部在沒有選擇選項(xiàng)的時(shí)候會有一個(gè)默認(rèn)的數(shù)組，這個(gè)是永遠(yuǎn)不會改變的，所以這個(gè)數(shù)組一旦設(shè)置了就不能改變了，之后我們新建一個(gè)動(dòng)態(tài)數(shù)組也就是當(dāng)前顯示的數(shù)組，這個(gè)數(shù)組的默認(rèn)值就是我們未選擇選項(xiàng)的默認(rèn)值，這里我們需要監(jiān)聽頭部狀態(tài)的改變來對顯示數(shù)組進(jìn)行處理。

關(guān)鍵代碼：重點(diǎn) 主要針對頭部狀態(tài)改變的處理，這塊代碼搞清楚了，基本就OK了。

@override
void initState() {
  super.initState();
  // changeTitles就是我們的顯示數(shù)組
  changeTitles.addAll(widget.titles);
  for (var i = 0; i < changeTitles.length; i++) {
  //_chindren 是我們的頭部組件數(shù)組
    _children.add(searchFilter(changeTitles[i], i));
  }
  widget.menuController.addListener(() {
   
    // 下拉 true 隱藏 false
    var isShow = widget.menuController.isShow;
    
    // 改變頭部狀態(tài)
    setState(() {
      if (widget.menuController.title != "") {
      // 說明當(dāng)前選擇了選項(xiàng) 賦值我選擇的選項(xiàng)
        changeTitles[widget.menuController.titleIndex] =
            widget.menuController.title;
      } else {
      // 為空 說明當(dāng)前的選項(xiàng)我清空了 賦值初始頭部數(shù)組的數(shù)據(jù)
        changeTitles[widget.menuController.titleIndex] =
            widget.titles[widget.menuController.titleIndex];
      }
      // currentIndex 當(dāng)前選擇的index 默認(rèn)-1 用來對比更新頭部文字和顏色 
      // 如果下拉 更新當(dāng)前選項(xiàng)inedx 如果隱藏說明沒有選擇任何一個(gè)下拉框 置為-1
      if (isShow && currentIndex < widget.titles.length) {
        currentIndex = widget.menuController.index;
      } else {
        currentIndex = -1;
      }
      // 每次下拉收回我們只需改變頭部數(shù)據(jù)即可 changeTitles 永遠(yuǎn)都是顯示的數(shù)組 直接全部更新到組件即可
      _children.clear();
      for (var i = 0; i < changeTitles.length; i++) {
        _children.add(searchFilter(changeTitles[i], i));
      }
    });
  });
}

// 這里就是一個(gè)簡單的Row數(shù)組 按照百分比排列 也可以自定義不同寬度
@override
Widget build(BuildContext context) {
  return SizedBox(
    height: widget.headHeight ?? 45,
    child: Row(children: _children),
  );
}

主要對頭部文本內(nèi)容以及顏色進(jìn)行更新，如果當(dāng)前選項(xiàng)=頭部中的選項(xiàng)||或者 選項(xiàng)賦值的名字不等于初始值我們就認(rèn)為選中了此菜單，從而改變顏色。到這里基本邏輯就梳理清楚了，下拉框樣式這個(gè)可以自己根據(jù)自己的業(yè)務(wù)進(jìn)行自定義。

Widget searchFilter(String name, int index) {
TextStyle(color: currentIndex == index || widget.titles[index] != name
                      ? widget.clickColor
                      : widget.defaultColor),
}

以上就是關(guān)于“Flutter怎么實(shí)現(xiàn)自定義下拉選擇框”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。