在這個(gè)系列中慕的，我們將學(xué)習(xí)如何使用google的移動(dòng)開(kāi)發(fā)框架flutter創(chuàng)建一個(gè)電商應(yīng)用火诸。本文是flutter框架系列教程的第一部分灵份，將學(xué)習(xí)如何安裝Flutter開(kāi)發(fā)環(huán)境并創(chuàng)建第一個(gè)Flutter應(yīng)用扬跋，并學(xué)習(xí)Flutter應(yīng)用開(kāi)發(fā)中的核心概念腻菇，例如widget园细、狀態(tài)等惦积。
本系列教程包含如下四個(gè)部分，敬請(qǐng)期待：
- 如何從零構(gòu)建flutter應(yīng)用
- 如何在flutter中布局元素
- 如何在flutter中組織數(shù)據(jù)
- 如何在flutter中展示數(shù)據(jù)
1. 開(kāi)發(fā)環(huán)境安裝與Flutter項(xiàng)目創(chuàng)建
Flutter的開(kāi)發(fā)文檔相當(dāng)出色猛频，請(qǐng)參考官方文檔先安裝開(kāi)發(fā)環(huán)境狮崩。
一旦開(kāi)發(fā)環(huán)境安裝好，我們可以創(chuàng)建一個(gè)新的測(cè)試項(xiàng)目鹿寻。我傾向于使用android studio睦柴，因?yàn)樗鼮閒lutter應(yīng)用的開(kāi)發(fā)提供了一個(gè)完備的集成開(kāi)發(fā)環(huán)境。你需要在Android studio中安裝一個(gè)Dard語(yǔ)言插件毡熏。
現(xiàn)在啟動(dòng)Android Studio坦敌，你會(huì)看到初始化Flutter項(xiàng)目的選項(xiàng)：
從配置列表中選擇**Flutter Application **。
可以為你的第一個(gè)Flutter應(yīng)用起一個(gè)酷炫的名字痢法，不過(guò)如果你和我一樣不善于起名狱窘，就用timer好了。
[圖片上傳失敗...(image-ae37e3-1544662561857)]
對(duì)話框的最后一步财搁，會(huì)要求我們填寫(xiě)應(yīng)用的包名：
接下來(lái)Flutter SDK就會(huì)為應(yīng)用創(chuàng)建一個(gè)初始的目錄結(jié)構(gòu)蘸炸，main.dart是應(yīng)用執(zhí)行的入口。
2. 編寫(xiě)并測(cè)試應(yīng)用代碼
在Flutter中尖奔，一切都是控件（widget）搭儒。Flutter應(yīng)用中的圖像穷当、圖標(biāo)和文本都是widget。布局元素例如行淹禾、列馁菜、柵格等用來(lái)安排其他widget的位置、大小和對(duì)齊铃岔，而這些布局元素本身也是widget汪疮。
參考如下代碼修改你的main.dart文件：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
現(xiàn)在啟動(dòng)Android模擬器：
[站外圖片上傳中...(image-343cff-1544662561857)]
注意widget的焦點(diǎn)，我們接下來(lái)將修改MaterialApp的內(nèi)容德撬。先看一下原始版本：
body: Center(
child: Text('Hello World'),
)
Flutter中的布局元素（也是widget）可以根據(jù)其是否支持包含多個(gè)widget铲咨，而簡(jiǎn)單地歸類(lèi)為兩種類(lèi)型。例如蜓洪，Container、Padding只能包含一個(gè)子widget坯苹，而Row隆檀、Column則可以包含多個(gè)。
現(xiàn)在我們?cè)赗ow布局中引入三個(gè)文本widget：
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('0'),
Text('0'),
Text('0'),
],
),
),
現(xiàn)在看起來(lái)是這樣：
在我們開(kāi)始設(shè)置組件的樣式之前粹湃，建議先創(chuàng)建一個(gè)新的widget來(lái)處理樣式問(wèn)題恐仑，以便遵循DRY（Don't Repeat Yoursel）原則。
將三個(gè)子widget用一個(gè)自定義widget（后面解釋?zhuān)┨鎿Q∥現(xiàn)在main.dart文件變成：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Timer'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomTextContainer(),
CustomTextContainer(),
CustomTextContainer(),
],
),
),
),
);
}
}
class CustomTextContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('00');
}
}
我不是很擅長(zhǎng)用戶界面裳仆，但是我們還是盡力吧，加點(diǎn)背景色孤钦，留點(diǎn)空白：
class CustomTextContainer extends StatelessWidget {
CustomTextContainer({this.label, this.value});
final String label;
final String value;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
padding: EdgeInsets.all(20),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(10),
color: Colors.black87,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'$value',
style: TextStyle(
color: Colors.white,
fontSize: 54,
fontWeight: FontWeight.bold,
),
),
Text(
'$label',
style: TextStyle(
color: Colors.white70,
),
)
],
),
);
}
}
同時(shí)歧斟，在文本下面插入一個(gè)按鈕widget，修改后的代碼運(yùn)行結(jié)果如下：
[站外圖片上傳中...(image-d874b4-1544662561857)]
現(xiàn)在到了app最不可或缺的部分了：狀態(tài)偏形。狀態(tài)將持有timer的當(dāng)前值和運(yùn)行標(biāo)識(shí)静袖。我
補(bǔ)充了一個(gè)TimerState類(lèi)，它負(fù)責(zé)維護(hù)狀態(tài)俊扭，同時(shí)構(gòu)建widget樹(shù)队橙。
class Timer extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new TimerState();
}
}
class TimerState extends State<Timer> {
int secondsPassed = 0;
bool isActive = false;
@override
Widget build(BuildContext context) {
// Return Widget Tree
}
}
按鈕用來(lái)切換timer的運(yùn)行或者停止：
RaisedButton(
child: Text(isActive ? 'STOP' : 'START'),
onPressed: () {
setState(() {
isActive = !isActive;
});
},
)
Dart有個(gè)用于異步操作的優(yōu)雅的模塊。我們可以使用其Timer類(lèi)來(lái)實(shí)現(xiàn)讀秒萨惑。修改后的TimerAppState代碼如下捐康，注意我們已經(jīng)重構(gòu)Timer類(lèi)并改名為T(mén)imerApp以避免與異步模塊中的Timer類(lèi)混淆：
class TimerAppState extends State<TimerApp> {
static const duration = const Duration(seconds:1);
int secondsPassed = 0;
bool isActive = false;
Timer timer;
void handleTick() {
if (isActive) {
setState(() {
secondsPassed = secondsPassed + 1;
});
}
}
@override
Widget build(BuildContext context) {
if (timer == null)
timer = Timer.periodic(duration, (Timer t) {
handleTick();
});
int seconds = secondsPassed % 60;
int minutes = secondsPassed ~/ 60;
int hours = secondsPassed ~/ (60*60);
return MaterialApp(...)
}
}
好了，我們已經(jīng)完成了第一個(gè)Flutter應(yīng)用庸蔼，完整的Dard代碼可以在這里下載解总。
原文鏈接：【Flutter教程】從零構(gòu)建電商應(yīng)用（一）
匯智網(wǎng)翻譯整理，轉(zhuǎn)載請(qǐng)標(biāo)明出處朱嘴。
