03_Flutter自定义下拉菜单

已于 2023-10-27 10:14:37 修改
阅读量1.8k 收藏 5
点赞数 1
分类专栏： 重学Flutter 文章标签： flutter dart 移动开发
于 2023-10-27 10:12:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gzx110304/article/details/134069921
版权

03_Flutter自定义下拉菜单

在Flutter的内置api中，可以使用showMenu实现类似下拉菜单的效果，或者使用PopupMenuButton组件，PopupMenuButton内部也是使用了showMenu这个api，但是使用showMenu时，下拉面板的显示已经被约定死了，只能放一个简单的列表，没有办法定制下来面板的ui，并且下拉面板的宽高需要通过指定constraints进行限制，下面是一个简单的showMenu的用法:

Container(
  height: 44,
  margin: EdgeInsetsDirectional.only(top: 30, start: 30, end: 30),
  color: Colors.red,
  child: Builder(
    builder: (context) {
      return GestureDetector(
        onTap: () {
          final RenderBox button = context.findRenderObject()! as RenderBox;
          final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;

          Offset offset = Offset(0.0, button.size.height);

          RelativeRect position = RelativeRect.fromRect(
            Rect.fromPoints(
              button.localToGlobal(offset, ancestor: overlay),
              button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),
            ),
            Offset.zero & overlay.size,
          );
          
          showMenu(
            context: context,
            position: position,
            constraints: BoxConstraints(maxWidth: 315, maxHeight: 200),
            items: List.generate(5, (index) => PopupMenuItem(
              child: Container(
                width: 375,
                height: 44,
                alignment: AlignmentDirectional.center,
                child: Text("item"),
              )
            ))
          );
        },
      );
    },
  ),
)

在这里插入图片描述

接下来，我们将参照showMenu的源码，依葫芦画个瓢，自定义一个下拉菜单的api，并可自由定制下拉面板的布局内容，篇幅有点长，请耐心观看。

一.确定下拉面板的起始位置

查看PopupMenuButton的源码，可以知道，PopupMenuButton在确定下拉面板的起始位置时，是先获取下拉面板依赖的按钮的边界位置和整个页面的显示区域边界，通过这两个边界计算得到一个RelativeRect，这个RelativeRect就是用来描述下拉面板的起始位置的。

showPopup(BuildContext context) {
  final RenderBox button = context.findRenderObject()! as RenderBox;
  final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;

  Offset offset = Offset(0.0, button.size.height);

  RelativeRect position = RelativeRect.fromRect(
    Rect.fromPoints(
      button.localToGlobal(offset, ancestor: overlay),
      button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),
    ),
    Offset.zero & overlay.size,
  );
}

注：上述代码中用的的context对象，必须是下拉面板依赖的按钮对应的context，否则最后计算出来的RelativeRect是不对的。计算过程不做过多解释了，直接上图：

在这里插入图片描述

二.确定下拉面板的布局约束

  • 水平方向确定最大宽度，比较简单，下拉面板的最大宽度和它所依赖的按钮的宽度一致即可
  • 垂直方向上的最大高度，上一步已经确定了position的值，垂直方向上的最大高度可以取position.top - buttonHeight - padding.top - kToolbarHeight和constraints.biggest.height - position.top - padding.bottom的最大值，padding为安全区域的大小
  • 使用CustomSingleChildLayout作为下拉面板的父容器，并实现一个SingleChildLayoutDelegate，重写getConstraintsForChild，确定约束
EdgeInsets padding = MediaQuery.paddingOf(context);

class _CustomPopupRouteLayout extends SingleChildLayoutDelegate {

  final RelativeRect position;

  _CustomPopupRouteLayout(this.position);

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    Size buttonSize = position.toSize(constraints.biggest);

    double constraintsWidth = buttonSize.width;
    double constraintsHeight = max(position.top - buttonSize.height - padding.top - kToolbarHeight, constraints.biggest.height - position.top - padding.bottom);

    return BoxConstraints.loose(Size(constraintsWidth, constraintsHeight));
  }

  @override
  bool shouldRelayout(covariant _CustomPopupRouteLayout oldDelegate) {
    return position != oldDelegate.position;
  }
}

三.显示下拉面板

