Flutter 目錄結構，入口文件，自定義組件，常用組件使用概述總結

Flutter 基礎入門

目錄結構介紹，入口，自定義Widget，Center組件，Text組件，MaterialApp組件，Scaffold組件

目錄結構介紹

文件夾	作用
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 是自定義的一個組件.

一個最基礎的案例展示

import 'package:flutter/material.dart';

void main(){
  runApp(
    Center(
      child: Text(
        'flutter 基礎項目',
        textDirection: TextDirection.ltr
        ), // Text
    )
  );
}

然後模擬器屏幕最中間出現一串白色的文字，“flutter 基礎項目”

自定義組件

自定義組件，實質上就是自定義一個類，不斷的給每個類新增所需要的參數

// HomeCOntent 組件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'Flutter 基礎項目',
        textDirection: TextDirection.ltr,
        style: TextStyle(
            color: Colors.indigo,
            fontSize: 30
          ),
        ), // Text
    );
  }
}

案例展示效果：

Center組件，Text組件，MaterialApp組件，Scaffold組件

一些常用的flutter內置的相關組件，主要使用的方式就是配置構造方法的參數使用，建議藉助IDE編輯器，自動補全來編寫，因爲對於新手來說太多太雜，記不住

// 自定義組件
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("大喵課堂"),  // 頂部導航欄
        ),
        body: HomeCOntent(),  // 中間主題內容
      ),
      theme: ThemeData(
          primarySwatch: Colors.pink  // 粉色系主題
      )
    );
  }
}

全部案例代碼

最終展示的案例效果和入口文件代碼

import 'package:flutter/material.dart';

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

// 自定義組件
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("大喵課堂"),  // 頂部導航欄
        ),
        body: HomeCOntent(),  // 中間主題內容
      ),
      theme: ThemeData(
          primarySwatch: Colors.pink  // 粉色系主題
      )
    );
  }
  
}

// HomeCOntent 組件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'Flutter 基礎項目',
        textDirection: TextDirection.ltr,
        style: TextStyle(
            color: Colors.indigo,
            fontSize: 30
          ),
        ), // Text
    );
  }
}

最終案例效果：