文章目录

  • 前言
  • 一、bottomSheet是什么？
  • 二、使用步骤
  • 1.showBottomSheet
  • 2.showModalBottomSheet
  • 3.给弹出的过程和返回的过程添加一个动画效果
  • 4.showCupertinoModalPopup
  • 总结


flutter ios弹窗获取位置信息 flutter底部弹窗_ide

前言

一、bottomSheet是什么？

从底部弹出的提示框，或者是选择，显示框的功能。

二、使用步骤

1.showBottomSheet

代码如下（示例）：
如果你在Scaffold 设置里面bottomSheet，那你在使用showBottomSheet就会出现异常，
可以通过开业scaffold 添加一个key，从key来获取到state 从而调用showbottomnsheet

final scaffoldkey = GlobalKey<ScaffoldState>();

Scaffold(
      key: scaffoldkey,
      ...
ElevatedButton(
                onPressed: () {
                  // 默认是弹出50%的
                  scaffoldkey.currentState!
                      .showBottomSheet((BuildContext context) {
                    return Container(
                      height: 250,
                      color: Colors.blueAccent,
                      child: Column(
                        children:const [
                          ListTile(
                            leading: Icon(Icons.camera),
                            title: Text('相机'),
                          ),
                          ListTile(
                            leading: Icon(Icons.video_call),
                            title: Text('视频'),
                          ),
                          ListTile(
                            leading: Icon(Icons.call),
                            title: Text('电话'),
                          ),
                        ],
                      ),
                    );
                  });
                },
                child: const Text('showBottomSheet')),

flutter ios弹窗获取位置信息 flutter底部弹窗_ide_02

2.showModalBottomSheet

showBottomSheet 使用起来可能比较麻烦一点点，那么showModalBottomSheet的就可以替代他来快速的使用

ElevatedButton(
                onPressed: () {
                  // 默认是弹出50%的
                  showModalBottomSheet(
                    isDismissible: true, //点击空白处返回功能，默认是true
                    enableDrag: true, //是否允许拖动
                    elevation: 10,
                    barrierColor: Colors.grey.withOpacity(0.5), //空白处的颜色
                    backgroundColor: Colors.blueAccent, //背景颜色
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30)), //圆角
                    context: context,
                    builder: (context) {
                      return SingleChildScrollView(
                        child: Column(
                          children: List.generate(
                              10,
                              (index) => ListTile(
                                    title: Text('index=>$index'),
                                  )),
                        ),
                      );
                    },
                  );
                },
                child: const Text('showModalBottomSheet'))

flutter ios弹窗获取位置信息 flutter底部弹窗_flutter_03

3.给弹出的过程和返回的过程添加一个动画效果

代码如下（示例）：

late AnimationController _animationController;
  late Animation _animation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController = BottomSheet.createAnimationController(this);
    _animationController.duration = const Duration(seconds: 1); //弹出时长
    _animationController.reverseDuration =
        const Duration(milliseconds: 500); //收回的时长
    // _animation = Tween(begin: 0.0, end: 300.0).animate(_animationController);
    _animation = CurvedAnimation(
        parent: _animationController, curve: Curves.easeInOutCubicEmphasized);
  }
ElevatedButton(
       onPressed: () {
         // 默认是弹出50%的
         showModalBottomSheet(
           transitionAnimationController: _animationController,
           isScrollControlled:
               true, //如果builder 里面有可滚动的列表，就会全屏显示内容，如果内容不能占满全屏，那也会全屏显示
           isDismissible: true, //点击空白处返回功能，默认是true
           enableDrag: true, //是否允许拖动
           elevation: 10,
           barrierColor: Colors.grey.withOpacity(0.5), //空白处的颜色
           backgroundColor: Colors.blueAccent, //背景颜色
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(30)), //圆角
           context: context,
           builder: (context) {
             return SingleChildScrollView(
               child: Column(
                 children: List.generate(
                     10,
                     (index) => ListTile(
                           title: Text('index=>$index'),
                         )),
               ),
             );
           },
         );
       },
       child: const Text('showModalBottomSheet'))

4.showCupertinoModalPopup