我们先把下拉面板显示出来看看效果，这里的下拉面板其实是一个弹出层，而在Flutter中，所有的弹出层的显示和页面路由是一样的，都是通过Navigator.push进行显示，参照showMenu的源码，这里的弹出层我们让其继承PopupRoute

class _CustomPopupRoute<T> extends PopupRoute<T> {
  final RelativeRect position;
  @override
  final String? barrierLabel;

  _CustomPopupRoute({
    required this.position,
    required this.barrierLabel,
  });

  @override
  Color? get barrierColor => null;

  @override
  bool get barrierDismissible => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 200);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return CustomSingleChildLayout(
      delegate: _CustomPopupRouteLayout(position),
      child: Material(
        child: Container(
          color: Colors.yellow,
          width: double.infinity,
          height: double.infinity,
          alignment: AlignmentDirectional.center,
          child: Text("popup content"),
        ),
      ),
    );
  }

}

showPopup(BuildContext context) {
  final RenderBox button = context.findRenderObject()! as RenderBox;
  final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;

  Offset offset = Offset(0.0, button.size.height);

  RelativeRect position = RelativeRect.fromRect(
    Rect.fromPoints(
      button.localToGlobal(offset, ancestor: overlay),
      button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),
    ),
    Offset.zero & overlay.size,
  );
  
  Navigator.of(context).push(_CustomPopupRoute(
      position: position, barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel
  ));
}

在这里插入图片描述

如图，黄色区域就是下拉面板，可以看到，点击按钮下拉面板显示，点击下拉面板以外的区域，下拉面板关闭，但是位置好像不对，因为我们根本就没去确定下拉面板的位置。

四.确定下拉面板的位置

@override
Offset getPositionForChild(Size size, Size childSize) {
	return super.getPositionForChild(size, childSize);
}

只需要重写SingleChildLayoutDelegate的getPositionForChild方法，返回一个Offset对象，Offset的x、y的值就代表下拉面板左上角的位置，那么问题来了，x、y的值怎么确定？

  • 确定x

    x = position.left

  • 确定y

    • position.top + constraintsHeight > size.height - paddingBottom 时

    在这里插入图片描述

    • position.top + constraintsHeight <= size.height - paddingBottom 时

    在这里插入图片描述

EdgeInsets padding = MediaQuery.paddingOf(context);

class _CustomPopupRouteLayout extends SingleChildLayoutDelegate {

  final RelativeRect position;
  EdgeInsets padding;

  _CustomPopupRouteLayout(this.position, this.padding);

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    Size buttonSize = position.toSize(constraints.biggest);

    double constraintsWidth = buttonSize.width;
    double constraintsHeight = max(position.top - buttonSize.height - padding.top - kToolbarHeight, constraints.biggest.height - position.top - padding.bottom);

    return BoxConstraints.loose(Size(constraintsWidth, constraintsHeight));
  }

  
    @override
  Offset getPositionForChild(Size size, Size childSize) {
    double x = position.left;
    double y = position.top;
    final double buttonHeight = size.height - position.top - position.bottom;
    double constraintsHeight = max(position.top - buttonHeight - padding.top - kToolbarHeight, size.height - position.top - padding.bottom);
    if(position.top + constraintsHeight > size.height - padding.bottom) {
      y = position.top - childSize.height - buttonHeight;
    }

    return Offset(x, y);
  }
  

  @override
  bool shouldRelayout(covariant _CustomPopupRouteLayout oldDelegate) {
    return position != oldDelegate.position || padding != oldDelegate.padding;
  }
}

六.下拉动画实现

创建动画插值器，其值从0 ~ 1之间变化，动画时长为PopupRoute中重写的transitionDuration，及200ms时间内，从0变到1，或者从1变到0

final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));

使用AnimatedBuilder改造PopupRoute的布局结构，根据heightFactorTween的动画执行值 * 下拉菜单内容容器的高度，改变拉菜单内容的高度即可，这里暂时将高度设置为固定值300。

class _CustomPopupRoute<T> extends PopupRoute<T> {
  
