學(xué)習(xí)完Dart語言基礎(chǔ),我們來學(xué)習(xí)Flutter框架中的一些知識(shí),控件使用,網(wǎng)絡(luò)請(qǐng)求,手勢(shì)操作等.
創(chuàng)建Flutter項(xiàng)目
創(chuàng)建Flutter項(xiàng)目有兩種方式：
通過命令行創(chuàng)建和通過開發(fā)工具創(chuàng)建
通過命令行創(chuàng)建
通過命令行創(chuàng)建很簡(jiǎn)單,類似于React-Native,使用命令創(chuàng)建項(xiàng)目
flutter create flutter_demo
再打開模擬器,創(chuàng)建項(xiàng)目的路徑下運(yùn)行命令
flutter run
通過開發(fā)工具創(chuàng)建
這里我們使用 Android Studio創(chuàng)建一個(gè)Flutter項(xiàng)目
選擇application下一步,創(chuàng)建完成.
運(yùn)行
在目錄下有一個(gè)lib文件夾沟饥，里面會(huì)存放我們編寫的Flutter代碼铝噩；
打開發(fā)現(xiàn)里面有一個(gè)main.dart稽莉，它是我們Flutter啟動(dòng)的入口文件缸剪，里面有main函數(shù)
開始Flutter 代碼
我們把main.dart中的代碼刪除,增加以下代碼
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
下面我們分析以下上面的代碼
runApp() 函數(shù)會(huì)持有傳入的 Widget，并且使它成為 widget 樹中的根節(jié)點(diǎn)迄损。在這個(gè)例子中嗦玖，Widget 樹有兩個(gè) widgets合武， Center widget 及其子 widget ——Text “茫框架會(huì)強(qiáng)制讓根 widget 鋪滿整個(gè)屏幕荧止，也就是說“Hello World”會(huì)在屏幕上居中顯示。在這個(gè)例子我們需要指定文字的方向
runApp()
runApp是Flutter內(nèi)部提供的一個(gè)函數(shù)阶剑，當(dāng)我們啟動(dòng)一個(gè)Flutter應(yīng)用程序時(shí)就是從調(diào)用這個(gè)函數(shù)開始的
void runApp(Widget app) {
...省略代碼
}
該函數(shù)讓我們傳入一個(gè)widget
widget到底是啥?
安卓和iOS開發(fā)的人一般喜歡稱為控件,
前端開發(fā)人員一般喜歡稱為組件
基礎(chǔ) widgets
Text
Textwidget 可以用來在應(yīng)用內(nèi)創(chuàng)建帶樣式的文本跃巡。Row, Column
這兩個(gè) flex widgets 可以讓你在水平 (Row) 和垂直(Column) 方向創(chuàng)建靈活的布局。它是基于 web 的 flexbox 布局模型設(shè)計(jì)的个扰。Stack
Stackwidget 不是線性（水平或垂直）定位的瓷炮，而是按照繪制順序?qū)?widget 堆疊在一起。你可以用 Positioned widget 作為Stack的子 widget递宅，以相對(duì)于Stack的上娘香，右，下办龄，左來定位它們烘绽。Stack是基于 Web 中的絕對(duì)位置布局模型設(shè)計(jì)的。Container
Containerwidget 可以用來創(chuàng)建一個(gè)可見的矩形元素俐填。Container可以使用 BoxDecoration 來進(jìn)行裝飾安接，如背景，邊框英融，或陰影等盏檐。Container還可以設(shè)置外邊距歇式、內(nèi)邊距和尺寸的約束條件等。另外胡野，Container可以使用矩陣在三維空間進(jìn)行轉(zhuǎn)換材失。
代碼改進(jìn)
我們可能希望文字大一些,
- 文字大一些: 需要給Text文本設(shè)置一些樣式；
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(
Center(
child: Text(
"Hello World",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 36),
),
)
);
}
目前我們雖然可以顯示HelloWorld硫豆，但是我們發(fā)現(xiàn)最底部的背景是黑色龙巨，并且我們的頁面并不夠結(jié)構(gòu)化。
正常的App頁面應(yīng)該有一定的結(jié)構(gòu)熊响，比如通常都會(huì)有導(dǎo)航欄旨别，會(huì)有一些背景顏色等
在開發(fā)當(dāng)中，我們并不需要從零去搭建這種結(jié)構(gòu)化的界面汗茄，我們可以使用Material庫秸弛，直接使用其中的一些封裝好的組件來完成一些結(jié)構(gòu)的搭建。
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Hello World"),
),
body: Center(
child:Text(
"Hello,World!",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 30),
) ,
),
),
));
}
Scaffold是什么呢洪碳？
- 翻譯過來是
腳手架胆屿，腳手架的作用就是搭建頁面的基本結(jié)構(gòu)； - 所以我們給MaterialApp的home屬性傳入了一個(gè)Scaffold對(duì)象偶宫，作為啟動(dòng)顯示的Widget非迹；
- Scaffold也有一些屬性，比如
appBar和body纯趋； - appBar是用于設(shè)計(jì)導(dǎo)航欄的憎兽，我們傳入了一個(gè)
title屬性； - body是頁面的內(nèi)容部分吵冒，我們傳入了之前已經(jīng)創(chuàng)建好的Center中包裹的一個(gè)Text的Widget纯命；
案例學(xué)習(xí)
自定義Widget
- 標(biāo)題的Widget：使用一個(gè)Text Widget完成；
- 描述的Widget：使用一個(gè)Text Widget完成痹栖；
- 圖片的Widget：使用一個(gè)Image Widget完成亿汞；
- 上面三個(gè)Widget要垂直排列，我們可以使用一個(gè)Column的Widget（上一個(gè)章節(jié)中我們使用了一次Row是水平排列的）
列表數(shù)據(jù)展示
我們創(chuàng)建三個(gè)ImageItem豎直排列展示
代碼如下
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.blueAccent
),
home: Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ImageItem("Apple1", "第一行的詳情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
ImageItem("Apple2", "第二行的詳情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
ImageItem("Apple3", "第三行的詳情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
],
);
}
}
class ImageItem extends StatelessWidget{
String title;
String detail;
String imgUrl;
ImageItem(this.title,this.detail,this.imgUrl);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text(title,style: TextStyle(fontSize: 20)),
Text(detail,style: TextStyle(fontSize: 14)),
Image.network(imgUrl),
],
);
}
}
執(zhí)行結(jié)果:
錯(cuò)誤信息：下面出現(xiàn)了黃色的斑馬線揪阿；
這是因?yàn)樵贔lutter的布局中疗我，內(nèi)容是不能超出屏幕范圍的，當(dāng)超出時(shí)不會(huì)自動(dòng)變成滾動(dòng)效果南捂，而是會(huì)報(bào)下面的錯(cuò)誤
如何可以解決這個(gè)問題呢吴裤？
我們將Column換成ListView即可；
ListView可以讓自己的子Widget變成滾動(dòng)的效果
細(xì)節(jié)調(diào)整
- 文字距離圖片太近
- 給Item增加一個(gè)內(nèi)邊距和邊框
最終代碼如下:
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.blueAccent
),
home: Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ImageItem("Apple1", "第一行的詳情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
ImageItem("Apple2", "第二行的詳情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
ImageItem("Apple3", "第三行的詳情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
],
);
}
}
class ImageItem extends StatelessWidget{
final String title;
final String detail;
final String imgUrl;
ImageItem(this.title,this.detail,this.imgUrl);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border.all()
),
child: Column(
children: <Widget>[
Text(title,style: TextStyle(fontSize: 20)),
Text(detail,style: TextStyle(fontSize: 14)),
SizedBox(height: 10,),
Image.network(imgUrl),
]
),
);
}
}
運(yùn)行結(jié)果:
本篇中很多widget未詳細(xì)說明用法,后面會(huì)具體說用法,本篇主要學(xué)習(xí)一個(gè)頁面搭建的主要流程.
本文參考Flutter(六)之Flutter開發(fā)初體驗(yàn)
