利用Flutter制作一個(gè)會(huì)飛的菜單

更新時(shí)間：2023年06月06日 14:03:36 作者：程序那些事

flutter中自帶了drawer組件，可以實(shí)現(xiàn)通用的菜單功能，所以本文將嘗試一下通過自定義動(dòng)畫來實(shí)現(xiàn)一個(gè)會(huì)飛的菜單，感興趣的可以了解一下

簡介

flutter中自帶了drawer組件，可以實(shí)現(xiàn)通用的菜單功能，那么有沒有一種可能，我們可以通過自定義動(dòng)畫來實(shí)現(xiàn)一個(gè)別樣的菜單呢？

答案是肯定的，一起來看看吧。

定義一個(gè)菜單項(xiàng)目

因?yàn)檫@里的主要目的是實(shí)現(xiàn)菜單的動(dòng)畫，所以這里的菜單比較簡單，我們的menu是一個(gè)StatefulWidget,里面就是一個(gè)Column組件，column中有四行詩：

  static const _menuTitles = [
    '遲日江山麗',
    '春風(fēng)花草香',
    '泥融飛燕子',
    '沙暖睡鴛鴦',
  ];
    Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child:_buildContent()
    );
  }
  Widget _buildContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 16),
        ..._buildListItems()
      ],
    );
  }
  List<Widget> _buildListItems() {
    final listItems = <Widget>[];
    for (var i = 0; i < _menuTitles.length; ++i) {
      listItems.add(
         Padding(
            padding: const EdgeInsets.symmetric(horizontal: 36.0, vertical: 16),
            child: Text(
              _menuTitles[i],
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w500,
              ),
            ),
      )
      );
    }
    return listItems;
  }

讓menu動(dòng)起來

怎么讓menu動(dòng)起來呢？我們需要給最外層的AnimateMenuApp添加一個(gè)AnimationController,所以需要在_AnimateMenuAppState添加SingleTickerProviderStateMixin的mixin,如下所示：

class _AnimateMenuAppState extends State<AnimateMenuApp>
    with SingleTickerProviderStateMixin {
  late AnimationController _drawerSlideController;

然后在initState中對(duì)_drawerSlideController進(jìn)行初始化：

  void initState() {
    super.initState();
    _drawerSlideController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 150),
    );
  }

在讓menu動(dòng)起來之前，我們需要設(shè)計(jì)一下動(dòng)畫的樣式。假如我們的動(dòng)畫是讓menu從右向左飛出。那么我們可以使用FractionalTranslation來進(jìn)行offset進(jìn)行位置變換。

并且當(dāng)菜單沒有開啟的時(shí)候，我們需要顯示一個(gè)空的組件，這里用SizedBox來替代。

當(dāng)菜單開啟的時(shí)候，就執(zhí)行這個(gè)FractionalTranslation的動(dòng)畫，所以我們的build方法需要這樣寫：

  Widget _buildDrawer() {
    return AnimatedBuilder(
      animation: _drawerSlideController,
      builder: (context, child) {
        return FractionalTranslation(
          translation: Offset(1.0 - _drawerSlideController.value, 0.0),
          child: _isDrawerClosed() ? const SizedBox() : const Menu(),
        );
      },
    );
  }

FractionalTranslation中的Offset是根據(jù)_drawerSlideController的value來進(jìn)行變化的。

那么_drawerSlideController的value怎么變化呢？

我們定義一個(gè)_toggleDrawer方法，在點(diǎn)擊菜單按鈕的時(shí)候來觸發(fā)這個(gè)方法，從而實(shí)現(xiàn)_drawerSlideController的value變化：

  void _toggleDrawer() {
    if (_isDrawerOpen() || _isDrawerOpening()) {
      _drawerSlideController.reverse();
    } else {
      _drawerSlideController.forward();
    }
  }

同時(shí)，我們定義下面幾個(gè)判斷菜單狀態(tài)的方法：

  bool _isDrawerOpen() {
    return _drawerSlideController.value == 1.0;
  }
  bool _isDrawerOpening() {
    return _drawerSlideController.status == AnimationStatus.forward;
  }
  bool _isDrawerClosed() {
    return _drawerSlideController.value == 0.0;
  }

因?yàn)椴藛螆D標(biāo)需要根據(jù)菜單狀態(tài)來發(fā)生改變，菜單的狀態(tài)又是依賴于_drawerSlideController，所以，我們把IconButton放到一個(gè)AnimatedBuilder里面，從而實(shí)現(xiàn)動(dòng)態(tài)變化的效果：

  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      title: const Text(
        '動(dòng)畫菜單',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
      backgroundColor: Colors.transparent,
      elevation: 0.0,
      automaticallyImplyLeading: false,
      actions: [
        AnimatedBuilder(
          animation: _drawerSlideController,
          builder: (context, child) {
            return IconButton(
              onPressed: _toggleDrawer,
              icon: _isDrawerOpen() || _isDrawerOpening()
                  ? const Icon(
                Icons.clear,
                color: Colors.black,
              )
                  : const Icon(
                Icons.menu,
                color: Colors.black,
              ),
            );
          },
        ),
      ],
    );
  }

最后實(shí)現(xiàn)的效果如下：

添加菜單內(nèi)部的動(dòng)畫

上面的例子中整個(gè)菜單是作為一個(gè)整體來動(dòng)畫的，有沒有可能菜單里面的每一個(gè)item也有自己的動(dòng)畫呢？

答案當(dāng)然是肯定的。

我們只需要在上面的基礎(chǔ)上將menu組件添加動(dòng)畫支持即可：

class _MenuState extends State<Menu> with SingleTickerProviderStateMixin

動(dòng)畫中的位移我們選擇使用Transform.translate，同時(shí)還添加了淡入淡出的效果，也就是把上面例子中的Padding用AnimatedBuilder包裹起來，如下所示：

  List<Widget> _buildListItems() {
    final listItems = <Widget>[];
    for (var i = 0; i < _menuTitles.length; ++i) {
      listItems.add(
        AnimatedBuilder(
          animation: _itemController,
          builder: (context, child) {
            final animationPercent = Curves.easeOut.transform(
              _itemSlideIntervals[i].transform(_itemController.value),
            );
            final opacity = animationPercent;
            final slideDistance = (1.0 - animationPercent) * 150;
            return Opacity(
              opacity: opacity,
              child: Transform.translate(
                offset: Offset(slideDistance, 0),
                child: child,
              ),
            );
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 36.0, vertical: 16),
            child: Text(
              _menuTitles[i],
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ),
      );
    }
    return listItems;
  }

AnimatedBuilder中的builder返回的是一個(gè)Opacity對(duì)象，里面包含了opacity和child兩個(gè)屬性。其中最終要的一個(gè)變化值是animationPercent，這個(gè)值是根據(jù)_itemController的value和初始設(shè)置的各個(gè)item的變化時(shí)間來決定的。

每個(gè)item的值是不一樣的：

  void _createAnimationIntervals() {
    for (var i = 0; i < _menuTitles.length; ++i) {
      final startTime = _initialDelayTime + (_staggerTime * i);
      final endTime = startTime + _itemSlideTime;
      _itemSlideIntervals.add(
        Interval(
          startTime.inMilliseconds / _animationDuration.inMilliseconds,
          endTime.inMilliseconds / _animationDuration.inMilliseconds,
        ),
      );
    }
  }

最后運(yùn)行結(jié)果如下：