  ...
  
  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    EdgeInsets padding = MediaQuery.paddingOf(context);
    final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      removeBottom: true,
      removeLeft: true,
      removeRight: true,
      child: CustomSingleChildLayout(
        delegate: _CustomPopupRouteLayout(position, padding),
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) {
            return Material(
              child: Container(
                height: 300*heightFactorTween.evaluate(animation),
                child: child,
              )
            );
          },
          child: Container(
            color: Colors.yellow,
            width: double.infinity,
            height: 300,
            alignment: AlignmentDirectional.center,
            child: Text("popup content"),
          ),
        ),
      ),
    );
  }
}

下拉动画效果已经出来了，但是实际情况下，下拉面板的高度是不能直接在组件层固定写死的，所以这里需要动态计算出下拉面板的高度。

七.下拉面板动态高度，支持下拉动画

想要获取组件的高度，需要等到组件的layout完成后，才能获取到组件的大小，因此，我们需要自定义一个RenderObject，重写其performLayout，在子控件第一次layout完后，获取到子控件的初始高度，子控件的初始化高度结合动画的高度比例系数来最终确定自身的大小。

class _RenderHeightFactorBox extends RenderShiftedBox {
  double _heightFactor;
  _RenderHeightFactorBox({
    RenderBox? child,
    double? heightFactor,
  }):_heightFactor = heightFactor ?? 1.0, super(child);

  double get heightFactor => _heightFactor;

  set heightFactor(double value) {
    if (_heightFactor == value) {
      return;
    }
    _heightFactor = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;

    if (child == null) {
      size = constraints.constrain(Size.zero);
      return;
    }

    child!.layout(constraints, parentUsesSize: true);

    size = constraints.constrain(Size(
      child!.size.width,
      child!.size.height,
    ));

    child!.layout(constraints.copyWith(maxWidth: size.width, maxHeight: size.height * heightFactor), parentUsesSize: true);

    size = constraints.constrain(Size(
      child!.size.width,
      child!.size.height,
    ));
  }
}

接着定义一个SingleChildRenderObjectWidget，并引用_RenderHeightFactorBox

class _HeightFactorBox extends SingleChildRenderObjectWidget {
  final double? heightFactor;

  const _HeightFactorBox({
    super.key,
    this.heightFactor,
    super.child,
  });

  @override
  RenderObject createRenderObject(BuildContext context) => _RenderHeightFactorBox(heightFactor: heightFactor);

  @override
  void updateRenderObject(BuildContext context, _RenderHeightFactorBox renderObject) {
    renderObject.heightFactor = heightFactor ?? 1.0;
  }
}

最后把下拉面板中，执行动画的child使用_HeightFactorBox包裹，并传入heightFactorTween的执行结果即可。

@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
  EdgeInsets padding = MediaQuery.paddingOf(context);
  final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    removeBottom: true,
    removeLeft: true,
    removeRight: true,
    child: CustomSingleChildLayout(
      delegate: _CustomPopupRouteLayout(position, padding),
      child: AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return Material(
            child: _HeightFactorBox(
              heightFactor: heightFactorTween.evaluate(animation),
              child: child,
            )
          );
        },
        child: Container(
          color: Colors.yellow,
          width: double.infinity,
          height: double.infinity,
          alignment: AlignmentDirectional.center,
          child: Text("popup content"),
        ),
      ),
    ),
  );
}

