Flutter(三) 自定義組件、MaterialApp和Scaffold的使用

1. 自定義組件

在flutter中自定義組件就是自定義一個類，這個類需要繼承StatelessWidget/StatefulWidget。在flutter里面萬物皆組件。把某個功能或者某個模塊都可以抽離成一個組件。

  • StatelessWidget 是無狀態(tài)組件 狀態(tài)不可變的widget 是個抽象類 需要實現(xiàn)里面的build方法
  • StatefulWidget 是有狀態(tài)組件，持有的狀態(tài)可能在widget生命周期變化
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());

}
class MyApp extends StatelessWidget{
   List<Widget>  _getData(){//生成20條數(shù)據(jù)
    List<Widget> list = List();
    for (var i = 0; i <  20; i++) {
      list.add(
        ListTile(
        title: Text('我是第$i個cell'),
      ));
    }
  return list;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('ListView'),
            ),
            body:ListView(
              scrollDirection:  Axis.horizontal,
              padding: EdgeInsets.all(10),
              children: this._getData(),//顯示數(shù)據(jù)
            ),
          ),
          theme: ThemeData(
            primaryColor: Colors.yellow,
          ),
        );
  }
}

2. MaterialApp和Scaffold組件修飾App

  1. MaterialApp

    • MaterialApp是一個封裝好易于使用的Widget，它封裝了應(yīng)有程序?qū)崿F(xiàn)Material Design所需要的一些Widget或者說是app開發(fā)中常用的符合Material Design設(shè)計理念的入口Widget。一般作為頂層(根組件)Widget使用。
    • MaterialApp的構(gòu)造方法中的參數(shù)都是可以省略的，但是官方文檔也寫出了至少要有home ,routes,onGenerateRoute或者builder中的一個。如果只寫了routes，則必須包含Navigator.defaultRouteName()。

  2. MaterialApp所有屬性

    • title ：在任務(wù)管理窗口中所顯示的應(yīng)用名字 設(shè)備用于為用戶識別應(yīng)用程序的單行描述
    • home 應(yīng)用默認所顯示的界面 Widget
    • theme ：應(yīng)用各種 UI 所使用的主題顏色 應(yīng)用程序小部件使用的顏色。
    • color ： 應(yīng)用的主要顏色值（primary color），也就是安卓任務(wù)管理窗口中所顯示的應(yīng)用顏色 在操作系統(tǒng)界面中應(yīng)用程序使用的主色。
    • routes ： 應(yīng)用的頂級導(dǎo)航表格，這個是多頁面應(yīng)用用來控制頁面跳轉(zhuǎn)的，類似于網(wǎng)頁的網(wǎng)址 應(yīng)用程序的頂級路由表
    • initialRoute ：第一個顯示的路由名字，默認值為 Window.defaultRouteName 如果構(gòu)建了導(dǎo)航器，則顯示的第一個路由的名稱
    • onGenerateRoute ： 生成路由的回調(diào)函數(shù)，當導(dǎo)航的命名路由的時候，會使用這個來生成界面 應(yīng)用程序?qū)Ш降街付酚蓵r使用的路由生成器回調(diào)
    • onLocaleChanged ： 當系統(tǒng)修改語言的時候，會觸發(fā)?這個回調(diào)
    • onUnknownRoute ：當 onGenerateRoute 無法生成路由(initialRoute除外)時調(diào)用
    • navigatorObservers ： 應(yīng)用 Navigator 的監(jiān)聽器
    • debugShowMaterialGrid ： 是否顯示 紙墨設(shè)計 基礎(chǔ)布局網(wǎng)格，用來調(diào)試 UI 的工具
    • showPerformanceOverlay ： 顯示性能標簽，https://flutter.io/debugging/#performanceoverlay
    • checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各種調(diào)試開關(guān)
    • navigatorKey： 在構(gòu)建導(dǎo)航器時使用的鍵。
    • navigatorObservers = const <NavigatorObserver>[]： 為該應(yīng)用程序創(chuàng)建的導(dǎo)航器的觀察者列表
    • builder ： 用于在導(dǎo)航器上面插入小部件，但在由WidgetsApp小部件創(chuàng)建的其他小部件下面插入小部件，或用于完全替換導(dǎo)航器
    • onGenerateTitle ： 如果非空，則調(diào)用此回調(diào)函數(shù)來生成應(yīng)用程序的標題字符串，否則使用標題。
    • locale ： 此應(yīng)用程序本地化小部件的初始區(qū)域設(shè)置基于此值。
    • localizationsDelegates ： 這個應(yīng)用程序本地化小部件的委托。
    • localeListResolutionCallback ：這個回調(diào)負責(zé)在應(yīng)用程序啟動時以及用戶更改設(shè)備的區(qū)域設(shè)置時選擇應(yīng)用程序的區(qū)域設(shè)置。
    • supportedLocales = const <Locale>[Locale('en', 'US')] ： 此應(yīng)用程序已本地化的地區(qū)列表
    • localeResolutionCallback
    • debugShowMaterialGrid = false ：打開繪制基線網(wǎng)格材質(zhì)應(yīng)用程序的網(wǎng)格紙覆蓋
    • showPerformanceOverlay = false ： 打開性能疊加
    • checkerboardRasterCacheImages = false ： 打開柵格緩存圖像的棋盤格
    • checkerboardOffscreenLayers = false ： 打開渲染到屏幕外位圖的圖層的棋盤格
    • showSemanticsDebugger = false ： 打開顯示框架報告的可訪問性信息的覆蓋
    • debugShowCheckedModeBanner = true ： 在選中模式下打開一個小的“DEBUG”橫幅，表示應(yīng)用程序處于選中模式

  3. MaterialApp常用屬性詳細說明

    • title：這個和啟動圖標名字是不一樣的，和當前 Activity 的名字也是不一樣的。 這個 Title 是用來定義任務(wù)管理窗口界面所看到應(yīng)用名字的。在原生 Android 系統(tǒng)中點擊圓圈
    • theme：定義應(yīng)用所使用的主題顏色，在紙墨設(shè)計中定義了 primaryColor、accentColor、hintColor 等顏色值?？梢酝ㄟ^這個來指定一個 ThemeData 定義應(yīng)用中每個控件的顏色。
    • color ： 定義系統(tǒng)中該應(yīng)用的主要顏色
    • home ：這個是一個 Widget 對象，用來定義當前應(yīng)用打開的時候，所顯示的界面。
    • routes： 定義應(yīng)用中頁面跳轉(zhuǎn)規(guī)則。 該對象是一個 Map<String, WidgetBuilder>。當使用 Navigator.pushNamed 來路由的時候，會在 routes 查找路由名字，然后使用 對應(yīng)的 WidgetBuilder 來構(gòu)造一個帶有頁面切換動畫的 MaterialPageRoute。如果應(yīng)用只有一個界面，則不用設(shè)置這個屬性，使用 home 設(shè)置這個界面即可。如果 home 不為 null，當 routes 中包含 Navigator.defaultRouteName（'/'） 的時候會出錯，兩個都是 home 沖突了。如果所查找的路由在 routes 中不存在，則會通過 onGenerateRoute 來查找。指定默認顯示的路由名字，默認值為 Window.defaultRouteName

