Flutter 目錄結構介紹、入口、自定義 Widget、MaterialApp 組件、Scaffold 組件

Flutter 目錄結構介紹

 

文件夾	作用
android	android 平台相關代碼
ios	ios 平台相關代碼
lib	flutter 相關代碼，我們主要編寫的代 碼就在這個文件夾
test	用於存放測試代碼
pubspec.yaml	配置文件，一般存放一些第三方庫的依 賴。

 

Flutter 入口文件、入口方法

 

每一個 flutter 項目的 lib 目錄里面都有一個 main.dart 這個文件就是 flutter 的入口文件

main.dart 里面的

 

void main(){ runApp(MyApp());
}
也可以簡寫
void main()=>runApp(MyApp());

其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。 MyApp 是自定義的一個組件

Flutter 把內容單獨抽離成一個組件

 

在 Flutter 中自定義組件其實就是一個類，這個類需要繼承 StatelessWidget/StatefulWidget 前期我們都繼承 StatelessWidget。后期給大家講 StatefulWidget 的使用。 StatelessWidget 是無狀態組件，狀態不可變的 widget
StatefulWidget 是有狀態組件，持有的狀態可能在 widget 生命周期改變

 

---

用MaterialApp 和 Scaffold兩個組件 裝飾 App、

 

1、MaterialApp

MaterialApp 是一個方便的 Widget，它封裝了應用程序實現 Material Design 所需要的 一些 Widget。一般作為頂層 widget 使用。

 

常用的屬性:

home(主頁)

title(標題)

color(顏色)

theme(主題)

routes(路由)

...

 

2、Scaffold
Scaffold 是 Material Design 布局結構的基本實現。此類提供了用於顯示 drawer、

snackbar 和底部 sheet 的 API。

Scaffold 有下面幾個主要屬性:

appBar - 顯示在界面頂部的一個 AppBar。 body - 當前界面所顯示的主要內容 Widget。 drawer - 抽屜菜單控件。
...

 

---

示例代碼：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "我是一個標題",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loaderman'),
          elevation: 15.0,
        ),
        //設置標題陰影
        body: MyHome(),
      ),
      theme: ThemeData(
          //設置主題顏色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "我是 loaderman",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 15, fontWeight: FontWeight.bold, color: Colors.black),
      ),
    );
    ;
  }
}