八.完整代码

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("下拉菜单"),
        backgroundColor: Colors.blue,
      ),
      body: Container(
        width: 375,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 44,
              margin: const EdgeInsetsDirectional.only(top: 30, start: 30, end: 30),
              color: Colors.red,
              child: Builder(
                builder: (context) {
                  return GestureDetector(
                    onTap: () {
                      showPopup(context: context, builder: (context) {
                        return Container(
                          height: 400,
                          decoration: const BoxDecoration(
                            color: Colors.yellow
                          ),
                          child: SingleChildScrollView(
                            physics: const ClampingScrollPhysics(),
                            child: Column(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: List<Widget>.generate(29, (index) {
                                int itemIndex = index ~/ 2;
                                if(index.isEven) {
                                  return Container(
                                    height: 44,
                                    alignment: AlignmentDirectional.center,
                                    child: Text("item$itemIndex"),
                                  );
                                } else {
                                  return Container(
                                    height: 1,
                                    color: Colors.grey,
                                  );
                                }
                              }),
                            ),
                          ),
                        );
                      });
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

}

showPopup({
  required BuildContext context,
  required WidgetBuilder builder,
  double? elevation,
  Color? shadowColor,
  Duration animationDuration = const Duration(milliseconds: 200)
}) {
  final RenderBox button = context.findRenderObject()! as RenderBox;
  final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox;

  Offset offset = Offset(0.0, button.size.height);

  RelativeRect position = RelativeRect.fromRect(
    Rect.fromPoints(
      button.localToGlobal(offset, ancestor: overlay),
      button.localToGlobal(button.size.bottomRight(Offset.zero) + offset, ancestor: overlay),
    ),
    Offset.zero & overlay.size,
  );

  Navigator.of(context).push(_CustomPopupRoute(
      position: position,
      builder: builder,
      elevation: elevation,
      shadowColor: shadowColor,
      animationDuration: animationDuration,
      barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel
  ));
}

class _CustomPopupRoute<T> extends PopupRoute<T> {

  final WidgetBuilder builder;
  final RelativeRect position;
  final double? elevation;
  final Color? shadowColor;
  @override
  final String? barrierLabel;
  final Duration animationDuration;

  _CustomPopupRoute({
    required this.builder,
    required this.position,
    required this.barrierLabel,
    this.elevation,
    this.shadowColor,
    Duration? animationDuration
  }): animationDuration = animationDuration ?? const Duration(milliseconds: 200),
  super(traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop);

  @override
  Color? get barrierColor => null;

  @override
  bool get barrierDismissible => true;

  @override
  Duration get transitionDuration => animationDuration;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    EdgeInsets padding = MediaQuery.paddingOf(context);
    final CurveTween heightFactorTween = CurveTween(curve: const Interval(0.0, 1.0));
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      removeBottom: true,
      removeLeft: true,
      removeRight: true,
      child: CustomSingleChildLayout(
        delegate: _CustomPopupRouteLayout(position, padding),
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) {
            return Material(
              child: _HeightFactorBox(
                heightFactor: heightFactorTween.evaluate(animation),
                child: child,
              )
            );
          },
          child: builder(context),
        ),
      ),
    );
  }

}

class _CustomPopupRouteLayout extends SingleChildLayoutDelegate {

  final RelativeRect position;
  EdgeInsets padding;
  double childHeightMax = 0;

  _CustomPopupRouteLayout(this.position, this.padding);

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    Size buttonSize = position.toSize(constraints.biggest);

    double constraintsWidth = buttonSize.width;
    double constraintsHeight = max(position.top - buttonSize.height - padding.top - kToolbarHeight, constraints.biggest.height - position.top - padding.bottom);

    return BoxConstraints.loose(Size(constraintsWidth, constraintsHeight));
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    double x = position.left;
    double y = position.top;
    final double buttonHeight = size.height - position.top - position.bottom;
    double constraintsHeight = max(position.top - buttonHeight - padding.top - kToolbarHeight, size.height - position.top - padding.bottom);
    if(position.top + constraintsHeight > size.height - padding.bottom) {
      y = position.top - childSize.height - buttonHeight;
    }

    return Offset(x, y);
  }

  @override
  bool shouldRelayout(covariant _CustomPopupRouteLayout oldDelegate) {
    return position != oldDelegate.position || padding != oldDelegate.padding;
  }
}

class _RenderHeightFactorBox extends RenderShiftedBox {
  double _heightFactor;
  _RenderHeightFactorBox({
    RenderBox? child,
    double? heightFactor,
  }):_heightFactor = heightFactor ?? 1.0, super(child);

  double get heightFactor => _heightFactor;

  set heightFactor(double value) {
    if (_heightFactor == value) {
      return;
    }
    _heightFactor = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;

    if (child == null) {
      size = constraints.constrain(Size.zero);
      return;
    }

    child!.layout(constraints, parentUsesSize: true);

    size = constraints.constrain(Size(
      child!.size.width,
      child!.size.height,
    ));

    child!.layout(constraints.copyWith(maxWidth: size.width, maxHeight: size.height * heightFactor), parentUsesSize: true);

    size = constraints.constrain(Size(
      child!.size.width,
      child!.size.height,
    ));
  }
}

class _HeightFactorBox extends SingleChildRenderObjectWidget {

  final double? heightFactor;

  const _HeightFactorBox({
    super.key,
    this.heightFactor,
    super.child,
  });