ElevatedButton(
                onPressed: () {
                  //ios 风格的底部弹出框
                  showCupertinoModalPopup(
                      context: context,
                      semanticsDismissible: false, //是否把屏障加入到屏障树里面？？？
                      filter: ImageFilter.blur(
                          sigmaX: 2.0, sigmaY: 3.0), //对空白处的颜色进行模糊处理，毛玻璃的效果
                      barrierColor: Colors.grey.withOpacity(0.5), //空白处的颜色
                      builder: (BuildContext context) {
                        return CupertinoActionSheet(
                          title: const Text('提示'),
                          message: const Text('是否要删除当前项？'),
                          actions: <Widget>[
                            CupertinoActionSheetAction(
                              onPressed: () {
                                Navigator.of(context).pop(true);
                              },
                              isDestructiveAction: true, //红色，危险操作的提示功能

                              child: const Text('删除'),
                            ),
                            CupertinoActionSheetAction(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              isDefaultAction: true, //默认选项
                              child: const Text('取消'),
                            ),
                          ],
                        );
                      });
                },
                child: const Text('showCupertinoModalPopup'))

flutter ios弹窗获取位置信息 flutter底部弹窗_ide_04

该处使用的url网络请求的数据。

总结

合理的设计和运用弹出来确认相关的选择

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  final scaffoldkey = GlobalKey<ScaffoldState>();
  late AnimationController _animationController;
  late Animation _animation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController = BottomSheet.createAnimationController(this);
    _animationController.duration = const Duration(seconds: 1); //弹出时长
    _animationController.reverseDuration =
        const Duration(milliseconds: 500); //收回的时长
    // _animation = Tween(begin: 0.0, end: 300.0).animate(_animationController);
    _animation = CurvedAnimation(
        parent: _animationController, curve: Curves.easeInOutCubicEmphasized);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldkey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
                onPressed: () {
                  // 默认是弹出50%的
                  scaffoldkey.currentState!
                      .showBottomSheet((BuildContext context) {
                    return Container(
                      height: 250,
                      color: Colors.blueAccent,
                      child: Column(
                        children: const [
                          ListTile(
                            leading: Icon(Icons.camera),
                            title: Text('相机'),
                          ),
                          ListTile(
                            leading: Icon(Icons.video_call),
                            title: Text('视频'),
                          ),
                          ListTile(
                            leading: Icon(Icons.call),
                            title: Text('电话'),
                          ),
                        ],
                      ),
                    );
                  });
                },
                child: const Text('showBottomSheet')),
            ElevatedButton(
                onPressed: () {
                  // 默认是弹出50%的
                  showModalBottomSheet(
                    transitionAnimationController: _animationController,
                    isScrollControlled:
                        true, //如果builder 里面有可滚动的列表，就会全屏显示内容，如果内容不能占满全屏，那也会全屏显示
                    isDismissible: true, //点击空白处返回功能，默认是true
                    enableDrag: true, //是否允许拖动
                    elevation: 10,
                    barrierColor: Colors.grey.withOpacity(0.5), //空白处的颜色
                    backgroundColor: Colors.blueAccent, //背景颜色
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30)), //圆角
                    context: context,
                    builder: (context) {
                      return SingleChildScrollView(
                        child: Column(
                          children: List.generate(
                              10,
                              (index) => ListTile(
                                    title: Text('index=>$index'),
                                  )),
                        ),
                      );
                    },
                  );
                },
                child: const Text('showModalBottomSheet')),
            ElevatedButton(
                onPressed: () {
                  //ios 风格的底部弹出框
                  showCupertinoModalPopup(
                      context: context,
                      semanticsDismissible: false, //是否把屏障加入到屏障树里面？？？
                      filter: ImageFilter.blur(
                          sigmaX: 2.0, sigmaY: 3.0), //对空白处的颜色进行模糊处理，毛玻璃的效果
                      barrierColor: Colors.grey.withOpacity(0.5), //空白处的颜色
                      builder: (BuildContext context) {
                        return CupertinoActionSheet(
                          title: const Text('提示'),
                          message: const Text('是否要删除当前项？'),
                          actions: <Widget>[
                            CupertinoActionSheetAction(
                              onPressed: () {
                                Navigator.of(context).pop(true);
                              },
                              isDestructiveAction: true, //红色，危险操作的提示功能

                              child: const Text('删除'),
                            ),
                            CupertinoActionSheetAction(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              isDefaultAction: true, //默认选项
                              child: const Text('取消'),
                            ),
                          ],
                        );
                      });
                },
                child: const Text('showCupertinoModalPopup')),
          ],
        ),
      ),
// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}