flutter-widgets.png

一、MaterialApp(App素材)

home屬性（主界面）

import 'package:flutter/material.dart'; // flutter素材，類(lèi)似iOSUIKit
import 'model/car.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.restaurant_menu),
          tooltip: 'ceshi',
          onPressed: null,

        ),
        title: const Text('Flutter Title'),
      ),
      body:const Center(
        child: Text(
          'hello flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

上面代碼運(yùn)行如下：

二、Widget介紹

創(chuàng)建一個(gè)最小的 Flutter 應(yīng)用簡(jiǎn)單到僅需調(diào)用 runApp() 方法并傳入一個(gè) widget 即可

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

1. Flutter伊始讼积，萬(wàn)物皆Widget；

• Widget是什么脚仔？
  a. Widget類(lèi)比iOS中的UIView勤众，但Widget 擁有著不同的生命周期：整個(gè)生命周期內(nèi)它是不可變的，且只能夠存活到被修改的時(shí)候鲤脏。
  b. 一旦 Widget 實(shí)例或者它的狀態(tài)發(fā)生了改變们颜， Flutter 框架就會(huì)創(chuàng)建一個(gè)新的由 Widget 實(shí)例構(gòu)造而成的樹(shù)狀結(jié)構(gòu)。而在 iOS 里猎醇，修改一個(gè)視圖并不會(huì)導(dǎo)致它重新創(chuàng)建實(shí)例窥突，它作為一個(gè)可變對(duì)象，只會(huì)繪制一次硫嘶，只有在發(fā)生 setNeedsDisplay() 調(diào)用之后才會(huì)發(fā)生重繪阻问。

• Widget的特性
  a. Flutter 的 Widget是很輕量的，一部分原因就是源于它的不可變特性沦疾。因?yàn)樗⒉皇且晥D称近，也不直接繪制任何內(nèi)容，而是作為對(duì) UI 及其特性的一種描述哮塞，而被“注入”到視圖中去刨秆。可以把它理解為“聲明和構(gòu)造 UI 的方法”忆畅。
  b. 自定義一個(gè)Widget要能夠被渲染衡未，需要實(shí)現(xiàn) - build方法

• Widget的分類(lèi)

  • 有狀態(tài)：statefulWiget
    widget 在 build 方法之外（比如運(yùn)行時(shí)下發(fā)生用戶(hù)點(diǎn)擊事件）需要被修改，那么就應(yīng)該是有狀態(tài)的家凯。訪問(wèn)數(shù)據(jù)在state里邊眠屎，通過(guò)setState設(shè)置/改變數(shù)據(jù)
  • 無(wú)狀態(tài)：statelessWidget
    widget 一旦生成就不再發(fā)生改變，那么它就是無(wú)狀態(tài)的

• StatefulWidget 和 StatelessWidget 的區(qū)別
  StatefulWidget 中有一個(gè) State 對(duì)象肆饶，它用來(lái)存儲(chǔ)一些狀態(tài)的信息改衩，并在整個(gè)生命周期內(nèi)保持不變⊙蹦鳎總之葫督，如果一個(gè) WidgeT 在 build方法之外（比如運(yùn)行時(shí)下發(fā)生用戶(hù)點(diǎn)擊事件）被修改竭鞍，那么就應(yīng)該是有狀態(tài)的。如果一個(gè) widget 一旦生成就不再發(fā)生改變橄镜，那么它就是無(wú)狀態(tài)的偎快。

• 常用的基礎(chǔ)Widget

特別說(shuō)明下stack以及和其常搭配在一塊的小部件族淮；

Stack

• Stack是多層布局
• 它的主軸方向是從內(nèi)向外
• alignment屬性：（用來(lái)定位）
  • Alignment(x, y) ，x和y的取值范圍-1.0~1.0
  • x=0, y=0為中心
• Positioned小部件
  • left凭涂、top祝辣、right、bottom4個(gè)屬性定位
  • 參數(shù)是像素位置
• AspectRatio 寬高比小部件
  • 它的設(shè)置影響父布局
  • sepectRatio屬性：寬高比
  • 當(dāng)父布局同時(shí)有寬度和高度切油，那么寬高比失效

三蝙斜、布局

每一個(gè)U部件都可以看成一個(gè)矩形的“盒子”，每個(gè)“盒子”都有外邊距Margin和內(nèi)邊距Padding澎胡。

主軸：MainAxisAlignment

MainAxisAlignment	布局樣式
start 向主軸開(kāi)始的方向?qū)R
center 主軸方向居中對(duì)齊
end 向主軸結(jié)束的方向?qū)R
spaceBetween 剩下的空間平均分布到小部件之間
spaceAround 剩下的空間平均分布到小部件周?chē)?/td>
spaceEvenly 剩下的空間和小部件一起平均分

交叉軸：CrossAxisAlignment 垂直于主軸方向

CrossAxisAlignment	布局樣式
baseline 文字底部對(duì)齊
center 交叉軸方向居中對(duì)齊
end 向交叉軸結(jié)束的方向?qū)R
start 向交叉軸開(kāi)始的方向?qū)R
stretch 填滿(mǎn)交叉軸方向

Expanded填充布局

• 在主軸方向不會(huì)盛夏間隙孕荠，將被Expanded白裝的部件進(jìn)行
  拉伸和壓縮娩鹉；
• 主軸橫向，寬度設(shè)置沒(méi)有意義稚伍；
• 主軸縱向弯予，高度設(shè)置沒(méi)有意義；
• 當(dāng)Text被Expanded包裝后个曙，文字可以自動(dòng)換行锈嫩。這也被稱(chēng)作靈活布局。