flutter學(xué)習(xí)第一章

你需要耐心觀看,不然沒有一顆學(xué)習(xí)的心,說得再詳細(xì)也是徒勞的

flutter對(duì)于Android來說相信很多同學(xué)都有許許多多的問題

比如啊

1.fultter 如何刷新頁(yè)面啊,

2.flutter 如何設(shè)置點(diǎn)擊事件啊

3.flutter 如何刷新listView

4.flutter 如何延遲、網(wǎng)絡(luò)刷新啊

等等 等等

這篇文章不討論底層星持,有些東西也不討論他是干啥的,

有這么一句話弹灭,只要你會(huì)用再去了解他的原理

ios的同學(xué)需要先學(xué)習(xí)一下dart語(yǔ)法

我就用Android的開始說了

Android 或 ios

Android 有個(gè)xml ,可以使用xml來先畫界面督暂,然后fingviewbyid來賦值,這是Android的思路

Android:java + xml來繪畫基礎(chǔ)頁(yè)面

然而flutter他是分為不同兩種的穷吮,如果感覺這種語(yǔ)法(畫頁(yè)面)很奇怪逻翁,那么建議先看一下drat語(yǔ)法

視圖樹(看不懂沒關(guān)系,只要會(huì)用就行) + dart 來繪畫頁(yè)面的

Android 頁(yè)面

1599017582(1).jpg

可分為很多種布局捡鱼,相對(duì)八回,線性,絕對(duì)驾诈,等等

flutter對(duì)于初學(xué)者來說缠诅,目前你就只知道它有個(gè) 行和列布局(它也有很多種強(qiáng)大布局,目前只了解這2個(gè)就行)

flutter項(xiàng)目如下

1599017790(1).png

標(biāo)注的是咋們基本用到的

Android:使我們最熟悉的東西

assets:資源文件夾

img:圖片存放目錄

ios:不鳥他

lib:存放dart代碼目錄

首先我們創(chuàng)建一個(gè)存放代碼的目錄

1599017994(1).png

我創(chuàng)建了一個(gè)名叫"day_01的文件夾"

1599018056(1).png

里邊放了一個(gè)叫Day01的dart文件

我們打開文件乍迄,發(fā)現(xiàn)里邊連個(gè)啥都沒有管引!直接有點(diǎn)懵!

1599018194(1).png

很正常這個(gè)闯两,先不要管褥伴,java是以文件名為類的(可能不太正確,但這是規(guī)則漾狼,就像命名規(guī)則一樣)

而dart可以再一個(gè)文件中擁有很多很多的類(不說這么多了0.0重慢,感覺再說多了都木了..,記住就行)

----------------------------------開始代碼區(qū)域

簡(jiǎn)單地說,如果想深入了解的小伙伴逊躁,可以先去百度

StatelessWidget 與 StatefulWidget

StatelessWidget 為靜態(tài)頁(yè)面 不可刷新

StatefulWidget 為動(dòng)態(tài)頁(yè)面 可刷新UI頁(yè)面

這么說吧 Android 就把它理解為(StatelessWidget 或 StatefulWidget)Activity

ios 就把他理解為(StatelessWidget 或 StatefulWidget)控制器

第一步[格式是死的記住就行]

在Android Studio 中輸入

不想寫可在Android Studio 中輸入快捷鍵: stful 回車就能自動(dòng)生成

//導(dǎo)包為material.dart
import 'package:flutter/material.dart';
//創(chuàng)建一個(gè)Day01 的類
class Day01 extends StatefulWidget {

  @override
  _Day01State createState() => _Day01State();
}
//返回視圖樹
class _Day01State extends State<Day01> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

小組件,現(xiàn)在就開始要死記硬背小組件了

-

---------------------------小組件

-

主題: MaterialApp 記憶法M'y'APP 根據(jù)提示就能找出來了

腳手架 :Scaffold 記憶法 S ca,自行腦補(bǔ)

橫向:Row 記憶法:它與Rom比較像似踱,吧m倒過來就行了

豎向: Column 記憶法:它與Color(前邊,加上提示就知道了)比較像稽煤,所以記住:Col提示就出來了

文本: Text 記憶法:這個(gè)就不用說了吧核芽?

-

---------------------------小組件

-

就用這4個(gè)組件我們來看看豎向和橫向的排列

啥,你說MaterialApp 是干啥的念脯,怎么用,啥都不知道就往上搞弯淘?

MaterialApp 類似于一個(gè)可以設(shè)置APP的主題绿店,你不想要也行,但是不推薦

Scaffold(腳手架) 的作用

他可以給這幾個(gè)地方放view

1599019815(1).png

一般我們用boy

來繼續(xù)我們說的橫向豎向排列

加入主入口

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

它相當(dāng)于

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

全部代碼

import 'package:flutter/material.dart';

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

class Day01 extends StatefulWidget {

  @override
  _Day01State createState() => _Day01State();
}

class _Day01State extends State<Day01> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
//------------------------------------------新增
      home: Scaffold(

        body: Column(

          children: <Widget>[


            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),


          ],

        )

        ,


      ),
    );
  }
}

效果圖:


BB2AF58177C785ECD05569EFE3C3D549.png

------------未完待續(xù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市假勿,隨后出現(xiàn)的幾起案子借嗽,更是在濱河造成了極大的恐慌,老刑警劉巖转培,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恶导,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡浸须,警方通過查閱死者的電腦和手機(jī)惨寿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來删窒,“玉大人裂垦,你說我怎么就攤上這事〖∷鳎” “怎么了蕉拢?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)诚亚。 經(jīng)常有香客問我晕换,道長(zhǎng),這世上最難降的妖魔是什么站宗? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任闸准,我火速辦了婚禮,結(jié)果婚禮上份乒,老公的妹妹穿的比我還像新娘恕汇。我一直安慰自己,他們只是感情好或辖,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布瘾英。 她就那樣靜靜地躺著,像睡著了一般颂暇。 火紅的嫁衣襯著肌膚如雪缺谴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天耳鸯,我揣著相機(jī)與錄音湿蛔,去河邊找鬼。 笑死县爬,一個(gè)胖子當(dāng)著我的面吹牛阳啥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播财喳,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼察迟,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼斩狱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扎瓶,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤所踊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后概荷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體秕岛,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年误证,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了继薛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡雷厂,死狀恐怖惋增,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情改鲫,我是刑警寧澤诈皿,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站像棘,受9級(jí)特大地震影響稽亏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缕题,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一截歉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧烟零,春花似錦瘪松、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至墅诡,卻和暖如春壳嚎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背末早。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工烟馅, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人然磷。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓郑趁,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親姿搜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子寡润,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348