flutter实现顶部向下弹框进行条件筛选

最新推荐文章于 2024-04-14 09:32:59 发布
最新推荐文章于 2024-04-14 09:32:59 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： flutter 文章标签： flutter dart 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46143850/article/details/115390779
版权

在flutter项目中因为弹出框多数为底部弹框，但是也偶尔有例外。
这个时候没有flutter框架中没有合适的组件了，所以需要我们自己去实现。
具体效果截图和实现代码请往下看（该代码没有引入任何一个依赖，可以独立运行起来，所以可以放心放在框架中运行）：

1、效果截图

（1）默认样式
请添加图片描述
（2） 点击菜单图标
请添加图片描述

2、代码

import 'package:flutter/material.dart';

class OrderPage extends StatefulWidget {
  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {

  bool flag=false;//控制是否显示顶部弹框
//筛选布局的高度
  double selectHeight = 24;
  TextEditingController trade = new TextEditingController(); //输入的交易所
  TextEditingController tradePair = new TextEditingController();//输入的交易对

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Color(0xff000520)), //返回按钮颜色
        title: Text(
          "交易记录",
          style: TextStyle(
              fontSize: 17,
              fontWeight: FontWeight.w500,
              color: Color(0xff111E3E)),
        ),
        centerTitle: true,
        actions: [
          GestureDetector(
            onTap: (){
              print("点击下拉弹框图标");
              setState(() {
                flag=!flag;
              });

            },
            // child: Padding(
            //   padding: EdgeInsets.only(top: 5.0,right: 15),
            //   child: Image.asset(
            //     "images/celue/orderbtn@2x.png",
            //     width: MediaQuery.of(context).size.width*0.06,
            //   ),
            // ),
            child: Padding(
              padding: EdgeInsets.only(top: 15.0,right: 15),
              child: Text(
                  "菜单",
                style: TextStyle(
                  fontSize: 15,
                  color: Colors.black
                ),
              ),
            ),
          )
        ],
      ),
        body:flag? Stack(children: <Widget>[
          Column(
            children: <Widget>[
              Expanded(
                  flex: 1,
                  child:Container()
              ),
            ],
          ),
          Positioned(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height - _containerPosition.dy -15, //15是筛选框距离筛选栏的距离
              child: GestureDetector(
                child: Container(
                  margin: EdgeInsets.only(top: 6),
                  color: Colors.black.withOpacity(0.5),
                  child: Column(
                    children: <Widget>[showSelectWidget()],
                  ),
                ),
                onTap: () {
                  setState(() {
                    // _selectIndex = null;
                  });
                },
              ))


        ]):SingleChildScrollView(),
    );
  }

 var _selectDate1= DateTime.now();
 var _selectDate2= DateTime.now();
  //选择日期的方法
  _showDataPicker(val) async {
    debugPrint('选择时间方法');
    final DateTime date = await showDatePicker(
      context: context,
      initialDate: _selectDate1,
      firstDate: DateTime(1998),
      lastDate: DateTime(2030),
    );

    if (date == null) return;
    if (val == "from") {
      if(mounted){
        setState(() {
          _selectDate1 = date;
        });
      }
    } else if (val == "to") {
      if(mounted){
        setState(() {
          _selectDate2 = date;
        });
      }
    }
  }

  //将时间转化为字符串类型
  showDate(time){
    return time.toString().split(" ")[0];
  }


  /// 位置信息
  Offset _containerPosition = Offset(0, 0);
  List year = List()
    ..add({"txt": '全部', "select": true})
    ..add({"txt": '买入', "select": false})
    ..add({"txt": '卖出', "select": false});
  var yearWidget = List();


  ///订单状态
  List _getYearWidgetList() {
    yearWidget.clear();
    yearWidget.addAll(getNewItemList(year));
    return yearWidget;
  }

  changeType(index, List itemList) {
    setState(() {
      itemList[index]["select"] = !itemList[index]["select"];
      for (int i = 0; i < itemList.length; i++) {
        if (index != i) {
          itemList[i]["select"] = false;
        }
      }
    });
  }

  List getNewItemList(List itemList) {
    List list = List();
    itemList.asMap().forEach((i, item) =>{
      list.add(GestureDetector(
        onTap: (){
          setState(() {
            changeType(i, itemList);
            print("当前的订单状态： ${item["txt"]}");
          });
        },
        child: Container(
          width: MediaQuery.of(context).size.width*0.28,
          height: MediaQuery.of(context).size.height*0.06,
          decoration: BoxDecoration(
              color: itemList[i]["select"] ? Color(0xFF2EBEF3) : Color(0xFFE8EEF1),
              borderRadius: BorderRadius.all(Radius.circular(8))),
          child: Center(
            child: Text(itemList[i]["txt"],
                style: TextStyle(
                    color: itemList[i]["select"] ? Color(0xFFFFFFFF) : Color(0xFF333333))),
          ),
        ),
      ))
    });
    return list;
  }

  _reSet(){
    tradePair.text="";
    trade.text="";
   year = List()
      ..add({"txt": '全部', "select": true})
      ..add({"txt": '买入', "select": false})
      ..add({"txt": '卖出', "select": false});
    yearWidget = List();
    _selectDate1= DateTime.now();
    _selectDate2= DateTime.now();
  }

  ///显示筛选Widget
  Widget showSelectWidget() {
    return GestureDetector(
      child:  Container(
        color: Colors.white,
        child: SizedBox(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(left: 15, top: 25, right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "订单状态",
                      style: TextStyle(
                          color: Color(0xFFBEBFC4),
                          fontSize: 14
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        top: 12,
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[..._getYearWidgetList()],
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 15, top: 25, right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "交易所",
                      style: TextStyle(
                          color: Color(0xFFBEBFC4),
                          fontSize: 14
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        top: 12,
                      ),
                      child: Container(
                        alignment: Alignment.center,
                        width: MediaQuery.of(context).size.width*0.5,
                        height: MediaQuery.of(context).size.height*0.06,
                        decoration: BoxDecoration(
                          color: Color(0xFFE8EEF1),
                          borderRadius: BorderRadius.circular(3.0),
                        ),
                        child: TextField(
                          controller: trade,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            //输入框修饰
                            contentPadding: EdgeInsets.only(left: 5.0,bottom: 5.0),
                            hintText:"请输入交易所",
                            hintStyle: TextStyle(
                                fontSize: 14,
                            ),
                            labelStyle: TextStyle(
                                fontSize: 14,
                                color: Color(0xff111E3E),
                                fontWeight: FontWeight.bold
                            ), //设置提示文字样式
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 15, top: 25, right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "交易币对查询",
                      style: TextStyle(
                          color: Color(0xFFBEBFC4),
                          fontSize: 14
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        top: 12,
                      ),
                      child: Container(
                        alignment: Alignment.center,
                        width: MediaQuery.of(context).size.width*0.5,
                        height: MediaQuery.of(context).size.height*0.06,
                        decoration: BoxDecoration(
                          color: Color(0xFFE8EEF1),
                          borderRadius: BorderRadius.circular(3.0),
                        ),
                        child: TextField(
                          controller: tradePair,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            //输入框修饰
                            contentPadding: EdgeInsets.only(left: 5.0,bottom: 5.0),
                            hintText:"请输入交易对",
                            hintStyle: TextStyle(
                              fontSize: 14,
                            ),
                            labelStyle: TextStyle(
                                fontSize: 14,
                                color: Color(0xff111E3E),
                                fontWeight: FontWeight.bold
                            ), //设置提示文字样式
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 15, top: 5, right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "如：查询BTC/USDT，请填写btcusdt",
                      style: TextStyle(
                          color: Color(0xFFBEBFC4),
                          fontSize: 12
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 15, top: 25, right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "时间",
                      style: TextStyle(
                          color: Color(0xFFBEBFC4),
                          fontSize: 14
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        top: 12,
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          GestureDetector(
                            behavior:HitTestBehavior.opaque,
                            onTap: (){
                              _showDataPicker("from");
                            },
                            child: Container(
                              alignment: Alignment.center,
                              width: MediaQuery.of(context).size.width*0.36,
                              height: MediaQuery.of(context).size.height*0.06,
                              decoration: BoxDecoration(
                                color: Color(0xFFE8EEF1),
                                borderRadius: BorderRadius.circular(3.0),
                              ),
                              child: Text(
                                "${showDate(_selectDate1)}",
                                style: TextStyle(
                                    color: Color(0xFF111E3E),
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold
                                ),
                              ),
                            ),
                          ),

                          Container(
                            child: Text(
                              "至",
                              style: TextStyle(
                                  color: Color(0xFFBEBFC4),
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold
                              ),
                            ),
                          ),
                          GestureDetector(
                            onTap: (){
                              _showDataPicker("to");
                            },
                            child: Container(
                              alignment: Alignment.center,
                              width: MediaQuery.of(context).size.width*0.36,
                              height: MediaQuery.of(context).size.height*0.06,
                              decoration: BoxDecoration(
                                color: Color(0xFFE8EEF1),
                                borderRadius: BorderRadius.circular(3.0),
                              ),
                              child: Text(
                                "${showDate(_selectDate2)}",
                                style: TextStyle(
                                    color: Color(0xFF111E3E),
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container(
                height: 50,
                margin: EdgeInsets.only(top: 45,left: 15,right: 15,bottom: 15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: GestureDetector(
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10.0),
                            color: Color(0xFF2EBEF3),
                          ),
                          height: 50,
                          width: MediaQuery.of(context).size.width*0.4,
                          child: Center(
                            child: Text(
                              "重置",
                              style: TextStyle(
                                  fontSize: 16,
                                  color: Colors.white
                              ),
                            ),
                          ),
                        ),
                        onTap: () {
                          setState(() {
                            _reSet();
                          });
                        },
                      ),
                      flex: 1,
                    ),
                    Flexible(
                      child: GestureDetector(
                        child: Container(
                          height: 50,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10.0),
                            color: Color(0xFF2EBEF3),
                          ),
                          width: MediaQuery.of(context).size.width*0.4,
                          child: Center(
                            child: Text(
                              "确认",
                              style: TextStyle(
                                  fontSize: 16,
                                  color: Colors.white
                              ),
                            ),
                          ),
                        ),
                        onTap: () {
                          setState(() {
                            flag=false;
                          });
                        },
                      ),
                      flex: 1,
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
      onTap: () {},
    );
  }
}
qiao若huan喜
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
12-09
相信在实际开发过程当中，肯定少不了这样的功能： 点击 AppBar 右上角的按钮，弹出一个菜单供用户选择。 幸运的是，Flutter 提供给我们了一个 Widget，直接就能实现如上的效果。 PopupMenuButton 还是老规矩，先看官方的说明： Displays a menu when pressed and calls onSelected [1] when the menu is dismissed because an item was selected. The value passed to  onSelected [2] is the value of the sele
Flutter强大的下拉筛选菜单gzx_dropdown_menu
Dream It Possible
08-03 5832
是一个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 Picker：一个高效、灵活的下拉选择组件
最新发布
gitblog_00092的博客
04-14 756
探索 Flutter Picker：一个高效、灵活的下拉选择组件 项目地址:https://gitcode.com/yangyxd/flutter_picker Flutter Picker 是一个专门为 Flutter 平台设计的轻量级选择器库，它提供了弹出式的多列滚动选择界面，可广泛应用于各种需要下拉选择功能的场景，如日期选择、时间选择等。 项目简介 Flutter Picker 提供了一个简...
flutter 顶部弹窗
qq_45634989的博客
03-29 908
在 Appbar设置按钮，点击出现顶部弹窗，并点击空白处弹窗消失。
[flutter] 列表上面的筛选框
u010209637的博客
01-09 2511
[flutter] 列表上面的筛选框 抽空利用一些小知识，整了个筛选的demo，重点布局是 用Stack（特性：内部的组件可重叠）,通过Stack，把筛选框叠在列表的上方，当然了，这里还需要计算坐标，把筛选框叠在正确的位置上。 有个小提示，获取某组件的坐标记得在addPostFrameCallback里面。 //以后的网络请求也应该在这里面处理（当页面build完成的回调） WidgetsBin...
Flutter中GetX系列二--Snackbar基本使用(顶部弹窗)
eastWind1101的博客
11-23 3108
Snackbar使用详情,顶部弹框,类似通知栏消息
Flutter：自定义组件的上下左右弹出层
知足常乐
08-29 1759
目前自定义的组件，可以在目标组件，左、上、右、下，左上、右上，左下、右下八个方向进行精确的弹出，当然了，除此之外，也可以动态的展示到自己想要的位置，并且弹出层效果可以自定义
【Flutter】【弹窗】弹窗的快速上手使用和自定义Dialog
自动人生博客
10-24 6417
给用户提示，让用户做出选择，或者是实现部分内容Dialog 可以完全的自己定义一个弹出框，然后可以自己定义整个弹出框的内容，比如加入图片等等// 使用dialog 来自己真正的定义一个对话框 Widget myDialog() {
Flutter高阶技术：如何实现自定义弹出菜单框
06-03
Flutter高阶技术：如何实现自定义弹出菜单框
Flutter 自定义顶部导航栏（方法二）
01-08
import 'package:flutter/material.dart'; import '../pages/tabs.dart'; import '../pages/AppBarDemo.dart'; import '../pages/TabBarController.dart'; final routes = { '/': (context) => Tabs(), '/...
Flutter 自定义顶部导航栏（方法一）
01-20
import 'package:flutter/material.dart'; import 'routes/Routes.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ...
Flutter Tween实现抖动效果
03-29
抖动效果实现起来并不难，主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等。
Flutter实现左侧边栏导航
04-14
Flutter实现左侧边栏导航,点击左侧菜单右侧自动切换,左侧菜单可以实现自动居中,右侧滚动到底部继续滑可自动切换到下一页,上滑切换到上一页,左侧菜单跟随切换,查看效果图: ...
关于Flutter的下拉选择问题
Leo星星的博客
07-22 4960
根据需求的需要，在页面顶部添加常用的筛选栏，比如地址、时间等 关于时间的选择，我们有一些datepicker可以使用，总体来说，可以满足。 我个人使用了flutter_cupertino_date_picker 但是关于其他的选择，则没有现成的组件来满足。 现在说一下我的做法。 首先分为单选和多选。 单选： dropdownbutton可以、CupertinoPicker也可以、甚至...
【Flutter入门到进阶】Flutter基础篇---弹窗Dialog
Yvan
03-06 5437
通过继承Dialog实现自定义的弹窗所谓toast框其实就是在图层的最上面一层插入一个显示图层，在Flutter中利用OverLayEntry构建图层，然后通过Overlay进行插入。
Flutter简易弹窗
明光的博客
09-08 4664
Flutter利用Route实现简单的自定义弹窗效果。
Flutter 仿抖音、豆瓣、知乎、番茄小说的评论弹窗开发实践
pengbo6665631的博客
07-05 4519
最近用flutter做了一个评论弹窗的功能，本来以为很简单的烂大街的一个功能，结果却遇到了不少的问题，而且这些问题我觉得很有意义，以至于我觉得我如果分享出来可能会对其他人很有帮助。
Flutter弹窗的简单使用
juer2017的博客
12-14 851
Flutter几种弹窗和自定义弹窗的简单用法
flutter 获取手机版本低弹框
06-06
您可以通过以下步骤实现在Flutter中获取手机版本低弹框： 1. 在pubspec.yaml文件中添加flutter_version_check插件的依赖，例如： ```yaml dependencies: flutter_version_check: ^1.0.4 ``` 2. 在需要检查版本的页面中引入flutter_version_check库，例如： ```dart import 'package:flutter_version_check/flutter_version_check.dart'; ``` 3. 在需要检查版本的页面中添加以下代码： ```dart Future<void> checkVersion() async { final version = await FlutterVersionCheck.checkVersion(); if (version == null || version.needsUpdate) { showDialog( context: context, builder: (context) => AlertDialog( title: Text('版本更新'), content: Text('您的应用版本太低，请更新到最新版本'), actions: <Widget>[ FlatButton( onPressed: () => Navigator.pop(context), child: Text('取消'), ), FlatButton( onPressed: () => FlutterVersionCheck.openAppInStore(), child: Text('更新'), ), ], ), ); } } ``` 4. 调用checkVersion()函数检查版本并弹出提示框。 请注意，该库需要您在Google Play Console或App Store Connect中配置应用程序的版本信息。如果您的应用程序不在这些应用商店中，您仍然可以使用该库，但是您需要手动设置应用程序的版本信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值