IOS 风格的控件，官网文档地址
https://flutterchina.club/widgets/cupertino/
CupertinoActivityIndicator
CupertinoActivityIndicator(
animating: true,
radius: 10.0,
)
CupertinoAlertDialog
class _MyHomePageState extends State<MyHomePage> {
void _showIOSDialog(BuildContext cxt) {
showCupertinoDialog<int>(
context: cxt,
builder: (cxt) {
return new CupertinoAlertDialog(
title: Text('提示'),
content: Text('是否退出应用'),
actions: <Widget>[
new Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Color(0xFFD9D9D9), width: 0.5),
top: BorderSide(color: Color(0xFFD9D9D9), width: 0.5))),
child: CupertinoDialogAction(
child: new Text("确定"),
onPressed: () {
Navigator.pop(context);
},
),
),
new Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Color(0xFFD9D9D9), width: 0.5))),
child: CupertinoDialogAction(
child: new Text("取消"),
onPressed: () {
Navigator.pop(context);
},
),
)
],
);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: const Text('首页')),
body: new Container(
alignment: Alignment.center,
child: RaisedButton(
onPressed: () => {_showIOSDialog(context)},
child: Text('点我弹框'),
),
));
}
}
CupertinoButton
CupertinoButton(
//按钮控件布局
child: Text('IOS风格按钮'),
//内边距
padding:EdgeInsets.all(10.0),
//背景颜色
color:Colors.blue,
//onPress 为 null，禁用点击的背景颜色
disabledColor:Colors.grey,
//最小尺寸
minSize : 44.0,
//按下的透明度
pressedOpacity : 0.1,
//边框圆角
borderRadius : const BorderRadius.all(Radius.circular(8.0)),
//点击事件
onPressed:()=>{
print('点我干嘛')
}
)
CupertinoDialog
过时了，用 CupertinoAlertDialog
CupertinoDialogAction
通常用于CupertinoAlertDialog的一个button
CupertinoDialogAction(
child: new Text("确定"),
//是否为默认按钮
isDefaultAction: true,
//是否为取消操作按钮
isDestructiveAction: true,
onPressed: () {
Navigator.pop(context);
},
)
CupertinoSlider
CupertinoSlider(
//当前进度值
value:_progress,
//进度条监听事件
onChanged:(progress) => {
_progress = progress,
print("_progress$_progress"),
setState((){
})
},
//进度条开始监听
onChangeStart:(progress) => {
print("onChangeStart$progress"),
},
//进度条结束监听
onChangeEnd:(progress) => {
print("onChangeEnd$progress"),
},
//进度条最小值
min : 0.0,
//进度条最大值
max : 100.0,
//进度条分成多少分
divisions:1,
//进度条颜色
activeColor:Colors.blue,
)
CupertinoSwitch
CupertinoSwitch(
value: _isOpen,
onChanged: (isOpen) => {
_isOpen = isOpen,
setState((){
})
},
//开关颜色
activeColor: Colors.blue,
)
CupertinoPageRoute
onPressed: (){
Navigator.push(context, new CupertinoPageRoute(
builder: (context) => Details(),
));
},
CupertinoNavigationBar
iOS风格的导航栏. 通常和CupertinoPageScaffold一起使用。
new CupertinoNavigationBar(
//左边Widget（一般为返回按钮）
leading: const Icon(Icons.arrow_back_ios),
//如果为true并且middle为空的时候并且当前路由是CupertinoPageRoute，则自动用[Text]小部件填充，文本当前路由的“title”。
automaticallyImplyMiddle: true,
//上一页按钮
previousPageTitle: '上一页',
backgroundColor: Colors.blue,
middle: const Text(
'标题',
style: TextStyle(color: Colors.white),
),
//右边Widget
trailing: const Text(
'trailing',
style: TextStyle(color: Colors.white),
),
//边框
border: Border.all(color: Color(0xFFD9D9D9), width: 1.0),
//图标颜色
actionsForegroundColor: Colors.white,
//内边距
padding: EdgeInsetsDirectional.zero,
//是否在导航栏之间切换。
transitionBetweenRoutes: true,
)
CupertinoPageScaffold
一个iOS风格的页面的基本布局结构。包含内容和导航栏,和 CupertinoNavigationBar 一起使用。
new CupertinoPageScaffold(
navigationBar: new CupertinoNavigationBar(
middle: const Text(
'标题',
style: TextStyle(color: Colors.black),
),
),
child: new Container(
alignment: Alignment.center,
child: RaisedButton(
child: Text('跳转下一个页面'),
onPressed: () {
Navigator.push(
context,
new CupertinoPageRoute(
builder: (context) => Details(),
));
},
),
))
CupertinoTabScaffold 和 CupertinoTabBar
标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上
CupertinoTabBar 是 iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。
new CupertinoTabScaffold(
tabBar: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.hourglass_full),
title:Text('首页',
style: TextStyle(color: Colors.black))
),
new BottomNavigationBarItem(
icon: Icon(Icons.fiber_manual_record),
activeIcon: Icon(Icons.fiber_manual_record),
title:Text('社区',
style: TextStyle(color: Colors.black))
),
new BottomNavigationBarItem(
icon: Icon(Icons.add_shopping_cart),
activeIcon: Icon(Icons.add_shopping_cart),
title:Text('发现',
style: TextStyle(color: Colors.black))
),
new BottomNavigationBarItem(
icon: Icon(Icons.my_location),
activeIcon: Icon(Icons.my_location),
title:Text('我的',
style: TextStyle(color: Colors.black))
),
],
),
tabBuilder: (context,index) => new Container(
alignment: Alignment.center,
child: RaisedButton(
child: Text('跳转下一个页面$index'),
onPressed: () {
Navigator.push(
context,
new CupertinoPageRoute(
builder: (context) => Details(),
));
},
),
))
CupertinoTabView
支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用
tabBuilder: (context, index) => new CupertinoTabView(
//返回按钮描述文本
defaultTitle: '返回',
//注册跳转的路径和页面
routes: {
'/home': (context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('我是标题'),
),
child: Center(
child: Text('我是第二页'),
),
);
},
},
builder: (context) => new Container(
alignment: Alignment.center,
child: RaisedButton(
child: Text('跳转下一个页面$index'),
onPressed: () {
Navigator.of(context).pushNamed('/home');
},
),
),
)
最后效果图为
image.png
