1- 底部弹窗组件(showModalBottomSheet)

1. 使用 showModalBottom，带阴影的底部弹窗

image.png

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class CityPage extends StatefulWidget {
  5.   @override
  6.   _CityPageState createState() => _CityPageState();
  7. }
  9. class _CityPageState extends State<CityPage> {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: Text("带阴影的底部弹出框使用"),
  15.         centerTitle: true,
  16.       ),
  17.       body: FlatButton(
  18.         onPressed: () {
  19.           // 带阴影的底部弹窗框
  20.           showModalBottomSheet(
  21.             context: context,
  22.             builder: (BuildContext context) {
  23.               return Container(
  24.                 height: 300,
  25.               );
  26.             },
  27.           );
  28.         },
  29.         child: Text("bottom show modal"),
  30.         color: Colors.red,
  31.       ),
  32.     );
  33.   }
  34. }

2. 添加取消，确定按钮，点按钮可关闭弹窗

image.png

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class CityPage extends StatefulWidget {
  5.   @override
  6.   _CityPageState createState() => _CityPageState();
  7. }
  9. class _CityPageState extends State<CityPage> {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: Text("带阴影的底部弹出框使用"),
  15.         centerTitle: true,
  16.       ),
  17.       body: FlatButton(
  18.         onPressed: () {
  19.           showModalBottomSheet(
  20.             context: context,
  21.             builder: (BuildContext context) {
  22.               return Container(
  23.                 height: 300,
  24.                 child: Column(
  25.                   children: [
  26.                     // 添加取消，确定按钮
  27.                     Row(
  28.                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
  29.                       children: [
  30.                         FlatButton(
  31.                             onPressed: () {
  32.                               // 点击关闭
  33.                               Navigator.of(context).pop();
  34.                             },
  35.                             child: Text("取消")),
  36.                         FlatButton(
  37.                             onPressed: () {
  38.                               // 点击关闭
  39.                               Navigator.of(context).pop();
  40.                             },
  41.                             child: Text("确定")),
  42.                       ],
  43.                     )
  44.                   ],
  45.                 ),
  46.               );
  47.             },
  48.           );
  49.         },
  50.         child: Text("bottom show modal"),
  51.         color: Colors.red,
  52.       ),
  53.     );
  54.   }
  55. }

2- 底部弹窗组件(showBottomSheet)

image.png

1. showBottomSheet 没有黑色蒙层的弹窗

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class CityPage extends StatefulWidget {
  5.   @override
  6.   _CityPageState createState() => _CityPageState();
  7. }
  9. class _CityPageState extends State<CityPage> {
  10.   // 先定义key
  11.   final _key = GlobalKey<ScaffoldState>();
  13.   // 打开底部弹窗
  14.   _openBottomSheet() {
  15.     _key.currentState.showBottomSheet(
  16.       (context) => Container(
  17.         height: 300,
  18.         color: Colors.grey,
  19.       ),
  20.     );
  21.   }
  23.   @override
  24.   Widget build(BuildContext context) {
  25.     return Scaffold(
  26.       key: _key,
  27.       appBar: AppBar(
  28.         title: Text("带阴影的底部弹出框使用"),
  29.         centerTitle: true,
  30.       ),
  31.       body: FlatButton(
  32.         onPressed: _openBottomSheet,
  33.         child: Text("bottom show modal"),
  34.         color: Colors.green,
  35.       ),
  36.     );
  37.   }
  38. }

image.png

2.使用 Navigator.of(context).pop() 关闭弹窗

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class CityPage extends StatefulWidget {
  5.   @override
  6.   _CityPageState createState() => _CityPageState();
  7. }
  9. class _CityPageState extends State<CityPage> {
  10. // 定义key
  11.   final _key = GlobalKey<ScaffoldState>();
  13.   // 打开底部弹窗
  14.   _openBottomSheet() {
  15.     _key.currentState.showBottomSheet(
  16.       (context) => Container(
  17.         height: 300,
  18.         color: Colors.grey,
  19.         child: Column(
  20.           children: [
  21.             Row(
  22.               children: [
  23.                 FlatButton(
  24.                   // 关闭底部弹窗
  25.                   onPressed: () {
  26.                     Navigator.of(context).pop();
  27.                   },
  28.                   child: Text("关闭"),
  29.                 )
  30.               ],
  31.             )
  32.           ],
  33.         ),
  34.       ),
  35.     );
  36.   }
  38.   @override
  39.   Widget build(BuildContext context) {
  40.     return Scaffold(
  41.       key: _key,
  42.       appBar: AppBar(
  43.         title: Text("带阴影的底部弹出框使用"),
  44.         centerTitle: true,
  45.       ),
  46.       body: FlatButton(
  47.         onPressed: _openBottomSheet,
  48.         child: Text("bottom show modal"),
  49.         color: Colors.green,
  50.       ),
  51.     );
  52.   }
  53. }

3. ios风格的底部滚动列表

image.png

