Flutter項(xiàng)目目錄結(jié)構(gòu)介紹

以我新創(chuàng)建的myflutter項(xiàng)目為例似芝，用vscode打開是這樣：

image.png

Flutter 入口文件

lib目錄里面的 main.dart 文件就是 flutter項(xiàng)目 的入口文件,
其中的 main 方法是 dart 的入口方法仰税。runApp 方法是 flutter 的入口方法构资。 MyApp 是自定義的一個(gè)組件。

void main()=>runApp(MyApp());

一個(gè)最簡單的Flutter應(yīng)用程序陨簇，只需一個(gè)widget即可吐绵！如上面示例：將一個(gè)widget傳給runApp函數(shù)即可。

該runApp函數(shù)接受給定的Widget并使其成為widget樹的根河绽。 在此示例中己单，widget樹由兩個(gè)widget:Center(及其子widget)和Text組成“沂危框架強(qiáng)制根widget覆蓋整個(gè)屏幕纹笼，這意味著文本“Hello, world”會(huì)居中顯示在屏幕上。文本顯示的方向需要在Text實(shí)例中指定苟跪，當(dāng)使用MaterialApp時(shí)廷痘，文本的方向?qū)⒆詣?dòng)設(shè)定矮嫉，稍后將進(jìn)行演示。
在編寫應(yīng)用程序時(shí)牍疏，通常會(huì)創(chuàng)建新的widget蠢笋，這些widget是無狀態(tài)的StatelessWidget或者是有狀態(tài)的StatefulWidget， 具體的選擇取決于您的widget是否需要管理一些狀態(tài)鳞陨。widget的主要工作是實(shí)現(xiàn)一個(gè)build函數(shù)昨寞，用以構(gòu)建自身。一個(gè)widget通常由一些較低級(jí)別widget組成厦滤。Flutter框架將依次構(gòu)建這些widget援岩，直到構(gòu)建到最底層的子widget時(shí)，這些最低層的widget通常為RenderObject掏导，它會(huì)計(jì)算并描述widget的幾何形狀享怀。

基礎(chǔ) Widget

Flutter有一套豐富、強(qiáng)大的基礎(chǔ)widget趟咆，其中以下是很常用的：

• Text：該 widget 可讓創(chuàng)建一個(gè)帶格式的文本添瓷。

• Row、 Column： 這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局值纱。其設(shè)計(jì)是基于web開發(fā)中的Flexbox布局模型鳞贷。

• Stack： 取代線性布局 (譯者語：和Android中的LinearLayout相似)，Stack允許子 widget 堆疊虐唠， 你可以使用Positioned 來定位他們相對(duì)于Stack的上下左右四條邊的位置搀愧。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計(jì)的。

• Container： Container 可讓您創(chuàng)建矩形視覺元素疆偿。container 可以裝飾為一個(gè)BoxDecoration, 如 background咱筛、一個(gè)邊框、或者一個(gè)陰影杆故。 Container 也可以具有邊距（margins）迅箩、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外反番， Container可以使用矩陣在三維空間中對(duì)其進(jìn)行變換沙热。

MaterialApp

Flutter提供了許多widgets，可幫助您構(gòu)建遵循Material Design的應(yīng)用程序罢缸。Material應(yīng)用程序以MaterialAppwidget開始错妖， 該widget在應(yīng)用程序的根部創(chuàng)建了一些有用的widget粪躬，其中包括一個(gè)Navigator， 它管理由字符串標(biāo)識(shí)的Widget棧（即頁面路由棧）。Navigator可以讓您的應(yīng)用程序在頁面之間的平滑的過渡立帖。 是否使用MaterialApp完全是可選的玛界，但是使用它是一個(gè)很好的做法。

常用的屬性:
home(主頁) title(標(biāo)題) color(顏色) theme(主題) routes(路由) ...

Scaffold

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

Scaffold 有下面幾個(gè)主要屬性:
appBar - 顯示在界面頂部的一個(gè) AppBar
body - 當(dāng)前界面所顯示的主要內(nèi)容 Widget
drawer - 抽屜菜單控件圃泡。
...

demo代碼

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('data'),
          elevation: 30,//設(shè)置標(biāo)題陰影碟案，默認(rèn)0.0
        ),
        body: MyHome(),
        // drawer: ,
      ),
      theme: ThemeData(//主題顏色
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '首頁內(nèi)容'
      ),
    );
  }
}

demo效果

image.png

參考：
https://flutterchina.club/widgets-intro/
https://flutter.dev