1、Flutter Widget(IOS Style) - CupertinoApp;

Melrose發表於2019-03-07
FlutteriOSAPP

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

相關文章