2. Scaffold

Scaffold是Material Design布局結(jié)構(gòu)的基本實現(xiàn)。此類提供了用于顯示drawer snackbar和底部sheet的API。

  • Scaffold主要屬性
    • appBar - 顯示在界面頂部的一個AppBar
    • body - 當前界面所顯示的主要內(nèi)容widget
    • drawer - 抽屜菜單控件
void main(){
  runApp(MyApp());

}
// 自定義組件
// StatelessWidget 是無狀態(tài)組件 狀態(tài)不可變的widget 是個抽象類 需要實現(xiàn)里面的build方法
// StatefulWidget 是有狀態(tài)組件，持有的狀態(tài)可能在widget生命周期變化
class MyApp extends StatelessWidget{
   List<Widget>  _getData(){

    List<Widget> list = List();
    for (var i = 0; i <  20; i++) {
      list.add(
        ListTile(
        title: Text('我是第$i個cell'),
      ));
    }
  return list;
  }
  final iconUrl = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2334534157,4285826929&fm=26&gp=0.jpg';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
        return MaterialApp(
          theme: ThemeData(//在這可以設(shè)置主題樣式
            //設(shè)置主題顏色
            primaryColor: Colors.yellow,
          ),
          home: Scaffold(
            
            //設(shè)置App頂部的AppBar
            appBar: AppBar(
              //AppBar的標題
              title: Text(
                'Flutter Demo',
                //設(shè)置文本樣式
                style: TextStyle(
                  //設(shè)置文本顏色
                    color: Colors.red
                )
              ),
              //設(shè)置appbar上的圖標顏色
              iconTheme: IconThemeData(color: Colors.white)
            ),
            //頁面顯示的元素
            body: //HBGridView(),
            ListView(
              // scrollDirection:  Axis.horizontal,
              padding: EdgeInsets.all(10),
              children: this._getData(),
            ),
            //頁面底部導(dǎo)航欄
          bottomNavigationBar : CupertinoTabBar(
              items: <BottomNavigationBarItem>[
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                    
                    BottomNavigationBarItem(
                      icon: Image.network(iconUrl),
                      title: Text('data')),
                ]
              ),
            )
          );
  }

}
效果圖
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容