Flutter制作iOS系统的Cupertino的弹出框特效

已收录   阅读次数: 1,048
2021-07-1206:00:57 发表评论
摘要

flutter中有一个名为Cupertino的官方支撑库,这个各种效果几乎和iOS系统毫无二致,有想要制作这种类型应用或者网站的开发者绝对不容错过,高端大气上档次啊,这次演示一个下方弹出效果……

分享至:
Flutter制作iOS系统的Cupertino的弹出框特效

开篇寄语

flutter中有一个名为Cupertino的官方支撑库,这个各种效果几乎和iOS系统毫无二致,有想要制作这种类型应用或者网站的开发者绝对不容错过,高端大气上档次啊,这次演示一个下方弹出效果。

前情提要

开篇寄语

以下内容大多是更改lib下的main.dart文件内容,删掉里面的内容,复制粘贴代码,开启调试就可以出现了。

试举例如下:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  void _show(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => CupertinoActionSheet(
              actions: [
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #1')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #2')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #3')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #4')),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => _close(ctx),
                child: const Text('Close'),
              ),
            ));
  }

  void _close(BuildContext ctx) {
    Navigator.of(ctx).pop();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: Center(
      child: CupertinoButton(
        child: const Text('Open Action Sheet'),
        onPressed: () => _show(context),
      ),
    ));
  }
}

生成效果如下图所示:

  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: