仿苹果底部弹窗选择列表

showDialog(barrierDismissible: true,//是否点击空白区域关闭对话框,默认为true，可以关闭context: context,builder: (BuildContext context) {var list = List();list.add('拍摄照片');list.add('从相册选取');list.add('选择文件');return FHBottomSheet(list: list,onItemClickListener: (index) async {print(index);Navigator.pop(context);},);});
//                              print('点击跳转事件');
//                              List<File> files = await FilePicker.getMultiFile();
//                              print(files);},import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:te_guide/app/common/FHAdapt.dart';
import 'package:te_guide/app/common/FHColors.dart';/// 底部弹出框
class FHBottomSheet extends StatefulWidget {FHBottomSheet({Key key, this.list, this.onItemClickListener}): assert(list != null),super(key: key);final list;final OnItemClickListener onItemClickListener;@override_FHBottomSheetState createState() => _FHBottomSheetState();
}typedef OnItemClickListener = void Function(int index);class _FHBottomSheetState extends State<FHBottomSheet> {OnItemClickListener onItemClickListener;var itemCount;double itemHeight = 44.0;var borderColor = Colors.white;double circular = 10.0;@overridevoid initState() {super.initState();onItemClickListener = widget.onItemClickListener;}@overrideWidget build(BuildContext context) {Orientation orientation = MediaQuery.of(context).orientation;Size screenSize = MediaQuery.of(context).size;var deviceWidth = orientation == Orientation.portrait? screenSize.width: screenSize.height;/// *2-1是为了加分割线，最后还有一个cancel，所以加1itemCount = (widget.list.length) + 1;print(itemCount);var height = ((widget.list.length + 1) * 48).toDouble();var cancelContainer = Container(height: itemHeight,margin: EdgeInsets.only(left: 10.0, right: 10.0),decoration: BoxDecoration(color: Colors.white, // 底色borderRadius: BorderRadius.circular(circular),),child: Center(child: GestureDetector(onTap: () {Navigator.pop(context);},child: Text("取消",style: TextStyle(fontWeight: FontWeight.w400,decoration: TextDecoration.none,color: FHColors.btnColorBlue,fontSize: FHAdapt.px(32),),),),));var listview = ListView.builder(itemCount: itemCount,itemBuilder: (BuildContext context, int index) {if (index == itemCount - 1) {return new Container(child: cancelContainer,margin: const EdgeInsets.only(top: 10),);}return getItemContainer(context, index);});var totalContainer = Container(child: listview,height: height,width: deviceWidth * 0.98,);var stack = Stack(alignment: Alignment.center,children: <Widget>[Positioned(bottom: 0,child: totalContainer,),],);return stack;}Widget getItemContainer(BuildContext context, int index) {if (widget.list == null) {return Container();}var borderRadius;var margin;var border;var borderAll = Border.all(color: borderColor, width: 0.5);var borderSide = BorderSide(color: borderColor, width: 0.5);var isFirst = false;var isLast = false;/// 只有一个元素if (widget.list.length == 1) {borderRadius = BorderRadius.circular(circular);margin = EdgeInsets.only(bottom: 10, left: 10, right: 10);border = borderAll;} else if (widget.list.length > 1) {/// 第一个元素if (index == 0) {isFirst = true;borderRadius = BorderRadius.only(topLeft: Radius.circular(circular),topRight: Radius.circular(circular));margin = EdgeInsets.only(left: 10,right: 10,);border = Border(top: borderSide, left: borderSide, right: borderSide);} else if (index == itemCount - 2) {isLast = true;/// 最后一个元素borderRadius = BorderRadius.only(bottomLeft: Radius.circular(circular),bottomRight: Radius.circular(circular));margin = EdgeInsets.only(left: 10, right: 10);border =Border(bottom: borderSide, left: borderSide, right: borderSide);} else {/// 其他位置元素margin = EdgeInsets.only(left: 10, right: 10);border = Border(left: borderSide, right: borderSide);}}var isFirstOrLast = isFirst || isLast;int listIndex = index ~/ 2;var text = widget.list[index];var contentText = Text(text,style: TextStyle(fontWeight: FontWeight.w400,decoration: TextDecoration.none,color: FHColors.btnColorBlue,fontSize: FHAdapt.px(32),),);var center;if (!isFirstOrLast) {center = Center(child: contentText,);}var itemContainer = Container(height: itemHeight,margin: margin,decoration: BoxDecoration(color: Colors.white, // 底色borderRadius: borderRadius,border: Border.all(width: 0.5, color: FHColors.backColorDivider),),child: center);var onTap2 = () {if (onItemClickListener != null) {onItemClickListener(index);}};var stack = Stack(alignment: Alignment.center,children: <Widget>[itemContainer, contentText],);var getsture = GestureDetector(onTap: onTap2,child: isFirstOrLast ? stack : itemContainer,);return getsture;}
}

仿苹果底部弹窗选择列表相关推荐

android 苹果电脑底部图标滚动效果,JS实现仿苹果底部任务栏菜单效果代码
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动 ...
android仿支付宝弹窗,实现支付宝支付从底部弹窗效果
前言我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能效果图实现主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 pac ...
仿抖音短视频APP源码，底部弹窗对话框
仿抖音短视频APP源码,底部弹窗对话框的相关代码核心代码 final Dialog dialog = new Dialog(this, R.style.BottomDialogStyle); Vie ...
ios 仿苹果闹钟_苹果片状iOS闹钟的三种选择
ios 仿苹果闹钟 If two iPhone alarm failures in less than three months (the Daylight Savings bug and the N ...
来自法国的山寨苹果系统——梨子系统PearOS，精美仿苹果风格的免费Linux操作系统(颇有iOS和OSX的神...
我们都知道苹果 OS X 和 iOS 操作系统的设计都非常讨好人,但基本上只能购买 MacBook 或 iPhone.iPad 等设备才能体验它们.不过,今天被我发现了一款可以在PC上安装的精美仿苹果 ...
仿ios相机apk_仿苹果相机下载
极相机火爆来袭,快来18183下载吧! 极相机性能极佳, 反应奇快,拍摄照片和录制视频的速度比系统相机还快.极相机支持实时滤镜,可以在捕捉美景前预览照片.还支持手势操作,左右滑动即可快速在视频和拍照之 ...
php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
【Android 仿微信通讯录导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52355199 本文 ...
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...
苹果x处理器多少_精仿苹果iPhone XR手机配置介绍
精仿苹果iPhone XR手机配置介绍 [上市时间]2018年10月 [手机类型]智能手机安卓手机 4G [适用频率]850/900/1800/1900MHz [网络制式]GSM WCDMA [处 ...

仿苹果底部弹窗选择列表

仿苹果底部弹窗选择列表相关推荐

最新文章

热门文章

仿苹果 底部弹窗 选择列表

仿苹果 底部弹窗 选择列表相关推荐

最新文章

热门文章

仿苹果底部弹窗选择列表

仿苹果底部弹窗选择列表相关推荐