還記得第一個(gè)看到的Flutter組件嗎？-創(chuàng)新互聯(lián)

注意：無特殊說明，F(xiàn)lutter版本及Dart版本如下：

目前創(chuàng)新互聯(lián)建站已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、天山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

MaterialApp

在學(xué)習(xí)Flutter的過程中我們第一個(gè)看見的控件應(yīng)該就是MaterialApp，畢竟創(chuàng)建一個(gè)新的Flutter項(xiàng)目的時(shí)候，項(xiàng)目第一個(gè)組件就是MaterialApp，這是一個(gè)Material風(fēng)格的根控件，基本用法如下：

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('老孟'),
    ),
  ),
)

home參數(shù)是App默認(rèn)顯示的頁面，效果如下：

title參數(shù)是應(yīng)用程序的描述，在Android上，在任務(wù)管理器的應(yīng)用程序快照上面顯示，在IOS上忽略此屬性，IOS上任務(wù)管理器應(yīng)用程序快照上面顯示的是 Info.plist文件中的 CFBundleDisplayName。如果想根據(jù)區(qū)域顯示不同的描述使用 onGenerateTitle，用法如下：

MaterialApp(
  title: '老孟',
  onGenerateTitle: (context) {
    var local = Localizations.localeOf(context);
    if (local.languageCode == 'zh') {
      return '老孟';
    }
    return 'laomeng';
  },
  ...
)

routes、 initialRoute、 onGenerateRoute、 onUnknownRoute是和路由相關(guān)的4個(gè)屬性，路由簡(jiǎn)單的理解就是頁面，路由的管理通常是指頁面的管理，比如跳轉(zhuǎn)、返回等。

MaterialApp按照如下的規(guī)則匹配路由：

1. 路由為 /， home不為null則使用 home。
2. 使用 routes指定的路由。
3. 使用 onGenerateRoute生成的路由，處理除 home和 routes以外的路由。
4. 如果上面都不匹配則調(diào)用 onUnknownRoute。

是不是還是比較迷糊，不要緊，看下面的例子就明白了：

MaterialApp(
  routes: {
    'container': (context) => ContainerDemo(),
    'fitted': (context) => FittedBoxDemo(),
    'icon': (context) => IconDemo(),
  },
  initialRoute: '/',
  home: Scaffold(
    appBar: AppBar(
      title: Text('老孟'),
    ),
  ),
  onGenerateRoute: (RouteSettings routeSettings){
        print('onGenerateRoute:$routeSettings');
        if(routeSettings.name == 'icon'){
          return MaterialPageRoute(builder: (context){
            return IconDemo();
          });
        }
      },
      onUnknownRoute: (RouteSettings routeSettings){
        print('onUnknownRoute:$routeSettings');
        return MaterialPageRoute(builder: (context){
          return IconDemo();
        });
      },
  ...
)

initialRoute設(shè)置為 /，那么加載 home頁面。

如果 initialRoute設(shè)置為 icon，在 routes中存在，所以加載 routes中指定的路由，即IconDemo頁面。

如果 initialRoute設(shè)置為 icons1,此時(shí) routes中并不存在名稱為 icons1的路由，調(diào)用 onGenerateRoute，如果 onGenerateRoute返回路由頁面，則加載此頁面，如果返回的是null，且 home不為null，則加載 home參數(shù)指定的頁面，如果 home為null，則回調(diào) onUnknownRoute。

theme、 darkTheme、 themeMode是關(guān)于主題的參數(shù)，設(shè)置整個(gè)App的主題，包括顏色、字體、形狀等，修改主題顏色為紅色用法如下：

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.red
  ),
  darkTheme: ThemeData(
      primaryColor: Colors.red
  ),
  themeMode: ThemeMode.dark,

效果如下：