  @override
  RenderObject createRenderObject(BuildContext context) => _RenderHeightFactorBox(heightFactor: heightFactor);

  @override
  void updateRenderObject(BuildContext context, _RenderHeightFactorBox renderObject) {
    renderObject.heightFactor = heightFactor ?? 1.0;
  }
}
andr_gale
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发实战：如何优雅地使用下拉菜单
奇妙的Bug之旅
05-30 219
在Flutter中，下拉菜单（DropdownMenu）是一种常见的用户界面元素，它允许用户从预定义的列表中选择一个选项。本文将详细介绍如何在Flutter应用中实现下拉菜单，并提供完整的代码示例。在这个示例中，我们创建了一个简单的应用，其中包含一个下拉菜单。用户可以从三个预定义的选项中选择一个，并且选择的结果会被打印到控制台。，你可以手动打开或关闭下拉菜单，或者在用户选择一个选项后执行其他操作。接下来，创建一个下拉菜单。是一个回调函数，当用户选择一个选项时会被调用。在你的Flutter代码文件中，导入。
Flutter 自定义顶部导航栏（方法一）
01-20
然而，这只是一个基础版本，你可以进一步扩展功能，比如添加下拉菜单、滑动切换选项卡、动态改变颜色等。同时，注意保持代码的可维护性和遵循Flutter的最佳实践，如使用Provider或Bloc进行状态管理，以及遵循Widget...
flutter实现下拉菜单组件——基于PopupMenuButton
baorant24的博客
04-11 3320
问题背景 客户端日常开发和学习过程，下拉菜单是一个很常见的组件，本文主要介绍flutter中实现下拉菜单组件的一个方案，基于PopupMenuButton来进行实现。 问题分析 PopupMenuButton PopupMenuButton 是一个非常常见的弹出菜单栏。 属性介绍： 问题解决 话不多说，直接上代码 (1)...
Flutter 组件集录 | 下拉菜单 DropdownMenu 组件
张风捷特烈的博客
01-18 2232
theme: cyanosis 1. 前言 Flutter 框架中新增了 DropdownMenu 下拉按钮，可以让我们更方便地实现下拉选择的交互。本文案例源码可以详见 【FlutterUnit 的 DropdownMenu】 2. DropdownMenu 基础使用 首先通过一个最简单的案例体验一下 DropdownMenu 的使用，如下所示： - 点击使会下拉展示菜...
Flutter强大的下拉筛选菜单gzx_dropdown_menu
Dream It Possible
08-03 6037
是一个Flutter自定义功能强大的轻量级下拉筛选菜单Package，它支持iOS和Android。A custom is strong dropdown menu for Flutter. Easy to use and powerful for customization, it's up to you what you want to display in the dropdown menu!查看版本更新记录效果图展示了仿美团和淘宝的下拉筛选菜单。 目前已发布到Pub，你可以在Pub官网查看最新的版
flutter 弹出菜单按钮组件PopupMenuButton、弹出菜单组件方法showMenu
weixin_43294560的博客
04-19 6508
弹出菜单按钮组件: 不能设置位置,点击按钮后从按钮的地方展开菜单,会覆盖按钮 PopupMenuButton( itemBuilder: (context){ return [ PopupMenuItem( 菜单内容 value, 点击后回调中传递的值 ...
flutter实现下拉框功能——基于DropdownButtonFormField
baorant24的博客
04-11 3667
flutter实现下拉框功能——基于DropdownButtonFormField 问题背景 客户端日常开发和学习过程，下拉框是一个很常见的组件，本文主要介绍flutter中实现下拉框的一个方案，基于DropdownButtonFormField来进行实现。 问题分析 DropdownButtonFormField 是一个...
flutter 实现表单的封装包含下拉框和输入框
最新发布
weixin_40466351的博客
04-18 574
【代码】flutter 实现表单的封装包含下拉框和输入框。
Flutter：使用复选框进行下拉多选
weixin_47933729的博客
01-24 1252
创建一个名为MultiSelect的可重用小部件，它可以获取选项列表（您可以对这些项目进行硬编码或从。
第一百八十六回 DropdownMenu组件
talk_8的专栏
12-02 911
本章回主要介绍了下拉菜单的概念和使用方法，并且通过文字结合代码的方式进行了介绍，最后对本文内容进行了总结。
Flutter高阶技术：如何实现自定义弹出菜单框
06-03
在Flutter开发中，自定义弹出菜单框是提高应用交互性和用户体验的重要手段。Flutter作为一个跨平台的移动开发框架，提供了丰富的API和工具，使得开发者能够轻松实现这样的功能。本篇文章将深入探讨如何在Flutter中...
Flutter入门与实战：菜单弹出框
09-15
Flutter入门与实战：菜单弹出框
Flutter PopupMenuButton 菜单
10-26
Flutter PopupMenuButton 菜单
select_form_field:Flutter选择表单字段窗口小部件。它在下拉菜单中显示选项列表
03-20
select_form_field Flutter选择字段小部件。它在下拉菜单中显示选项列表。此小部件扩展了TextField，并且具有与TextFormField类似的行为 用法 在flutter项目的pubspec.yaml中，添加以下依赖项： dependencies : ... select_form_field : " ^2.0.0 " 在您的库中添加以下导入： import 'package:select_form_field/select_form_field.dart' ; 要获得Flutter入门方面的帮助，请查看在线。 例子 使用列表映射传递项目： value ：[字符串]， textStyle ：[TextStyle |空值]， label ：[String |空值]， icon ：[小部件|空值]， enable ：[bool |空值]，
自定义功能强大的下拉筛选菜单flutterpackage支持iOS和Android
08-07
本篇将详细探讨一个针对Flutter的自定义下拉筛选菜单package，该package名为"GZX Dropdown Menu"，其特点在于提供了强大的功能和高度的定制性。 GZX Dropdown Menu是专门为Flutter设计的一个组件库，它允许开发者...
gzx_dropdown_menu:自定义功能强大的下拉筛选菜单flutter package，支持iOS和Android
05-13
这是一个Flutter自定义功能强大的轻量级下拉筛选菜单Package，它支持iOS和Android。 :weary_cat:开源不易，麻烦给个Star:star:吧！我会根据大家的关注度和个人时间持续更新代码！ :weary_cat:如你想接收更新消息，你...
多选择标签下拉控件.zip
09-12
1. **DropdownButton**: Flutter 的 DropdownButton 是一个标准的下拉菜单控件，它可以展示一个单选的选项列表。不过，为了实现多选择功能，我们需要对其进行扩展或自定义。通常会创建一个自定义的 ...
Flutter实现京东搜索结果的下拉选项和遮罩效果
lin19991222的博客
04-04 816
实现京东搜索结果页的下拉选项及遮罩效果
Flutter中下拉刷新功能的实现
我叫柱子哥
11-19 2214
效果。我们知道Flutter实现了两种风格的脚手架，一种是iOS风格的，一种是material风格的。刷新组件也一样,Flutter中Materi风格的widget名称叫做RefreshIndicator,iOS风格的widget名称叫做CupertinoSliverRefreshControl。
flutter下拉菜单
08-03
Flutter下拉菜单是一种常见的UI组件，用于展示一个下拉列表供用户选择。在Flutter中，可以使用DropdownButton组件来实现下拉菜单的功能。 DropdownButton组件需要一个onChanged回调函数来处理用户选择的操作，该回调函数会接收到一个参数，表示用户选择的值。我们可以在该回调函数中进行一些响应的操作，例如更新界面展示、发送网络请求等。 DropdownButton组件需要一个items属性来定义下拉菜单中的选项列表，一般使用List<DropdownMenuItem>来表示。每个DropdownMenuItem都需要一个value属性来表示选项的值，以及一个child属性来表示选项的显示内容。 下拉菜单还可以设置一个默认值，可以通过设置value属性来实现。另外，可以对下拉菜单进行样式调整，例如修改字体颜色、背景颜色等。这些都可以通过DropdownButton组件的相应属性进行设置。 总结起来，使用Flutter下拉菜单需要以下几个步骤： 1. 定义一个onChanged回调函数，处理用户选择操作。 2. 定义一个items属性，表示下拉菜单中的选项列表。 3. 设置默认值和样式。 4. 在界面中使用DropdownButton组件来展示下拉菜单。 Flutter的下拉菜单功能简单易用，可以方便地满足用户对于选择的需求。通过合理使用下拉菜单，我们可以提供更好的用户体验，使应用程序更加灵活和智能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值