??在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{@overrideWidget build(BuildContext context) => MaterialApp(home: HomeScreen(),); } 復制代碼

---

Cupertino:

void main()=>runApp(MyAppCupertino());class MyAppCupertino extends StatelessWidget{@overrideWidget build(BuildContext context) => CupertinoApp(home: HomeScreen(),); } 復制代碼

Scaffold;

?? 為material design小部件創建視覺支架的為Scaffold，為cupertino小部件創建視覺支架的為CupertinoTabScaffold和CupertinoPageScaffold,其中CupertinoTabScaffold可以使用底部的選項卡欄為應用程序創建布局，其中CupertinoPageScaffold 為iOS模式頁面的典型內容，實現布局、頂部有導航欄。

如下為CupertinoPageScaffold和CupertinoTabScaffold混合使用實現ios風格UI的部分代碼:

class HomeScreen extends StatelessWidget{@overrideWidget 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);@overrideWidget build(BuildContext context) {return CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(middle: Text("Details"),),child: Center(child: Text("歡迎來到 :$title"),));} } 復制代碼

可以使用iOS風格的圖標CupertinoIcons;

??CupertinoPageRoute為Cupertino創建一個頁面路由，以便在iOS設計的應用程序中使用。MaterialPageRoute定義了以material design的方式轉換的應用頁面。

總結

以上是生活随笔為你收集整理的1、Flutter Widget(IOS Style) - CupertinoApp;的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。