一、Flutter Widget(IOS Style) - CupertinoApp;

  在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的方式轉換的應用頁面。