文章目录[x]
- 1:Root Widget
- 2:Scaffold
在Flutter中设计风格主要为Material Design风格,Flutter也支持IOS设置风格Cupertino的一系列Widget,分别对应flutter的包下的material目录下的dart文件和cupertino目录的dart文件。
Root Widget
在material design设计风格下的root widget为MaterialApp,ios 风格的root widget为CupertinoApp;
Material Design:
void main()=>runApp(MyMaterialApp());
class MyMaterialApp extends StatelessWidget{
@override
Widget build(BuildContext context) => MaterialApp(
home: HomeScreen(),
);
}Cupertino:
void main()=>runApp(MyAppCupertino());
class MyAppCupertino extends StatelessWidget{
@override
Widget build(BuildContext context) => CupertinoApp(
home: HomeScreen(),
);
}Scaffold
为material design小部件创建视觉支架的为Scaffold，为cupertino小部件创建视觉支架的为CupertinoTabScaffold和CupertinoPageScaffold,其中CupertinoTabScaffold可以使用底部的选项卡栏为应用程序创建布局，其中CupertinoPageScaffold 为iOS模式页面的典型内容，实现布局、顶部有导航栏。
如下为CupertinoPageScaffold和CupertinoTabScaffold混合使用实现ios风格UI的部分代码:
class HomeScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(items: [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.book_solid),
title: Text('书籍')
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.eye_solid),
title: Text('观看')
)
]),
tabBuilder: (context,position){
return CupertinoTabView(
builder: (context){
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: (position==0)?Text("书籍"):Text("观看"),
),
child: Center(
child: CupertinoButton(child:
Text("this is tab :$position",
), onPressed: (){
Navigator.of(context).push(CupertinoPageRoute(builder: (context){
return DetailScreen((position==0)?"书籍":"观看");
})
);
})
),
);
},
);
});
}
}
///详细页面;
class DetailScreen extends StatelessWidget{
final String title;
DetailScreen(this.title);
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(middle: Text("Details"),),
child: Center(
child: Text("欢迎来到 :$title"),
));
}
}可以使用iOS风格的图标CupertinoIcons;
CupertinoPageRoute为Cupertino创建一个页面路由，以便在iOS设计的应用程序中使用。MaterialPageRoute定义了以material design的方式转换的应用页面。