本头条核心宗旨

欢迎来到技术刚刚好头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本篇文章中心思想

做Flutter开发有些时间了，项目也开发了几个，但是让我来写文章确实挺难到，每天都来一篇文章还挺难到，今天我就给大家分享一个点击从底部弹出到一个选择菜单吧，希望大家希望。时间过到还挺快到，今天又是星期三了，我们重庆已经到了很冷到时候了，心里能感受到一阵阵到凉风铺面而来，每天上班起床天都不是很亮，下班也是天黑黑到了。

本文到DEMO样式如下：

来看看HOME到代码吧

import 'package:flutter/material.dart';
import 'package:capertino_model/HomePage.dart';

//程序启动页面
void main(){
 //启动方法
 runApp(new MaterialApp(
 home: new Home(),//具体到页面
 ));
}

具体到Home页面代码

//导入包
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//继承了StatefulWidget到框架
class Home extends StatefulWidget {
 @override
 _HomeState createState() => new _HomeState();
}

_HomeState()具体的实现类

//实现了state方法
class _HomeState extends State<Home> {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(

 appBar: new AppBar(
 //标题
 title: new Text("Capertino Widget"),
 backgroundColor: Colors.indigo,
 ),

 //具体到内容
 body: new Container(
 //Container是一个组合类容器，它本身不对应具体的RenderObject，
 //它是DecoratedBox、ConstrainedBox、Transform、Padding、Align
 //等组件组合的一个多功能容器
 child: Container(
 margin: EdgeInsets.only(bottom: 10.0),
 child: Align(
 alignment: Alignment.bottomCenter,
 child: new CupertinoButton(
 child: new Text("Click here"),
 onPressed: (){
 shoCuportionDialog(context);
 },
 color: Colors.redAccent,

 ),
 ),
 ),
 ),

 );
 }

shoCuportionDialog的具体实现

shoCuportionDialog(BuildContext context){

 showCupertinoModalPopup(
 context: context,
 builder: (context){

 return CupertinoActionSheet(
 title: new Text("First time learning"),
 message: new Text("Cupertion learning things"),
 cancelButton: new CupertinoActionSheetAction(
 onPressed: (){
 Navigator.of(context).pop();
 },
 child: new Text("Cancel")
 ),
 actions: <Widget>[
 new CupertinoActionSheetAction(
 onPressed: (){},
 child: new Text("First Page",
 style: TextStyle(fontSize: 22.0,color: Colors.orange),
 ),
 ),
 new CupertinoActionSheetAction(
 onPressed: (){}, 
 child: new Text("Second Page")
 ),
 new CupertinoActionSheetAction(
 onPressed: (){},
 child: new Text("Third Page",
 style: TextStyle(fontSize: 22.0,color: Colors.green),
 )
 ),
 new CupertinoActionSheetAction(
 onPressed: (){},
 child: new Text("Fourth Page",
 style: TextStyle(fontSize: 22.0,color: Colors.purple),
 )
 ),
 new CupertinoActionSheetAction(
 onPressed: (){},
 child: new Text("Fith Page",
 style: TextStyle(fontSize: 22.0,color: Colors.purple),
 )
 )
 ],
 );

 }
 );

 }
 
}

pubspec.yaml 文件就是正常到一个文件，没有别到第三方配置

name: capertino_model
description: A new Flutter application.

version: 1.0.0+1

environment:
 sdk: ">=2.1.0 <3.0.0"

dependencies:
 flutter:
 sdk: flutter

 cupertino_icons: ^0.1.2

dev_dependencies:
 flutter_test:
 sdk: flutter

flutter:

总结

今天就跟粉友们写这么多了，iOS样式的操作表。操作表是一种特定的警报样式，可向用户显示与当前上下文相关的两个或多个选项。操作表可以具有标题，附加消息和操作列表。标题显示在消息上方，操作显示在该内容下方。该操作表将其标题和消息设置样式，以匹配标准的iOS操作表标题和消息文本样式。要显示类似于标准iOS操作表按钮的操作按钮，请为这些操作表提供的操作提供CupertinoActionSheetAction。要包括与其他按钮分开的iOS风格的取消按钮，请为为此操作表提供的cancelButton提供CupertinoActionSheetAction。操作表通常作为子窗口小部件传递给 showCupertinoModalPopup，后者通过从屏幕底部向上滑动操作表来显示该操作表。

谢谢观看技术刚刚好头条文章，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。