locale、 localizationsDelegates、 localeListResolutionCallback、 localeResolutionCallback、 supportedLocales是區(qū)域設(shè)置和國際化相關(guān)的參數(shù)，如果App支持多國語言，那么就需要設(shè)置這些參數(shù)，默認(rèn)情況下，F(xiàn)lutter僅支持美國英語，如果想要添加其他語言支持則需要指定其他MaterialApp屬性，并引入flutter_localizations 包，到2019年4月，flutter_localizations包已經(jīng)支持52種語言，如果你想讓你的應(yīng)用在iOS上順利運(yùn)行，那么你還必須添加“flutter_cupertino_localizations”包。

在 pubspec.yaml文件中添加包依賴：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: ^1.0.1

設(shè)置如下：

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate
  ],
  supportedLocales: [
    const Locale('zh', 'CH'),
    const Locale('en', 'US'),
  ],
  ...
)

• GlobalMaterialLocalizations.delegate ：為Material Components庫提供了本地化的字符串和其他值。
• GlobalWidgetsLocalizations.delegate：定義widget默認(rèn)的文本方向，從左到右或從右到左。
• GlobalCupertinoLocalizations.delegate：為Cupertino（ios風(fēng)格）庫提供了本地化的字符串和其他值。

supportedLocales參數(shù)指定了當(dāng)前App支持的語言。

localeResolutionCallback和 localeListResolutionCallback都是對(duì)語言變化的監(jiān)聽，比如切換系統(tǒng)語言等， localeResolutionCallback和 localeListResolutionCallback的區(qū)別是 localeResolutionCallback返回的第一個(gè)參數(shù)是當(dāng)前語言的Locale，而 localeListResolutionCallback返回當(dāng)前手機(jī)支持的語言集合，在早期的版本手機(jī)沒有支持語言的集合，只顯示當(dāng)前語言，在設(shè)置->語言和地區(qū)的設(shè)置選項(xiàng)效果如下：

在早期是沒有紅色區(qū)域的。

因此我們只需使用 localeListResolutionCallback即可，通過用戶手機(jī)支持的語言和當(dāng)前App支持的語言返回一個(gè)語言選項(xiàng)。

通常情況下，如果用戶的語言正好是App支持的語言，那么直接返回此語言，如果不支持，則返回一個(gè)默認(rèn)的語言，用法如下：

MaterialApp(
  localeListResolutionCallback:
      (List<Locale> locales, Iterable<Locale> supportedLocales) {
    if (locales.contains('zh')) {
      return Locale('zh');
    }
    return Locale('en');
  },
  ...
)

在App中也可以通過如下方法獲取區(qū)域設(shè)置：

Locale myLocale = Localizations.localeOf(context);

還有幾個(gè)方便調(diào)試的選項(xiàng)，debugShowMaterialGrid：打開網(wǎng)格調(diào)試

MaterialApp(
  debugShowMaterialGrid: true,

效果如下：

showPerformanceOverlay：打開性能檢測(cè)

MaterialApp(
  showPerformanceOverlay: true,

效果如下：

右上角有一個(gè)DEBUG的標(biāo)識(shí)，這是系統(tǒng)在debug模式下默認(rèn)顯示的，不顯示的設(shè)置如下：

MaterialApp(
  debugShowCheckedModeBanner: true,
  ...
)

CupertinoApp

我想你一定能想到既然有Material風(fēng)格的MaterialApp，那么也應(yīng)該有Cupertino（ios）風(fēng)格與之相對(duì)應(yīng)，是的Cupertino風(fēng)格的是CupertinoApp，CupertinoApp的屬性及用法和MaterialApp一模一樣，就不在具體介紹了。

歡迎加入Flutter的微信交流群( laomengit)，一起學(xué)習(xí)，一起進(jìn)步，生活不止眼前的茍且，還有詩和《遠(yuǎn)方》。

當(dāng)然我也非常希望您關(guān)注我個(gè)人的公眾號(hào)，里面有各種福利等著大家哦。

網(wǎng)站欄目：還記得第一個(gè)看到的Flutter組件嗎？-創(chuàng)新互聯(lián)
新聞來源：http://muchs.cn/article32/ddogpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、網(wǎng)站改版、品牌網(wǎng)站制作、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)