??在Flutter中設(shè)計風(fēng)格主要為Material Design風(fēng)格,Flutter也支持IOS設(shè)置風(fēng)格Cupertino的一系列Widget,分別對應(yīng)flutter的包下的material目錄下的dart文件和cupertino目錄的dart文件。

Root Widget ;

?? 在material design設(shè)計風(fēng)格下的root widget為MaterialApp,ios 風(fēng)格的root widget為CupertinoApp;

Material Design:

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

---

Cupertino:

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

Scaffold;

?? 為material design小部件創(chuàng)建視覺支架的為Scaffold，為cupertino小部件創(chuàng)建視覺支架的為CupertinoTabScaffold和CupertinoPageScaffold,其中CupertinoTabScaffold可以使用底部的選項卡欄為應(yīng)用程序創(chuàng)建布局，其中CupertinoPageScaffold 為iOS模式頁面的典型內(nèi)容，實現(xiàn)布局、頂部有導(dǎo)航欄。

如下為CupertinoPageScaffold和CupertinoTabScaffold混合使用實現(xiàn)ios風(fēng)格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)?"書籍":"觀看");}));})),);},);});} }///詳細(xì)頁面; 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"),));} } 復(fù)制代碼

可以使用iOS風(fēng)格的圖標(biāo)CupertinoIcons;

??CupertinoPageRoute為Cupertino創(chuàng)建一個頁面路由，以便在iOS設(shè)計的應(yīng)用程序中使用。MaterialPageRoute定義了以material design的方式轉(zhuǎn)換的應(yīng)用頁面。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。