Flutter 系列文章：Flutter MaterialApp 控制元件介紹

sometime-rock發表於2019-08-19
FlutterAPP控制元件

一、控制元件介紹

一個用於材料設計的容器元件，是我們定義子控制元件的一個容器，它的建構函式裡面雖然有多個引數，但是基本上大多數引數都是可以省略的。

二、使用方法

    MaterialApp(
      title: 'TabBar', //用於為使用者識別應用程式的單行描述
      theme: ThemeData(
        //應用各種 UI 所使用的主題顏色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //作業系統介面中用於應用程式的主要顏色,在Android上，這是應用程式切換器中應用程式使用的顏色。
      home: MaterialAppDemo(), //MaterialApp 顯示的主介面
      routes: <String, WidgetBuilder>{
        // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，類似於網頁的網址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一個顯示的路由名字，預設值為 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否顯示 紙墨設計 基礎佈局網格，用來除錯 UI 的工具
//      showPerformanceOverlay:true,//顯示效能標籤，https://flutter.io/debugging/#performanceoverlay
//      showSemanticsDebugger: true,
//      debugShowCheckedModeBanner: true,//效能除錯工具
    )
  
複製程式碼

三、常用屬性

1.設定titile,這個和啟動圖示名字是不一樣的，和當前 Activity 的名字也是不一樣的。 這個 Title 是用來定義任務管理視窗介面所看到應用名字的。在原生 Android 系統中點選圓圈 Home 按鈕右邊的方塊按鈕就會開啟多工切換視窗。

  title: 'MaterialApp',//用於為使用者識別應用程式的單行描述
複製程式碼

2.定義應用所使用的主題顏色，在材料設計中定義了 primaryColor、accentColor、hintColor 等顏色值。可以通過這個來指定一個 ThemeData 定義應用中每個控制元件的顏色。

  theme: ThemeData(
    //應用各種 UI 所使用的主題顏色
    primarySwatch: Colors.red,
  ),

複製程式碼

3、定義主介面的顯示控制元件，這個是一個 Widget 物件，用來定義當前應用開啟的時候，所顯示的介面。

 home: MaterialAppDemo(), //MaterialApp 顯示的主介面
 
 class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
    );
  }
}

複製程式碼

4、定義頁面跳轉的路由規則，定義應用中頁面跳轉規則。 該物件是一個 Map<String, WidgetBuilder>。 當使用 Navigator.pushNamed 來路由的時候，會在 routes 查詢路由名字，然後使用 對應的 WidgetBuilder 來構造一個帶有頁面切換動畫的 MaterialPageRoute。如果應用只有一個介面，則不用設定這個屬性，使用 home 設定這個介面即可。

  routes: <String, WidgetBuilder>{
    // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，類似於網頁的網址
    "/MaterialApp": (BuildContext context) => TabBarView(),
  },

複製程式碼

5、一系列除錯工具

    debugShowMaterialGrid: false, //是否顯示 材料設計 基礎佈局網格，用來除錯 UI 的工具

複製程式碼
  showPerformanceOverlay:
      true, // 顯示效能標籤，https://flutter.io/debugging/#performanceoverlay
  showSemanticsDebugger: true,
  debugShowCheckedModeBanner: true,//效能除錯工具

複製程式碼

四、一個完整的例子

Flutter 系列文章：Flutter MaterialApp 控制元件介紹


import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'MaterialApp', //用於為使用者識別應用程式的單行描述
      theme: ThemeData(
        //應用各種 UI 所使用的主題顏色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //作業系統介面中用於應用程式的主要顏色,在Android上，這是應用程式切換器中應用程式使用的顏色。
      home: MaterialAppDemo(), //MaterialApp 顯示的主介面
      routes: <String, WidgetBuilder>{
        // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，類似於網頁的網址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一個顯示的路由名字，預設值為 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否顯示 材料設計 基礎佈局網格，用來除錯 UI 的工具
//      showPerformanceOverlay:
//          true, // 顯示效能標籤，https://flutter.io/debugging/#performanceoverlay
//      showSemanticsDebugger: true,
//      debugShowCheckedModeBanner: true,//效能除錯工具
    ));

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
    );
  }
}

複製程式碼

相關文章