Flutter學習–基礎控件

• 2019 年 10 月 8 日
• 筆記

在開始使用flutter之前,需要熟悉dart語法,然後就開始學flutter的基礎控件了.

Widget介紹

貼上flutter官網的介紹:

Widget描述了他們的視圖在給定其當前配置和狀態時應該看起來像什麼。當widget的狀態發生變化時，widget會重新構建UI，Flutter會對比前後變化的不同， 以確定底層渲染樹從一個狀態轉換到下一個狀態所需的最小更改（譯者語：類似於React/Vue中虛擬DOM的diff算法）。

實現一個Flutter應用程序,需要在runApp函數中傳入widget.

下面是一個最簡單的Flutter應用程序:

import 'package:flutter/material.dart';    void main() {    runApp(      new Center(        child: new Text(          'Hello, world!',          textDirection: TextDirection.ltr,        ),      ),    );  }

1.StatelessWidget和StatefulWidget

widget可以分為StatelessWidget和StatefulWidget,即不需要改變狀態和可以改變狀態的widget.

2.基礎widget

列舉基礎的widget,屬性皆可在源碼中看到(F12),就不一一列舉啦…

• MaterialApp

作為根組件,裏面包含很多屬性,例如:home / title / theme 等

• Scaffold

Scaffold實現了基本布局結構,屬性主要有: appBar / body / floatingActionButton / drawer / backgroundColor 等

• Text

文本組件.包含屬性有:

textAlign: center / right / left;

textDirection: ltr / rtl;

overflow: (文字超出屏幕之後的處理方式) clip / fade / ellipsis;

textScaleFactor: 文字顯示最大行數;

style: 字體的樣式調整

• Container

容器組件,相當於div.包含屬性有:

color / width / height / child / margin / padding / decoration / transform 等

• 圖片組件

Image.network()放置遠程圖片,Image.asset(),屬性有: color / alignment / colorBlendMode / fit 等

實現圓角圖片: 1.通過container的borderRadius; 2.borderRadius結合image屬性; 3.ClipOval類

• 布局組件:Row + Column
• 列表組件:ListView + GridView

正在學習中,持續更新哈