1. 使用 CupertinoPicker 组件，实现滚动

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class CityPage extends StatefulWidget {
  5.   @override
  6.   _CityPageState createState() => _CityPageState();
  7. }
  9. class _CityPageState extends State<CityPage> {
  10.   // 第一行的左右按钮
  11.   _oneRowButton() {
  12.     return Row(
  13.       mainAxisAlignment: MainAxisAlignment.spaceBetween,
  14.       children: [
  15.         FlatButton(
  16.           onPressed: () {
  17.             Navigator.of(context).pop();
  18.           },
  19.           child: Text("取消"),
  20.         ),
  21.         FlatButton(
  22.           onPressed: () {
  23.             Navigator.of(context).pop();
  24.           },
  25.           child: Text("确定"),
  26.         )
  27.       ],
  28.     );
  29.   }
  31.   // 打开底部弹窗
  32.   _openBottomSheet() {
  33.     showModalBottomSheet(
  34.       context: context,
  35.       builder: (BuildContext context) {
  36.         return Container(
  37.           height: 320,
  38.           child: Column(
  39.             children: [
  40.               _oneRowButton(),
  41.               // 底部的ios风格的滚动列表
  42.               _iosWheelWidget(),
  43.             ],
  44.           ),
  45.         );
  46.       },
  47.     );
  48.   }
  50.   // 滚动选择列表
  51.   _iosWheelWidget() {
  52.     return Expanded(
  53.       child: CupertinoPicker(
  54.         itemExtent: 35,
  55.         onSelectedItemChanged: (int index) {},
  56.         children: [
  57.           Text("1年工作经验"),
  58.           Text("2年工作经验"),
  59.           Text("3年工作经验"),
  60.           Text("4年工作经验"),
  61.           Text("5年工作经验"),
  62.         ],
  63.       ),
  64.     );
  65.   }
  67.   @override
  68.   Widget build(BuildContext context) {
  69.     return Scaffold(
  70.       appBar: AppBar(
  71.         title: Text("带阴影的底部弹出框使用"),
  72.         centerTitle: true,
  73.       ),
  74.       body: FlatButton(
  75.         onPressed: _openBottomSheet,
  76.         child: Text("ios底部滚动列表"),
  77.         color: Colors.green,
  78.       ),
  79.     );
  80.   }
  81. }

2. CupertinoPicker 组件的常用参数配置说明

可选，必选参数名 参数传值说明
itemExtent 每个子项高度
children 子widget组。List
onSelectedItemChanged 滚动选择的回调，每次滚动，都会触发此回调，会将选中的widget的 索引 返回
useMagnifier 是否开启选中项的字体放大功能，默认false
magnification 选中的元素，放大的倍数，在useMagnifier：true 的情况下有效
backgroundColor 给CupertinoPicker容器添加 背景颜色
offAxisFraction 控制选中的widget元素的左右偏移量，默认是0.0。，正数向右偏移，负数向左偏移
scrollController 控制器，通过 FixedExtentScrollController()创建，可以实现默认选中的哪一个

3. 给 CupertinoPicker 设置默认选中的值

  • 默认选中第3个元素

image.png

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class CityPage extends StatefulWidget {
  5.   @override
  6.   _CityPageState createState() => _CityPageState();
  7. }
  9. class _CityPageState extends State<CityPage> {
  10.   // 1. 创建 控制器
  11.   FixedExtentScrollController _controller;
  13.   @override
  14.   initState() {
  15.     super.initState();
  16.     // 控制器实例化， 传入默认选中的索引
  17.     _controller = FixedExtentScrollController(initialItem: 2);
  18.   }
  20.   // 第一行的左右按钮
  21.   _oneRowButton() {
  22.     return Row(
  23.       mainAxisAlignment: MainAxisAlignment.spaceBetween,
  24.       children: [
  25.         FlatButton(
  26.           onPressed: () {
  27.             Navigator.of(context).pop();
  28.           },
  29.           child: Text("取消"),
  30.         ),
  31.         FlatButton(
  32.           onPressed: () {
  33.             Navigator.of(context).pop();
  34.           },
  35.           child: Text("确定"),
  36.         )
  37.       ],
  38.     );
  39.   }
  41.   // 打开底部弹窗
  42.   _openBottomSheet() {
  43.     showModalBottomSheet(
  44.       context: context,
  45.       builder: (BuildContext context) {
  46.         return Container(
  47.           height: 320,
  48.           child: Column(
  49.             children: [
  50.               _oneRowButton(),
  51.               // 底部的ios风格的滚动列表
  52.               _iosWheelWidget(),
  53.             ],
  54.           ),
  55.         );
  56.       },
  57.     );
  58.   }
  60.   // 滚动选择列表
  61.   _iosWheelWidget() {
  62.     return Expanded(
  63.       child: CupertinoPicker(
  64.         itemExtent: 35,
  65.         scrollController: _controller, // 绑定控制器
  66.         onSelectedItemChanged: (int index) {},
  67.         children: [
  68.           Text("1年工作经验"),
  69.           Text("2年工作经验"),
  70.           Text("3年工作经验"),
  71.           Text("4年工作经验"),
  72.           Text("5年工作经验"),
  73.         ],
  74.       ),
  75.     );
  76.   }
  78.   @override
  79.   Widget build(BuildContext context) {
  80.     return Scaffold(
  81.       appBar: AppBar(
  82.         title: Text("带阴影的底部弹出框使用"),
  83.         centerTitle: true,
  84.       ),
  85.       body: FlatButton(
  86.         onPressed: _openBottomSheet,
  87.         child: Text("ios底部滚动列表"),
  88.         color: Colors.green,
  89.       ),
  90.     );
  91.   }
  92. }