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;
@override
void initState() {
super.initState();
onItemClickListener = widget.onItemClickListener;
}
@override
Widget 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,所以加1
itemCount = (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;
}
}
仿苹果 底部弹窗 选择列表
于 2019-11-27 11:15:03 首次发布