你需要耐心觀看，不然沒有一顆學(xué)習(xí)的心，說得再詳細(xì)也是徒勞的
flutter對于Android來說相信很多同學(xué)都有許許多多的問題
比如啊
1.fultter 如何刷新頁面啊，
2.flutter 如何設(shè)置點(diǎn)擊事件啊
3.flutter 如何刷新listView
4.flutter 如何延遲、網(wǎng)絡(luò)刷新啊
等等 等等
這篇文章不討論底層，有些東西也不討論他是干啥的，
有這么一句話，只要你會用再去了解他的原理
ios的同學(xué)需要先學(xué)習(xí)一下dart語法
我就用Android的開始說了
Android 或 ios
Android 有個(gè)xml ,可以使用xml來先畫界面，然后fingviewbyid來賦值，這是Android的思路
Android:java + xml來繪畫基礎(chǔ)頁面
然而flutter他是分為不同兩種的，如果感覺這種語法(畫頁面)很奇怪，那么建議先看一下drat語法
視圖樹(看不懂沒關(guān)系，只要會用就行) + dart 來繪畫頁面的
Android 頁面
1599017582(1).jpg
可分為很多種布局，相對，線性，絕對，等等
flutter對于初學(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ū)域
簡單地說，如果想深入了解的小伙伴，可以先去百度
StatelessWidget 與 StatefulWidget
StatelessWidget 為靜態(tài)頁面 不可刷新
StatefulWidget 為動(dòng)態(tài)頁面 可刷新UI頁面
這么說吧 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ù)
